Os links on-line estabelecem a base para a interatividade on-line simples, seja enviando os usuários para páginas da web, documentos para download ou outros aplicativos.

E o melhor é poder criar links clicáveis em muitos aplicativos, inclusive em sistemas de gerenciamento de conteúdo, criadores de sites, processadores de texto e clientes de e-mail.

Este guia ilustra tudo o que você precisa saber sobre como tornar um link clicável, além de explicar os conceitos básicos por trás de um link e a terminologia que você pode encontrar ao criar um.

Noções básicas de hiperlink

Há vários termos para uma parte do conteúdo, como um texto ou uma imagem, que oferece a possibilidade de clicar ou a opção interativa de colocar o cursor sobre o conteúdo e navegar para outro lugar.

Alguns desses termos incluem:

  • Link
  • Hiperlink
  • Link clicável

Tecnicamente, todos eles têm suas próprias definições, mas hoje em dia são usados de forma intercambiável.

A capacidade de um usuário de interagir com conteúdo on-line depende desses hiperlinks, nos quais os usuários podem rolar sobre uma parte de texto, uma imagem ou um botão e clicar nele, enviando-o para outra parte do conteúdo (como uma página web externa) ou para executar uma ação (como ligar para um número de telefone do seu smartphone).

Uma versão simples codificada em HTML de um hiperlink é semelhante a esta:

<a href="https://example.com/">the hyperlink text</a>

Mas ela se torna mais complexa quando se levam em conta itens opcionais como alvos e elementos nofollow:

 <a href="https://example.com/" target="_blank" rel="noreferrer noopener">the hyperlink text</a>

Aqui estão os elementos que compõem um hiperlink:

  1. O conteúdo
  2. A URL ou permalink
  3. O alvo
  4. Nofollow, noreferrer e noopener
Os elementos de um hiperlink.
Os elementos de um hiperlink.

Continue lendo para saber mais sobre cada um desses elementos e como eles funcionam.

O conteúdo

Você pode criar links clicáveis com dois tipos de conteúdo:

  1. Texto
  2. Gráficos

Isso significa que, desde que o aplicativo que você está usando suporte hiperlinks, você pode encontrar qualquer linha de texto escrito ou imagem em seu conteúdo e transformá-la em um link clicável.

Texto com hiperlink

O texto é uma das opções de conteúdo quando você cria links clicáveis.

Se estiver usando um editor como o WordPress, você pode destacar o texto que quiser na tela do editor e selecionar o botão Link.

Como adicionar um link no WordPress.
Como adicionar um link no WordPress.

Isso renderiza um link no frontend, geralmente com texto colorido e sublinhado.

Um link clicável no frontend.
Um link clicável no frontend.

Um hiperlink de texto às vezes muda quando o usuário passa o mouse sobre ele, geralmente mudando de cor ou ocultando o sublinhado para especificar que se trata de um link clicável.

Além disso, ao passar o mouse sobre um link de texto, os navegadores geralmente mostram uma visualização da URL vinculada para que você possa ver aonde ele leva.

Uma visualização da URL de destino.
Uma visualização da URL de destino.

Imagens com hiperlink

Muitos programas, inclusive o WordPress, permitem gerar hiperlinks usando mídia on-line, como imagens.

Para isso, você deve selecionar uma imagem no backend (em vez de texto) e adicionar a URL desejada por meio da função Link.

Como vincular uma imagem.
Como vincular uma imagem.

Após a publicação, a seta padrão do cursor se transforma em um cursor de mão quando se passa o mouse sobre a imagem, e os visitantes verão o navegador apresentar uma visualização da URL vinculada.

Uma visualização da URL de destino.
Uma visualização da URL de destino.

Seja um link de imagem ou de texto, ao clicar nele você ativará uma ação, como enviar o usuário para uma URL diferente.

Uma landing page externa.
Uma landing page externa.

Como é a aparência da codificação

O conteúdo de texto ou imagem em um hiperlink é representado por “The Link Text” no exemplo abaixo:

<a href="https://example.com/" target="_blank" rel="noreferrer noopener">The Link Text</a>

No entanto, aprender a criar um link clicável significa que você substituirá esse texto pelo seu próprio conteúdo.

