Links externos abrem em novas abas?

Entender como configurar links externos para abrir em novas abas é essencial para criar uma experiência de navegação que mantém os usuários conectados ao seu site, mesmo quando exploram recursos externos.

Ao implementar corretamente o atributo target=”_blank” nos seus links externos, você preserva o contexto de navegação original do usuário enquanto permite que ele acesse conteúdo de terceiros, criando uma experiência de usuário mais fluida e profissional.

Como fazer links externos abrirem em novas abas

Por padrão, links em páginas HTML abrem no mesmo contexto de navegação (mesma aba ou janela). Para fazer com que links externos abram em novas abas, é necessário adicionar o atributo target=”_blank” à tag de âncora ().

Nome do link

Quando um usuário clica neste link, o navegador abre o destino em uma nova aba ou janela, mantendo a página original intacta e acessível.

Considerações de segurança com target=”_blank”

Ao usar target=”_blank”, é importante adicionar também o atributo rel=”noopener” (ou rel=”noopener noreferrer” para compatibilidade com navegadores mais antigos). Isso evita uma vulnerabilidade de segurança onde a página aberta pode acessar a página original através do objeto window.opener.

Exemplo de implementação segura:

Nome do link

Quando usar links em novas abas?

Decidir quando um link deve abrir em nova aba é uma questão de usabilidade. Existem algumas diretrizes que podem ajudar:

• Links externos: Geralmente é uma boa prática abrir links para outros sites em novas abas
• Documentos para download: PDFs, planilhas e outros documentos funcionam melhor em novas abas
• Links que interrompem processos: Se o usuário está preenchendo um formulário, links de referência devem abrir em novas abas
• Links de mídia social: Botões de compartilhamento geralmente abrem em novas abas

Quando não usar links em novas abas?

Nem todos os links devem abrir em novas abas. Links internos do seu próprio site geralmente devem abrir na mesma aba para manter o fluxo de navegação natural.

Segundo a Nielsen Norman Group, especialista em usabilidade: “Abrir links em novas janelas e abas é disruptivo para os usuários a menos que seja esperado. Geralmente, é melhor evitar abrir links em novas janelas, mas se você precisar fazer isso, avise os usuários de antemão.”

Implementação prática em diferentes contextos

Vamos ver como implementar links externos em diferentes contextos de desenvolvimento web:

HTML puro

Visite o site

JavaScript

window.open(‘https://exemplo.com’, ‘_blank’, ‘noopener,noreferrer’);

React

Visite o site

WordPress (editor de blocos)

Ao adicionar um link no editor Gutenberg do WordPress, você pode marcar a opção “Abrir em nova aba” nas configurações do link.

Indicadores visuais para links externos

Para melhorar a experiência do usuário, é recomendável adicionar indicadores visuais que mostrem quando um link abrirá em nova aba. Isso pode ser feito com CSS:

a[target=”_blank”]::after { content: ” ↗”; }

Este código adiciona uma pequena seta após qualquer link que tenha o atributo target=”_blank”, sinalizando visualmente que o link abrirá em uma nova aba.

Testando seus links externos

Para verificar se seus links externos estão funcionando corretamente:

• Teste manualmente clicando em cada link externo do seu site
• Use ferramentas de validação HTML como o W3C Markup Validation Service
• Verifique com ferramentas de SEO se todos os links externos têm os atributos corretos
• Teste em diferentes navegadores para garantir compatibilidade

De acordo com o Web Content Accessibility Guidelines (WCAG): “Se uma nova janela ou aba é aberta, o usuário deve ser avisado com antecedência. Isso ajuda pessoas com deficiências cognitivas a entender as mudanças no contexto de navegação.”

Considerações de acessibilidade

Do ponto de vista da acessibilidade, é importante informar os usuários quando um link abrirá em uma nova aba. Isso pode ser feito de várias maneiras:

• Adicionar “(abre em nova aba)” ao texto do link
• Usar aria-label para fornecer contexto adicional para leitores de tela
• Adicionar ícones visuais com texto alternativo apropriado

Exemplo com aria-label:

Visite o site

Conclusão e melhores práticas

Para implementar links externos que abrem em novas abas de forma eficaz:

• Use sempre target=”_blank” para links externos
• Inclua rel=”noopener noreferrer” por segurança
• Adicione indicadores visuais para melhorar a experiência do usuário
• Considere a acessibilidade informando que o link abrirá em nova aba
• Teste em diferentes navegadores e dispositivos
• Use com moderação – nem todos os links precisam abrir em novas abas

Implementando estas práticas, você criará uma experiência de navegação mais intuitiva e segura para os usuários do seu site, permitindo que eles explorem recursos externos sem perder o contexto da sua página original.

Você já verificou como estão configurados os links externos no seu site atual? Existe alguma funcionalidade específica que você gostaria de implementar com esses links?