Como abrir links externos em uma nova guia no Ghost

Na rotina com a Publiso, links externos são fundamentais. Nesse artigo ensino como abrir os links em nova guia.

by Mateus Ribeiro

Como abrir links externos em uma nova guia no Ghost
Como abrir links externos em nova guia

Share

💡
Links Externos são páginas que estão em outros sites ou blogs. Ou seja, ao clicar nesses links, o leitor é levado para outra página que não pertence a você.

Quem utiliza o Ghost como padrão percebe que links externos não são abertos em novas guias, pelo contrário, ao clicar nesses links, o leitor sai do seu blog e adentra o outro conteúdo.

Para fins de análise, o leitor não fica tempo suficiente no seu blog, além de não gerar engajamento. Para contornar esse problema, muitos autores colocam os links no final do artigo, o que pode ser um martírio para o leitor, principalmente se o conteúdo for muito extenso.

Nesse tutorial vou explicar de forma simples como você pode garantir que todos os links externos no seu blog abram em uma nova guia, utilizando JavaScript. 😎

Como injetar código JavaScript

Esse método consiste em inserir um código JavaScript no rodapé (Site footer) do seu site. Ele será responsável por abrir todos os links externos em outra guia.

⚠️
Atenção, esse script funciona apenas para links externos. Links internos continuarão a abrir na mesma guia.

Passo 1: Acesso o painel administrativo do Ghost

Faça login no painel de administração do Ghost.

O link de acesso para esse painel costuma seguir essa lógica:

https://www.seublog.com.br/ghost

Passo 2: Navegue até a injeção de código

Após o login, você verá a área de administração. No rodapé esquerdo da página procure pelo ícone de Configurações (engrenagem) e clique, em seguida procure por "Code injection".

Captura de tela do painel de configurações do Ghost

Passo 3: Adicione o código JavaScript

Na seção "Code injection", selecione a opção "Site footer". Você deverá copiar o código abaixo e colar neste campo.

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var links = document.querySelectorAll('a');
    links.forEach(function(link) {
      if (link.hostname != window.location.hostname) {
        link.target = '_blank';
      }
    });
  });
</script>

Código JavaScript

0:00
/0:09

Inserir código JavaScript em Sitefooter

Este código identificar links externos e define o atributo "target" como "_blank" garantindo que eles abram em uma nova guia.

Passo 4: Salve as configurações e teste

Depois de adicionar o código, salve as alterações. O Ghost aplicará as novas configurações e seus links externos serão abertos em uma nova guia.

Conclusão

Esse método é o mais acessível para pessoas com menor experiência com código. Porém, usuários avançados poderão alterar o próprio tema Ghost, que permitirá um maior controle e customização, adequadas as necessidades específicas.

Em geral, essa solução está adequada todos os públicos. Espero ter auxiliado.