Para um link de texto, o texto clicável vai logo antes do colchete de fechamento </a>.

O texto do link.
O texto do link.

Os links de imagem são um pouco diferentes, pois devem incluir a URL da imagem (o melhor é fazer o upload dela para o banco de dados de mídia do seu site).

Essa URL de mídia fica entre as aspas na seção img src=””.

image URL highlighted
A URL de origem da imagem.

Há outros elementos a ser adicionados aos links de imagem, como:

  • Uma tag alt (alt=””): Texto que descreve a imagem para rastreadores de mecanismos de pesquisa e usuários com deficiência visual.
  • Uma classe (class=””): Um nome codificado para usar a imagem em outro local do código ou nos arquivos do site.

A URL

Como parte de um hiperlink, a URL serve como destino ou ação que ocorre quando alguém clica no link.

Uma URL em um link clicável.
Uma URL em um link clicável.

Mas nem todas as URLs funcionam como URLs de páginas da web. Você observará que alguns hiperlinks têm a funcionalidade “clique para ligar”, permitindo que os usuários liguem para um número de telefone diretamente de seus smartphones com um clique.

Um exemplo de funcionalidade de "clique para ligar".
Um exemplo de funcionalidade de “clique para ligar”.

Outra opção é revelar um mapa que abre o aplicativo de mapa do usuário em seu telefone.

Um link que leva a um aplicativo de mapa.
Um link que leva a um aplicativo de mapa.

Como fica a codificação

As URLs em links clicáveis são colocadas entre as aspas na parte <a href=”” do hiperlink.

Por exemplo, a parte https://www.example.com do seguinte código de hiperlink é a URL:

<a href="https://www.example.com" target="_blank" rel="noreferrer noopener">View the entire menu.</a> 
A URL apresentada em um código HTML de hiperlink.
A URL apresentada em um código HTML de hiperlink.

Algumas URLs levam a documentos que podem ser baixados, ao passo que outras exigem codificação especial. Por exemplo, um link “clique para ligar” exige que você coloque tel: e um número de telefone entre as aspas href=””.

Exemplo de um link "tel:" clique para ligar.
Exemplo de um link “tel:” clique para ligar.

Janela de destino

A janela de destino é uma parte opcional de um hiperlink. Ela especifica se o conteúdo será aberto na mesma aba do navegador ou abrirá uma nova.

No WordPress e em muitos outros aplicativos, você pode adicionar uma janela de destino sem tocar em nenhum código usando o editor visual.

Basta desativar a opção Open in a new tab (Abrir em nova aba) se você quiser que o link seja aberto na mesma aba atualmente visualizada pelo usuário.

Opção Abrir em nova aba desativada.
Opção Abrir em nova aba desativada.

Ou você pode ativar a opção “Open in new tab”, que adiciona automaticamente um atributo _blank à codificação do hiperlink e abre a URL em uma nova aba quando clicado.

Opção Abrir em nova aba ativada.
Opção Abrir em nova aba ativada.

Como fica a codificação

Essas opções são acionadas quando você adiciona e edita o elemento target=”” em um hiperlink.

Embora o atributo target tenha vários valores, como _blank, _parent, _self e _top, geralmente usamos apenas o valor _blank.

Um hiperlink sem o alvo _blank tem a seguinte aparência:

Link sem o target _blank.
Link sem o target _blank.

Você perceberá que não é diferente de um hiperlink comum. Isso ocorre porque os hiperlinks, por padrão, não abrem em uma nova aba. Portanto, você não precisa fazer nada no link, a menos que prefira que ele seja aberto em uma aba separada do navegador.

Um hiperlink com o destino _blank, que aciona a URL para abrir em uma aba separada, tem a seguinte aparência:

<a href="https://www.example.com" target="_blank">View the entire menu.</a>
Link clicável com um target _blank.
Link clicável com um target _blank.

nofollow, noreferrer e noopener

