Como abrir links externos em nova janela automaticamente

Aviso importante!

Eu sei que você não quer ver propagandas, porém o conteúdo gratuito só está aqui graças a publicidade. Considere desativar o AdBlock para esse site.

Quando inserimos links externos em nossos posts para outros sites ou artigos específicos, (quase) sempre colocamos que tal link é para ser aberto em uma nova janela/guia. Mas as vezes falhamos e esquecemos desse detalhe, fazendo com que o visitante que tanto lutamos para conseguir vá embora de nossa página.

Já vi muitas dicas para contornar tal situação, algumas utilizando funções em PHP que podem ser aplicadas para WordPress especificamente, outras utilizando Javascritp, e também ví pessoas utilizarem plugins imensos para essa pequena tarefa, tornando o site mais pesado e vagaroso no acesso.

Para fugir de todas estas receitas prontas, eu criei minha própria maneira de fazer TODOS os links externos serem abertos em novas abas automaticamente utilizando jQuery para isso. Montei este exemplo com base em um livro de jQuery e também fazendo alguns testes, e o resultado final é um código simples e que pode ser usado em qualquer site sem que seja feita qualquer mudança.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
<script>
jQuery(document).ready(function($){
    $('a').not('[href*="'+document.domain+'"]').attr('target', '_blank');
    $('a').not('[href*="'+document.domain+'"]').attr('rel', 'external nofollow');
});
</script>

Explicando o código

A primeira linha carrega o jQuery através da CDN do Google. Se você já estiver carregando o jQuery em sua página, esta linha pode ser removida.

Na quarta linha estamos definindo que todos os links que não contiverem o nome de nosso domínio na URL recebam o atributo TARGET com o valor _BLANK para serem abertos em uma nova guia/janela.

E por sua vez a quinta linha (que é opcional) adiciona o atributo REL com os valores EXTERNAL e NOFOLLOW indicando que o link é externo e não deve ser seguido pelos motores de busca que visitarem sua página.

Este é um exemplo simples, leve e funcional para abrir links em janelas separadas, sendo que você pode alterá-lo ou melhorá-lo conforme sua necessidade.

Sobre o autor

Ricardo Bernardi

Sou técnico em hardware e desenvolvedor web, e sobre estes dois assuntos comecei a compartilhar aulas e artigos, tornando-me blogueiro em 2008. Em 2010 esse hobby virou profissão, e desde então tenho buscado melhorar e profissionalizar cada vez mais os projetos que mantenho na web.

Comentários

Atualmente temos 3 comentários para este post. Participe você também, clique aqui e comente sobre o assunto.

  • Bruno Duarte comentou em

    Olá Ricardo! Tenho duas perguntas. Analisando este seu código e realmente vi que ele funciona direitinho e é bem simples. Mais e no caso se for passar um alguns valores como parâmetro o que eu faço? E uma segunda pergunta. O que significa esse "$" dentro da "function" na declaração do documento jQuery? Ex: jQuery(document).ready(function($){}); Pergunto isso por que eu sempre coloco vazio (function()) e vi desta forma fiquei curioso.

    Responder

Deixe seu comentário