Você também pode adicionar outros elementos a um link clicável, a maioria dos quais inclui segurança ou camuflagem dos mecanismos de pesquisa:

  • nofollow: Um atributo que impede que o “SEO link juice” vá para o site vinculado. Isso ajuda a proteger seu site e pode ocultar o link dos mecanismos de pesquisa.
  • noopener: Esse é um atributo HTML que é adicionado automaticamente aos links do WordPress marcados como Open in a new tab. Ele é combinado com o noreferrer para minimizar determinados problemas de segurança ao abrir links em novas abas.
  • noreferrer: geralmente emparelhado com o noopener, o atributo noreferrer impede que todas as informações de referência sejam passadas para o site de destino, adicionando segurança extra e possivelmente bloqueando dados de sites de rastreamento e sites de ganhos de afiliados.

Você não pode identificar nenhum desses atributos de link observando um link no site ativo. Em vez disso, você deve acessar o código HTML.

Como é a aparência da codificação

Todos esses atributos de link ficam entre as aspas na parte rel=”” do link clicável.

É possível que você tenha todos eles incluídos em um único link.

Link com noreferrer, noopener e nofollow incluídos.
Link com noreferrer, noopener e nofollow incluídos.

Talvez você veja também alguns hiperlinks que incluem apenas um atributo noreferrer noopener, ou um nofollow sem os outros dois. Tudo depende do que o criador do link deseja fazer.

Razões pelas quais você pode querer tornar um link clicável

Ao aprender como tornar um link clicável, é importante entender todos os motivos para criar hiperlinks. Dessa forma, você estará ciente dos recursos e poderá tirar proveito deles no futuro.

Aqui estão os principais motivos pelos quais você pode querer tornar um link clicável:

  1. Hiperlinks internos/externos gerais para URLs: Você pode criar links de texto que levem para fora do seu site (por exemplo, para citar fontes ou fortalecer um argumento com um estudo de terceiros) ou para outras páginas do seu site (particularmente útil para direcionar os leitores para conteúdo relevante e mantê-los no site por um período mais longo).
  2. Vinculação de imagens: Você pode adicionar hiperlinks a URLs, arquivos de mídia ou páginas de anexo a qualquer imagem no WordPress e em muitos outros criadores de sites.
  3. Botões de links: Os botões CSS oferecem opções para adicionar hiperlinks, acrescentando ao seu link clicável uma experiência visual mais atraente que o texto simples.
  4. Números de telefone: Geralmente chamado de recurso “clique para ligar”, os hiperlinks que levam a números de telefone abrem aplicativos com recursos de chamada, como o próprio aplicativo de telefone no seu dispositivo ou o Skype.
  5. Endereços: O hiperlink para coordenadas específicas no Google ou no Apple Maps significa que o usuário que clicar no link terá essas informações automaticamente inseridas no aplicativo de GPS ou mapa para navegação.
  6. Endereços de e-mail: Isso é semelhante aos links “clique para ligar”, mas com endereços de e-mail. Ele aciona o aplicativo de e-mail em um telefone ou computador, juntamente com um novo rascunho de e-mail com um endereço de e-mail específico adicionado no campo Para.
  7. Criar links de âncora: Você pode criar um link para o conteúdo da mesma página usando links de âncora; eles são muito populares para criar um índice no início de uma longa publicação de blog. Às vezes eles são chamados de “hiperlinks de marcadores”
  8. Oferecer um arquivo para download: O WordPress — como outros criadores de sites — oferece ferramentas para carregar arquivos SVG, PDFs, arquivos HTML e muito mais; você pode até carregar itens em massa. Depois disso, você pode criar hiperlinks em artigos/páginas para que os usuários façam download dos arquivos diretamente em seus dispositivos.

Agora que já abordamos os tipos de hiperlinks e os motivos pelos quais você pode querer gerar um, continue lendo para saber tudo sobre como fazer isso.

Como tornar um link clicável

O método que você escolhe para criar um link depende da sua experiência. Você pode optar por um método visual mais fácil ou considerar o uso de código HTML.

Há quatro métodos principais para tornar um link clicável:

  1. Usando o editor clássico do WordPress
  2. Usando o editor de blocos do WordPress (Gutenberg)
  3. Usando HTML
  4. Usando qualquer interface gráfica de usuário (GUI)

Lembre-se de que todos esses métodos funcionam de forma semelhante para artigos e páginas do WordPress. Esses guias (especialmente o Método 4) também são úteis para outros aplicativos/criadores de sites, mas algumas terminologias e funcionalidades podem variar.

Método 1: Usando o editor clássico do WordPress

Se você estiver trabalhando com o editor clássico do WordPress, a maneira mais fácil de criar um link clicável em um artigo ou página é por meio da aba Visual do editor.

Para fazer isso, vá para a seção Posts ou Pages do painel do WordPress e selecione uma página ou artigo individual que você gostaria de editar, usando a aba Visual.

Etapa 1: Destaque o texto que você deseja tornar clicável

Para um link de texto, é melhor que você já tenha digitado o texto no editor Visual. Depois disso, use o cursor para destacar a sequência de texto.

Destaque um trecho de texto.
Destaque um trecho de texto.

Se você estiver transformando uma imagem em um link clicável:

Selecione a imagem para que você possa ver uma barra de ferramentas do editor e um contorno ao redor da imagem.

Selecione a imagem.
Selecione a imagem.

Etapa 2: Clique no botão Insert/Edit link

Com o texto ainda destacado, role sobre o botão Insert/Edit link na barra de ferramentas do editor visual. O ícone do botão se parece com um elo de corrente.

Clique no botão Insert/Edit link.
Clique no botão Insert/Edit link.

Se você estiver transformando uma imagem em um link clicável:

Com a imagem ainda selecionada, clique no botão Insert/Edit link (aquele que se parece com um elo de corrente).

Escolha o botão Edit.
Escolha o botão Edit.

Etapa 3: Cole uma URL

Isso revela um campo de URL vazio. Copie (Command + C ou Ctrl + C) a URL do link desejado para a área de transferência do dispositivo. Esse link pode ser uma URL externa que você encontrou em outro lugar na internet ou uma URL do seu próprio site.

Depois de copiado, cole (Command + V ou Ctrl + V) no campo.

Colar uma URL.
Colar uma URL.

Se você estiver transformando uma imagem em um link clicável:

Cole a URL desejada no campo revelado e, em seguida, clique no botão Apply para ativar o link.

Insira o link e clique no botão Apply.
Insira o link e clique no botão Apply.

Etapa 4: Aplicar o link

Clique no botão Apply para ativar o link e tornar o texto clicável.

Clique no botão Apply.
Clique no botão Apply.

Agora você deve ver a parte do hiperlink do seu texto sublinhada e, possivelmente, em uma cor diferente.

O link resultante.
O link resultante.

Se você clicar no hiperlink no editor, ele revelará um link ativo para teste, juntamente com ferramentas de edição, caso você queira alterar o hiperlink.

Opções adicionais

Abordaremos links clicáveis mais avançados nas próximas seções, mas vale a pena observar que cada link que você cria no editor clássico do WordPress tem um botão Link Options para configurações adicionais.

Clique no botão Link options.
Clique no botão Link options.

Aqui, você pode:

  • Ajustar a URL
  • Alterar o texto do link
  • Abrir o link em uma nova aba
  • Pesquisar e vincular ao conteúdo existente em seu site
Mais opções.
Mais opções.

Se você estiver transformando uma imagem em um link clicável:

O editor clássico do WordPress oferece uma maneira secundária de tornar as imagens clicáveis. Para isso, você pode selecionar a imagem e escolher o botão Edit (semelhante a um lápis) na barra de ferramentas pop-up.

Role até o campo Link To, que permite que você crie um link para uma Custom URL (URL personalizada). Basta você colar a URL desejada no campo abaixo e clicar em Update (Atualizar).

Localize e edite o campo Link To.
Localize e edite o campo Link To.

Você também pode selecionar o menu suspenso Link To para criar um hiperlink para:

  • Arquivos de mídia
  • Páginas de anexos
  • URLs personalizadas
  • Nenhum
Escolha diferentes opções de links.
Escolha diferentes opções de links.

Método 2: Usando o editor de blocos do WordPress (Gutenberg)

Os hiperlinks funcionam da mesma forma em artigos e páginas no editor de blocos do WordPress.

Para começar, vá para a seção Posts ou Pages do seu painel do WordPress. Selecione um artigo ou página individual que você gostaria de editar e, em seguida, siga as etapas abaixo.

Etapa 1: Destaque algum texto

Digite algum texto no editor. Com o cursor, destaque a parte do texto que você deseja tornar clicável. Na barra de ferramentas pop-up, clique no botão Link.

Destaque o texto e clique no botão Link.
Destaque o texto e clique no botão Link.

Se você estiver transformando uma imagem em um link clicável:

Para tornar uma imagem clicável no editor de blocos do WordPress, você precisa adicionar uma imagem ao editor.

Para isso, clique no botão Add Block (Adicionar bloco) e selecione o bloco Image. Carregue a imagem que você deseja vincular.

Clique na imagem para que ela seja destacada/selecionada e, em seguida, escolha o botão Insert link na janela pop-up da barra de ferramentas.

Selecione a imagem e insira o link.
Selecione a imagem e insira o link.

Etapa 2: Cole a URL e envie o link

Você verá uma janela pop-up com um campo em branco. Cole a URL que deseja vincular e, em seguida, clique em Enter no teclado ou no botão Submit para ativar o link clicável.

Insira uma URL e clique em Submit.
Insira uma URL e clique em Submit.

Como resultado, o texto com hiperlink será exibido em uma cor diferente, e você poderá clicar no link para ver uma prévia do conteúdo e adicionar configurações de link mais avançadas.

Visualizar uma prévia e configurações de link mais avançadas.
Visualizar uma prévia e configurações de link mais avançadas.

Se você estiver transformando uma imagem em um link clicável:

Há opções para criar hiperlinks para arquivos de mídia e páginas de anexos, se você desejar.

Considere os links de arquivos de mídia e páginas de anexos.
Considere os links de arquivos de mídia e páginas de anexos.

Caso contrário, cole uma URL no campo de link vazio. Clique no botão Apply para ativar o link. Após a publicação, qualquer pessoa que clicar na imagem será direcionada para o link que você especificou.

Clique no botão Apply após inserir uma URL.
Clique no botão Apply após inserir uma URL.

Para obter mais opções, clique no botão seta pra baixo (v) para:

  • Abrir o link em uma nova aba
  • Adicionar um link rel
  • Adicionar uma classe CSS ao link
Clique no botão de seta para baixo para obter mais configurações.
Clique no botão de seta para baixo para obter mais configurações.

Opções adicionais

Vamos nos aprofundar mais nas estruturas avançadas de hiperlink nas seções a seguir, mas você deve saber que um botão Edit está disponível se você clicar com o cursor no link recém-criado.

Clique no botão Edit.
Clique no botão Edit.

Na página Edit, você verá campos para:

  • Alterar o texto do link
  • Modificar a URL
  • Abrir o link em uma nova aba
A página Edit.
A página Edit.

Outros links clicáveis que você pode criar no editor de blocos

O editor de blocos do WordPress amplia as opções usuais de links disponíveis. De fato, dezenas de blocos incorporados permitem algum tipo de estrutura de link clicável, incluindo:

  • Botões: Uma maneira elegante de vincular conteúdo em comparação com links de texto simples.
  • Arquivos: Carregue arquivos rapidamente e inclua um botão para os usuários clicarem e baixarem.
  • Ícones sociais: Insira ícones sociais com links clicáveis.
  • Navegação: Coloque botões de navegação em qualquer lugar do seu site com o uso de links clicáveis.
  • Leia mais: Pode ser usado para encurtar seu conteúdo e fornecer um link para a versão mais extensa.
  • Login/logout: Adicione um link rápido para que os usuários façam login no seu site.
  • Próximo artigo: Adicione um link/botão clicável para o próximo artigo do blog em seu site.
  • Artigo anterior: Adicione um link/botão clicável que leva ao artigo anterior do blog em seu site.
Um botão é mais um estilo de link clicável disponível no editor de blocos do WordPress.
Um botão é mais um estilo de link clicável disponível no editor de blocos do WordPress.

Método 3: Usando HTML

Para tornar um link clicável com HTML, você deve usar as mesmas funções, independentemente da interface do seu editor.

Você pode editar HTML com:

O painel de texto no editor clássico do WordPress

O painel de texto do editor clássico do WordPress.
O painel de texto do editor clássico do WordPress.

O editor de código no editor de blocos do WordPress

O editor de código no editor de blocos do WordPress.
O editor de código no editor de blocos do WordPress.

Um editor de HTML/texto em seu dispositivo

Editores de texto como Atom, Sublime Text e Coda fornecem a interface necessária para escrever e editar HTML, especialmente para links clicáveis. Também é possível usar editores markdown.

O editor de texto Atom.
O editor de texto Atom.

Após trabalhar com o editor de texto, você pode:

Depois que você encontrar um editor de texto e souber como fará o upload do HTML para o WordPress, siga as etapas abaixo para tornar um link clicável com HTML.

Este formato é usado para hiperlinks básicos em HTML:

<a href="https://www.example.com">Link Text</a>

Observações:

  1. Substitua “https://www.example.com” pelo URL que você deseja.
  2. Substitua “Link Text” pelo texto do link desejado.

Quando o link estiver pronto, você poderá publicar o artigo/página ou carregar o HTML no seu site. Você também pode obter uma prévia visual do link alternando para a aba Visual no WordPress.

Uma versão publicada desse link HTML mostra o link sublinhado e, às vezes, em uma cor diferente. Ao passar o mouse sobre o link, você verá o destino dele na parte inferior do navegador.

frontend post with link text underlined
Link no frontend com a visualização do navegador.

Método 4: Usar qualquer interface gráfica de usuário (GUI)

Embora não possamos abranger todas as GUIs imagináveis existentes, aprender como tornar um link clicável em outro editor além do WordPress ou HTML geralmente é semelhante ao que acabamos de abordar.

De modo geral, cada GUI pode usar um nome de botão ou ícone ligeiramente diferente para criar um hiperlink.

Seu processo geral deve ser o seguinte:

  1. Destaque o texto que você deseja vincular.
  2. Clique no ícone Link (pode ter um nome diferente) no editor.
  3. Cole a URL desejada.
  4. Clique no botão Adicionar link (ou com um nome semelhante).

Como exemplo básico, um construtor de lojas on-line como o Shopify permite que você crie um link clicável em qualquer página ou artigo, destacando o texto e clicando no botão Insert link.

Inserção de um link em uma GUI alternativa.
Inserção de um link em uma GUI alternativa.

Em seguida, você colaria a URL de destino e clicaria no botão Insert link.

Você cola a URL e clica em Insert link.
Você cola a URL e clica em Insert link.

Isso produz um link clicável.

Link clicável em outra GUI.
Link clicável em outra GUI.

Como fazer com que os links abram em uma nova aba

Como discutimos anteriormente, o WordPress e outras GUIs oferecem opções adicionais de personalização para links clicáveis, como forçar um link a abrir em uma aba diferente.

Como você pode fazer isso? Vamos dar uma olhada.

Abrir o link em uma nova aba usando o editor clássico do WordPress

Quando você tiver um link clicável no editor clássico do WordPress, selecione o botão Link Options (Opções de link).

Opções de link.
Opções de link.

Marque a caixa Open Link In A New Tab (Abrir o link em uma nova aba).

Em seguida clique no botão Update (Atualizar).

Abrir link em uma nova aba.
Abrir link em uma nova aba.

Abrir link em uma nova aba usando o editor de blocos do WordPress

Supondo que você já tenha adicionado um link no editor de blocos do WordPress, clicar no link abrirá uma visualização pop-up do conteúdo no destino.

O botão Edit fornece acesso a mais configurações (incluindo a opção Open In New Tab), mas é mais fácil ativar o botão Open In New Tab (Abrir em nova aba) na parte inferior da janela pop-up.

Opção Open In New Tab.
Opção Open In New Tab.

Abrir link em nova aba usando HTML

No editor de texto do WordPress, no editor de código do WordPress ou em um editor HTML geral, você pode usar o seguinte código para fazer com que o link clicável seja aberto em uma nova aba:

<a href="https://www.example.com" target="_blank" rel="noreferrer noopener">Link Text</a>
  1. Substitua “https://www.example.com” pela URL de destino que você deseja
  2. Substitua “Link Text” pelo texto que você deseja vincular.
  3. O atributo target=”_blank” é o segmento de código que realmente abre o link em uma nova aba. É a única parte que é realmente necessária para essa função simples.
  4. É altamente recomendável que você adicione os atributos e valores rel=”noreferrer noopener” para bloquear problemas comuns de segurança ao abrir links em novas abas. No entanto, é totalmente possível deixá-los de fora do código e ainda assim fazer com que o link seja aberto em uma nova aba.

Após a publicação, o link terá exatamente a mesma aparência, mas, quando clicado, a URL de destino será aberta em uma nova aba.

Um link que abre seu destino em uma nova aba.
Um link que abre seu destino em uma nova aba.

Como adicionar nofollow a um hiperlink

O valor HTML nofollow informa aos mecanismos de pesquisa que devem ignorar um link clicável e impede que o crédito do mecanismo de pesquisa (“link juice”) seja transferido para o site de destino. O principal objetivo do nofollow é reduzir os links de spam, mas os criadores de conteúdo o utilizam para links pagos, comentários, conteúdo gerado pelo usuário, incorporações ou sempre que você preferir não ser visto como endossante de um site para o qual criou um link.

O WordPress não tem uma maneira integrada de adicionar um link nofollow, mas você pode fazer isso acessando o HTML.

O código a seguir reflete um link básico com um valor nofollow:

<a href="https://www.example.com" rel="nofollow">The Link Text.</a>
Código de link HTML com nofollow.
Código de link HTML com nofollow.

O que você está vendo:

  1. Substitua o texto “https://www.example.com” pela URL de destino que você deseja.
  2. Substitua a parte “The Link Text” por qualquer texto de link que você desejar.
  3. Use o atributo e o valor rel=”nofollow” no HTML do link.

Quando publicado, ou na visualização Visual, um link nofollow não parece diferente de um hiperlink padrão; no entanto, a funcionalidade nofollow é salva no código de backend.

Um link nofollow não aparece de forma diferente no frontend.
Um link nofollow não aparece de forma diferente no frontend.

Como criar links para conteúdo existente

O link para conteúdo existente é um recurso exclusivo do WordPress, no qual você pode pesquisar artigos e páginas de blog criados anteriormente diretamente no editor do WordPress. Isso elimina a necessidade de você abrir as URLs em outra janela do navegador para copiá-las e colá-las em um link clicável.

Link para conteúdo existente no editor clássico do WordPress

Para criar um link, você deve destacar o texto desejado e clicar no botão Insert/Edit link (elo de corrente) no editor. Isso revela um campo pop-up no qual você pode clicar no botão Link options (ícone de engrenagem).

Vá até o botão Link options.
Vá até o botão Link options.
  1. Vá para a seção chamada “Or link to existing content” (“Ou vincule a conteúdo existente.”)
  2. Digite uma palavra-chave na barra de pesquisa e, em seguida, escolha uma página ou publicação existente nos resultados.
  3. Observe como o link para o conteúdo existente é automaticamente colocado no campo URL.

Certifique-se de clicar no botão Add Link quando terminar.

O processo de localização de conteúdo existente.
O processo de localização de conteúdo existente.

Isso produz um link imediato para outro conteúdo (também conhecido como link interno) no editor.

A visualização resultante de um link interno.
A visualização resultante de um link interno.

Link para conteúdo existente no editor de blocos do WordPress

Destaque o texto/imagem que você deseja vincular e, em seguida, clique no botão Link na barra de ferramentas pop-up.

Clique no botão Link.
Clique no botão Link.

O campo fornecido tem duas funções: você pode colar uma URL ou usá-lo como uma barra de pesquisa. Portanto, digite qualquer palavra-chave relacionada a algum conteúdo que você já tenha para revelar os resultados relacionados.

Quando você ver a página ou o artigo que deseja, clique nele.

Pesquisando conteúdo anterior.
Pesquisando conteúdo anterior.

Isso cria automaticamente um link para o conteúdo existente no editor de blocos do WordPress.

Como criar links clicáveis para telefone, SMS e e-mail

Existem algumas maneiras de adicionar ações especiais a links clicáveis, trocando a estrutura de URL padrão e criando um link para algo diferente, como:

  • Um número de telefone que abre o aplicativo Telefone.
  • Um número de telefone que abre o aplicativo de mensagens de texto.
  • Um endereço de e-mail que abre automaticamente o aplicativo de e-mail do usuário.

Como criar um link telefônico clicável

Um link de telefone, ou “clique para ligar”, adiciona automaticamente um número de telefone específico ao aplicativo de telefone do usuário, ou até mesmo a um aplicativo compatível com números de telefone, como o Skype.

Em vez de usar uma URL, você deve inserir o código tel: no HTML, seguido de um número de telefone, como este:

<a href="tel:555-555-5555">Click To Call</a>

Observações:

  1. Substitua o número de telefone pelo número para o qual você deseja que os usuários liguem.
  2. Substitua o texto “Click To Call” pelo texto do link que você deseja que seja exibido.
Um link tel: no editor visual.
Um link tel: no editor visual.

Em editores visuais, como o editor clássico do WordPress ou o editor de blocos, basta digitar tel:555-555-5555 (com o número de telefone desejado) no campo URL de um link. Clique em Enter para que ele gere automaticamente o link do telefone para você.

Quando alguém clica nesse link, é enviado diretamente para o aplicativo mais relevante (o aplicativo de telefone em um smartphone) ou vê uma solicitação para abrir um aplicativo como o Skype.

O link tel: abre no Skype ou em outros aplicativos de telefone.
O link tel: abre no Skype ou em outros aplicativos de telefone.

Como criar um link de SMS clicável

Os links de SMS clicáveis funcionam de forma muito semelhante aos links de telefone, mas optam por abrir automaticamente aplicativos de mensagens em vez de aplicativos de chamadas.

Para adicionar um link de SMS, use sms:555-555-5555 em vez de uma URL.

<a href="sms:555-555-5555">Click To Text</a>

Observações:

  1. Substitua “555-555-5555” por um número de telefone diferente.
  2. Substitua “Click To Text” pelo texto que você quiser para o link.

Os editores clássico e de blocos do WordPress suportam links de SMS quando você coloca o valor sms:555-555-5555 no campo URL para links.

Como prometido, os usuários veem aplicativos de mensagens quando clicam nesses tipos de links.

Um link sms: abre no aplicativo de mensagens mais relevante.
Um link sms: abre no aplicativo de mensagens mais relevante.

Como criar um link de e-mail clicável

Quando clicados, os hiperlinks de e-mail solicitam automaticamente que o dispositivo do usuário abra o aplicativo de e-mail mais relevante, juntamente com uma seção Compor que vai para um endereço de e-mail específico.

Para isso, adicione o código mailto:, seguido de um endereço de e-mail onde você normalmente colocaria uma URL de destino.

<a href="mailto:[email protected]">Click To Email</a>

Observações:

  1. Substitua o endereço de e-mail “[email protected]” pelo endereço de e-mail de destino que você deseja.
  2. Substitua o texto “Click To Email” pelo texto do link que você deseja que seja exibido.

Se você estiver usando o editor clássico ou de blocos do WordPress, basta digitar o valor mailto:[email protected] no campo URL ao criar um link.

Depois que você publicar o link, os usuários que clicarem nele serão redirecionados para o aplicativo de e-mail, com o endereço de e-mail que você especificou incluído no campo To:.

Os links mailto: abrem aplicativos de e-mail com o endereço de e-mail especificado incluído.
Os links mailto: abrem aplicativos de e-mail com o endereço de e-mail especificado incluído.

Resumo

A adição de links clicáveis (também conhecidos como hiperlinks ou apenas links) pode melhorar a interatividade em seu site, levar as pessoas a mais conteúdo e fazer referência a informações importantes de outros lugares na Internet. Por isso, aprender a criar um link clicável é uma das lições fundamentais do design de sites e da criação de conteúdo.

Depois de ler este artigo, você deverá ser capaz de identificar a aparência de um link clicável e saber exatamente como criar um, seja para adicionar um link a textos ou imagens. Também é bom saber que há vários métodos para tornar um link clicável, como o editor clássico e o editor de blocos do WordPress, HTML ou qualquer interface gráfica de usuário disponível.

E, é claro, incentivamos você a explorar opções mais avançadas de links clicáveis, como links para números de telefone, endereços de e-mail e aqueles com tags nofollow.

Se você ainda tiver alguma dúvida sobre como tornar um link clicável, compartilhe suas perguntas e preocupações nos comentários abaixo.

Jeremy Holcombe Kinsta

Content & Marketing Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems ;).