{"id":59636,"date":"2023-10-21T10:53:37","date_gmt":"2023-10-21T13:53:37","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=59636&#038;preview=true&#038;preview_id=59636"},"modified":"2023-10-24T03:07:43","modified_gmt":"2023-10-24T06:07:43","slug":"tornar-link-clicavel","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/tornar-link-clicavel\/","title":{"rendered":"Como Tornar um Link Clic\u00e1vel"},"content":{"rendered":"<p>Os links on-line estabelecem a base para a interatividade on-line simples, seja enviando os usu\u00e1rios para p\u00e1ginas da web, <a href=\"https:\/\/kinsta.com\/pt\/blog\/gerenciador-downloads-wordpress\/\">documentos para download<\/a> ou outros aplicativos.<\/p>\n<p>E o melhor \u00e9 poder criar links clic\u00e1veis em muitos aplicativos, inclusive em <a href=\"https:\/\/kinsta.com\/pt\/blog\/sistema-de-gerenciamento-de-conteudo\/\">sistemas de gerenciamento de conte\u00fado<\/a>, <a href=\"https:\/\/kinsta.com\/pt\/blog\/software-de-design-de-sites\/\">criadores de sites<\/a>, processadores de texto e <a href=\"https:\/\/kinsta.com\/pt\/blog\/provedores-de-email-seguros\/\">clientes de e-mail<\/a>.<\/p>\n<p>Este guia ilustra tudo o que voc\u00ea precisa saber sobre como tornar um link clic\u00e1vel, al\u00e9m de explicar os conceitos b\u00e1sicos por tr\u00e1s de um link e a terminologia que voc\u00ea pode encontrar ao criar um.<br \/>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>No\u00e7\u00f5es b\u00e1sicas de hiperlink<\/h2>\n<p>H\u00e1 v\u00e1rios termos para uma parte do conte\u00fado, como um texto ou uma imagem, que oferece a possibilidade de clicar ou a op\u00e7\u00e3o interativa de colocar o cursor sobre o conte\u00fado e navegar para outro lugar.<\/p>\n<p>Alguns desses termos incluem:<\/p>\n<ul>\n<li>Link<\/li>\n<li>Hiperlink<\/li>\n<li>Link clic\u00e1vel<\/li>\n<\/ul>\n\n<p>Tecnicamente, todos eles t\u00eam suas pr\u00f3prias defini\u00e7\u00f5es, mas hoje em dia s\u00e3o usados de forma intercambi\u00e1vel.<\/p>\n<p>A capacidade de um usu\u00e1rio de interagir com conte\u00fado on-line depende desses hiperlinks, nos quais os usu\u00e1rios podem rolar sobre uma parte de texto, uma imagem ou um bot\u00e3o e clicar nele, enviando-o para outra parte do conte\u00fado (como uma p\u00e1gina web externa) ou para executar uma a\u00e7\u00e3o (como ligar para um n\u00famero de telefone do seu smartphone).<\/p>\n<p>Uma <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-html\/\">vers\u00e3o simples codificada em HTML<\/a> de um hiperlink \u00e9 semelhante a esta:<\/p>\n<pre><code class=\"language-html\">&lt;a href=\"https:\/\/example.com\/\"&gt;the hyperlink text&lt;\/a&gt;<\/code><\/pre>\n<p>Mas ela se torna mais complexa quando se levam em conta itens opcionais como alvos e elementos nofollow:<\/p>\n<pre><code class=\"language-html\"> &lt;a href=\"https:\/\/example.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"&gt;the hyperlink text&lt;\/a&gt;<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Para criar um link clic\u00e1vel, voc\u00ea deve substituir &#8220;https:\/\/example.com\/&#8221; e &#8220;o texto do hiperlink&#8221; do exemplo acima por suas pr\u00f3prias informa\u00e7\u00f5es.<\/p>\n<\/aside>\n\n<p>Aqui est\u00e3o os elementos que comp\u00f5em um hiperlink:<\/p>\n<ol>\n<li>O conte\u00fado<\/li>\n<li>A <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-uma-url\/\">URL<\/a> ou <a href=\"https:\/\/kinsta.com\/pt\/blog\/permalinks-wordpress\/\">permalink<\/a><\/li>\n<li>O alvo<\/li>\n<li>Nofollow, noreferrer e noopener<\/li>\n<\/ol>\n<figure id=\"attachment_131266\" aria-describedby=\"caption-attachment-131266\" style=\"width: 1421px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131266 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/the-elements-of-a-hyperlink.jpg\" alt=\"Os elementos de um hiperlink.\" width=\"1421\" height=\"394\"><figcaption id=\"caption-attachment-131266\" class=\"wp-caption-text\">Os elementos de um hiperlink.<\/figcaption><\/figure>\n<p>Continue lendo para saber mais sobre cada um desses elementos e como eles funcionam.<\/p>\n<h3>O conte\u00fado<\/h3>\n<p>Voc\u00ea pode criar links clic\u00e1veis com dois tipos de conte\u00fado:<\/p>\n<ol>\n<li>Texto<\/li>\n<li>Gr\u00e1ficos<\/li>\n<\/ol>\n<p>Isso significa que, desde que o aplicativo que voc\u00ea est\u00e1 usando suporte hiperlinks, voc\u00ea pode encontrar qualquer linha de texto escrito ou <a href=\"https:\/\/kinsta.com\/pt\/blog\/imagens-gratuitas-para-wordpress\/\">imagem em seu conte\u00fado<\/a> e transform\u00e1-la em um link clic\u00e1vel.<\/p>\n<h4>Texto com hiperlink<\/h4>\n<p>O texto \u00e9 uma das op\u00e7\u00f5es de conte\u00fado quando voc\u00ea cria links clic\u00e1veis.<\/p>\n<p>Se estiver usando um editor como o WordPress, voc\u00ea pode destacar o texto que quiser na tela do editor e selecionar o bot\u00e3o <strong>Link<\/strong>.<\/p>\n<figure id=\"attachment_131257\" aria-describedby=\"caption-attachment-131257\" style=\"width: 938px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131257 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Adding-a-link-in-WordPress-.jpeg\" alt=\"Como adicionar um link no WordPress.\" width=\"938\" height=\"548\"><figcaption id=\"caption-attachment-131257\" class=\"wp-caption-text\">Como adicionar um link no WordPress.<\/figcaption><\/figure>\n<p>Isso renderiza um link no frontend, geralmente com texto colorido e sublinhado.<\/p>\n<figure id=\"attachment_131259\" aria-describedby=\"caption-attachment-131259\" style=\"width: 1015px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131259 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/A-clickable-link-on-the-frontend.jpeg\" alt=\"Um link clic\u00e1vel no frontend.\" width=\"1015\" height=\"437\"><figcaption id=\"caption-attachment-131259\" class=\"wp-caption-text\">Um link clic\u00e1vel no frontend.<\/figcaption><\/figure>\n<p>Um hiperlink de texto \u00e0s vezes muda quando o usu\u00e1rio passa o mouse sobre ele, geralmente mudando de cor ou ocultando o sublinhado para especificar que se trata de um link clic\u00e1vel.<\/p>\n<p>Al\u00e9m disso, ao passar o mouse sobre um link de texto, os navegadores geralmente mostram uma visualiza\u00e7\u00e3o da URL vinculada para que voc\u00ea possa ver aonde ele leva.<\/p>\n<figure id=\"attachment_131268\" aria-describedby=\"caption-attachment-131268\" style=\"width: 1039px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131268 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/A-preview-of-the-target-URL.jpg\" alt=\"Uma visualiza\u00e7\u00e3o da URL de destino.\" width=\"1039\" height=\"588\"><figcaption id=\"caption-attachment-131268\" class=\"wp-caption-text\">Uma visualiza\u00e7\u00e3o da URL de destino.<\/figcaption><\/figure>\n<h4>Imagens com hiperlink<\/h4>\n<p>Muitos programas, inclusive o <a href=\"https:\/\/kinsta.com\/pt\/blog\/versao-wordpress\/\">WordPress<\/a>,\u00a0permitem gerar hiperlinks usando m\u00eddia on-line, como imagens.<\/p>\n<p>Para isso, voc\u00ea deve selecionar uma imagem no backend (em vez de texto) e adicionar a URL desejada por meio da fun\u00e7\u00e3o <strong>Link<\/strong>.<\/p>\n<figure id=\"attachment_131269\" aria-describedby=\"caption-attachment-131269\" style=\"width: 1028px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131269 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Linking-an-image.jpg\" alt=\"Como vincular uma imagem.\" width=\"1028\" height=\"804\"><figcaption id=\"caption-attachment-131269\" class=\"wp-caption-text\">Como vincular uma imagem.<\/figcaption><\/figure>\n<p>Ap\u00f3s a publica\u00e7\u00e3o, a seta padr\u00e3o do cursor se transforma em um cursor de m\u00e3o quando se passa o mouse sobre a imagem, e os visitantes ver\u00e3o o navegador apresentar uma visualiza\u00e7\u00e3o da URL vinculada.<\/p>\n<figure id=\"attachment_131270\" aria-describedby=\"caption-attachment-131270\" style=\"width: 1048px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131270 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Image-links-show-URL-previews-when-scrolled-over.jpg\" alt=\"Uma visualiza\u00e7\u00e3o da URL de destino.\" width=\"1048\" height=\"718\"><figcaption id=\"caption-attachment-131270\" class=\"wp-caption-text\">Uma visualiza\u00e7\u00e3o da URL de destino.<\/figcaption><\/figure>\n<p>Seja um link de imagem ou de texto, ao clicar nele voc\u00ea ativar\u00e1 uma a\u00e7\u00e3o, como enviar o usu\u00e1rio para uma URL diferente.<\/p>\n<figure id=\"attachment_131271\" aria-describedby=\"caption-attachment-131271\" style=\"width: 1372px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131271 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/An-external-target-page.jpg\" alt=\"Uma landing page externa.\" width=\"1372\" height=\"759\"><figcaption id=\"caption-attachment-131271\" class=\"wp-caption-text\">Uma landing page externa.<\/figcaption><\/figure>\n<h4>Como \u00e9 a apar\u00eancia da codifica\u00e7\u00e3o<\/h4>\n<p>O conte\u00fado de texto ou imagem em um hiperlink \u00e9 representado por &#8220;The Link Text&#8221; no exemplo abaixo:<\/p>\n<pre><code class=\"language-html\">&lt;a href=\"https:\/\/example.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"&gt;The Link Text&lt;\/a&gt;<\/code><\/pre>\n<p>No entanto, aprender a criar um link clic\u00e1vel significa que voc\u00ea substituir\u00e1 esse texto pelo seu pr\u00f3prio conte\u00fado.<\/p>\n<p>Para um link de texto, o texto clic\u00e1vel vai logo antes do colchete de fechamento <em>&lt;\/a&gt;<\/em>.<\/p>\n<figure id=\"attachment_131272\" aria-describedby=\"caption-attachment-131272\" style=\"width: 1202px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131272 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/The-link-text.jpg\" alt=\"O texto do link.\" width=\"1202\" height=\"174\"><figcaption id=\"caption-attachment-131272\" class=\"wp-caption-text\">O texto do link.<\/figcaption><\/figure>\n<p>Os links de imagem s\u00e3o um pouco diferentes, pois devem incluir a URL da imagem (o melhor \u00e9 fazer o <a href=\"https:\/\/kinsta.com\/pt\/blog\/aumentar-tamanho-maximo-upload-wordpress\/\">upload<\/a> dela para o banco de dados de m\u00eddia do seu site).<\/p>\n<p>Essa URL de m\u00eddia fica entre as aspas na se\u00e7\u00e3o <em>img src=&#8221;&#8221;<\/em>.<\/p>\n<p><img class=\"size&lt;span id=\"><\/p>\n<figure id=\"attachment_138644\" aria-describedby=\"caption-attachment-138644\" style=\"width: 1462px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-138644\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/11\/image-source.jpeg\" alt=\"image URL highlighted\" width=\"1462\" height=\"220\"><figcaption id=\"caption-attachment-138644\" class=\"wp-caption-text\">A URL de origem da imagem.<\/figcaption><\/figure>\n<p>H\u00e1 outros elementos a ser adicionados aos links de imagem, como:<\/p>\n<ul>\n<li><strong>Uma tag alt (<em>alt=&#8221;&#8221;)<\/em><\/strong>: Texto que descreve a imagem para rastreadores de mecanismos de pesquisa e usu\u00e1rios com defici\u00eancia visual.<\/li>\n<li><strong>Uma classe (<em>class=&#8221;&#8221;)<\/em><\/strong>: Um nome codificado para usar a imagem em outro local do c\u00f3digo ou nos arquivos do site.<\/li>\n<\/ul>\n<h3>A URL<\/h3>\n<p>Como parte de um hiperlink, a URL serve como destino ou a\u00e7\u00e3o que ocorre quando algu\u00e9m clica no link.<\/p>\n<figure id=\"attachment_131275\" aria-describedby=\"caption-attachment-131275\" style=\"width: 1003px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131275 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/A-URL-within-a-clickable-link.jpg\" alt=\"Uma URL em um link clic\u00e1vel.\" width=\"1003\" height=\"587\"><figcaption id=\"caption-attachment-131275\" class=\"wp-caption-text\">Uma URL em um link clic\u00e1vel.<\/figcaption><\/figure>\n<p>Mas nem todas as URLs funcionam como <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-alterar-url\/\">URLs de p\u00e1ginas da web<\/a>. Voc\u00ea observar\u00e1 que alguns hiperlinks t\u00eam a funcionalidade &#8220;clique para ligar&#8221;, permitindo que os usu\u00e1rios liguem para um n\u00famero de telefone diretamente de seus smartphones com um clique.<\/p>\n<figure id=\"attachment_131276\" aria-describedby=\"caption-attachment-131276\" style=\"width: 908px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131276 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/An-example-of-click-to-call-functionality.jpg\" alt=\"Um exemplo de funcionalidade de \"clique para ligar\".\" width=\"908\" height=\"404\"><figcaption id=\"caption-attachment-131276\" class=\"wp-caption-text\">Um exemplo de funcionalidade de &#8220;clique para ligar&#8221;.<\/figcaption><\/figure>\n<p>Outra op\u00e7\u00e3o \u00e9 revelar um mapa que abre o aplicativo de mapa do usu\u00e1rio em seu telefone.<\/p>\n<figure id=\"attachment_131277\" aria-describedby=\"caption-attachment-131277\" style=\"width: 908px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131277 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/A-link-that-leads-to-a-map-app.jpg\" alt=\"Um link que leva a um aplicativo de mapa.\" width=\"908\" height=\"635\"><figcaption id=\"caption-attachment-131277\" class=\"wp-caption-text\">Um link que leva a um aplicativo de mapa.<\/figcaption><\/figure>\n<h4>Como fica a codifica\u00e7\u00e3o<\/h4>\n<p>As URLs em links clic\u00e1veis s\u00e3o colocadas entre as aspas na parte <em>&lt;a href=&#8221;&#8221;<\/em> do hiperlink.<\/p>\n<p>Por exemplo, a parte <em>https:\/\/www.example.com<\/em> do seguinte c\u00f3digo de hiperlink \u00e9 a URL:<\/p>\n<pre><code class=\"language-html\">&lt;a href=\"https:\/\/www.example.com\" target=\"_blank\" rel=\"noreferrer noopener\"&gt;View the entire menu.&lt;\/a&gt; <\/code><\/pre>\n<figure id=\"attachment_131278\" aria-describedby=\"caption-attachment-131278\" style=\"width: 1565px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131278 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/The-URL-presented-in-a-hyperlink-HTML-code.jpg\" alt=\"A URL apresentada em um c\u00f3digo HTML de hiperlink.\" width=\"1565\" height=\"208\"><figcaption id=\"caption-attachment-131278\" class=\"wp-caption-text\">A URL apresentada em um c\u00f3digo HTML de hiperlink.<\/figcaption><\/figure>\n<p>Algumas URLs levam a documentos que podem ser baixados, ao passo que outras exigem codifica\u00e7\u00e3o especial. Por exemplo, um link &#8220;clique para ligar&#8221; exige que voc\u00ea coloque <em>tel:<\/em> e um n\u00famero de telefone entre as aspas <em>href=&#8221;&#8221;<\/em>.<\/p>\n<figure id=\"attachment_131279\" aria-describedby=\"caption-attachment-131279\" style=\"width: 1407px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131279 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Example-of-a-tel-click-to-call-link.jpg\" alt=\"Exemplo de um link \"tel:\" clique para ligar.\" width=\"1407\" height=\"166\"><figcaption id=\"caption-attachment-131279\" class=\"wp-caption-text\">Exemplo de um link &#8220;tel:&#8221; clique para ligar.<\/figcaption><\/figure>\n<h3>Janela de destino<\/h3>\n<p>A janela de destino \u00e9 uma parte opcional de um hiperlink. Ela especifica se o conte\u00fado ser\u00e1 aberto na mesma aba do navegador ou abrir\u00e1 uma nova.<\/p>\n<p>No WordPress e em muitos outros aplicativos, voc\u00ea pode adicionar uma janela de destino sem tocar em nenhum c\u00f3digo usando o editor visual.<\/p>\n<p>Basta desativar a op\u00e7\u00e3o <strong>Open in a new tab <\/strong>(Abrir em nova aba) se voc\u00ea quiser que o link seja aberto na mesma aba atualmente visualizada pelo usu\u00e1rio.<\/p>\n<figure id=\"attachment_131280\" aria-describedby=\"caption-attachment-131280\" style=\"width: 992px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131280 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Open-In-New-Tab-switch-turned-off.jpg\" alt=\"Op\u00e7\u00e3o Abrir em nova aba desativada.\" width=\"992\" height=\"388\"><figcaption id=\"caption-attachment-131280\" class=\"wp-caption-text\">Op\u00e7\u00e3o Abrir em nova aba desativada.<\/figcaption><\/figure>\n<p>Ou voc\u00ea pode ativar a op\u00e7\u00e3o &#8220;<strong>Open in new tab&#8221;<\/strong>, que adiciona automaticamente um atributo <em>_blank<\/em> \u00e0 codifica\u00e7\u00e3o do hiperlink e abre a URL em uma nova aba quando clicado.<\/p>\n<figure id=\"attachment_131281\" aria-describedby=\"caption-attachment-131281\" style=\"width: 939px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131281 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Open-In-New-Tab-switch-turned-on.jpg\" alt=\"Op\u00e7\u00e3o Abrir em nova aba ativada.\" width=\"939\" height=\"383\"><figcaption id=\"caption-attachment-131281\" class=\"wp-caption-text\">Op\u00e7\u00e3o Abrir em nova aba ativada.<\/figcaption><\/figure>\n<h4>Como fica a codifica\u00e7\u00e3o<\/h4>\n<p>Essas op\u00e7\u00f5es s\u00e3o acionadas quando voc\u00ea adiciona e edita o elemento <em>target=&#8221;&#8221;<\/em> em um hiperlink.<\/p>\n<p>Embora o atributo target tenha v\u00e1rios valores, como <em>_blank<\/em>, <em>_parent<\/em>, <em>_self<\/em> e <em>_top<\/em>, geralmente usamos apenas o valor <em>_blank<\/em>.<\/p>\n<p>Um hiperlink sem o alvo <em>_blank<\/em> tem a seguinte apar\u00eancia:<\/p>\n<figure id=\"attachment_131282\" aria-describedby=\"caption-attachment-131282\" style=\"width: 1287px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131282 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/No-_blank-target-within-a-link.jpg\" alt=\"Link sem o target _blank.\" width=\"1287\" height=\"227\"><figcaption id=\"caption-attachment-131282\" class=\"wp-caption-text\">Link sem o target _blank.<\/figcaption><\/figure>\n<p>Voc\u00ea perceber\u00e1 que n\u00e3o \u00e9 diferente de um hiperlink comum. Isso ocorre porque os hiperlinks, por padr\u00e3o, n\u00e3o abrem em uma nova aba. Portanto, voc\u00ea n\u00e3o precisa fazer nada no link, a menos que prefira que ele seja aberto em uma aba separada do navegador.<\/p>\n<p>Um hiperlink com o destino _blank, que aciona a URL para abrir em uma aba separada, tem a seguinte apar\u00eancia:<\/p>\n<pre><code class=\"language-html\">&lt;a href=\"https:\/\/www.example.com\" target=\"_blank\"&gt;View the entire menu.&lt;\/a&gt;<\/code><\/pre>\n<figure id=\"attachment_131283\" aria-describedby=\"caption-attachment-131283\" style=\"width: 1314px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131283 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Clickable-link-with-a-_blank-target.jpg\" alt=\"Link clic\u00e1vel com um target _blank.\" width=\"1314\" height=\"161\"><figcaption id=\"caption-attachment-131283\" class=\"wp-caption-text\">Link clic\u00e1vel com um target _blank.<\/figcaption><\/figure>\n<h3>nofollow, noreferrer e noopener<\/h3>\n<p>Voc\u00ea tamb\u00e9m pode adicionar outros elementos a um link clic\u00e1vel, a maioria dos quais inclui seguran\u00e7a ou <a href=\"https:\/\/kinsta.com\/pt\/blog\/evitar-que-mecanismos-de-pesquisa-indexe-este-site\/\">camuflagem dos mecanismos de pesquisa<\/a>:<\/p>\n<ul>\n<li><strong><a href=\"https:\/\/kinsta.com\/pt\/blog\/adicionar-links-nofollow-no-wordpress\/\">nofollow<\/a><\/strong>: Um atributo que impede que o &#8220;SEO link juice&#8221; v\u00e1 para o site vinculado. Isso ajuda a proteger seu site e pode ocultar o link dos mecanismos de pesquisa.<\/li>\n<li><strong>noopener<\/strong>: Esse \u00e9 um atributo HTML que \u00e9 adicionado automaticamente aos links do WordPress marcados como <strong>Open in a new tab<\/strong>. Ele \u00e9 combinado com o <em>noreferrer<\/em> para minimizar determinados problemas de seguran\u00e7a ao abrir links em novas abas.<\/li>\n<li><strong>noreferrer<\/strong>: geralmente emparelhado com o <em>noopener<\/em>, o atributo <em>noreferrer<\/em> impede que todas as informa\u00e7\u00f5es de refer\u00eancia sejam passadas para o site de destino, adicionando seguran\u00e7a extra e possivelmente bloqueando dados de sites de rastreamento e sites de ganhos de afiliados.<\/li>\n<\/ul>\n<p>Voc\u00ea n\u00e3o pode identificar nenhum desses atributos de link observando um link no site ativo. Em vez disso, voc\u00ea deve acessar o c\u00f3digo HTML.<\/p>\n<h4>Como \u00e9 a apar\u00eancia da codifica\u00e7\u00e3o<\/h4>\n<p>Todos esses atributos de link ficam entre as aspas na parte <em>rel=&#8221;&#8221;<\/em> do link clic\u00e1vel.<\/p>\n<p>\u00c9 poss\u00edvel que voc\u00ea tenha todos eles inclu\u00eddos em um \u00fanico link.<\/p>\n<figure id=\"attachment_131327\" aria-describedby=\"caption-attachment-131327\" style=\"width: 1168px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131327 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Link-with-noreferrer-noopener-and-nofollow-all-included.jpg\" alt=\"Link com noreferrer, noopener e nofollow inclu\u00eddos.\" width=\"1168\" height=\"190\"><figcaption id=\"caption-attachment-131327\" class=\"wp-caption-text\">Link com noreferrer, noopener e nofollow inclu\u00eddos.<\/figcaption><\/figure>\n<p>Talvez voc\u00ea veja tamb\u00e9m alguns hiperlinks que incluem apenas um atributo <em>noreferrer noopener,<\/em> ou um <em>nofollow<\/em> sem os outros dois. Tudo depende do que o criador do link deseja fazer.<\/p>\n<h3>Raz\u00f5es pelas quais voc\u00ea pode querer tornar um link clic\u00e1vel<\/h3>\n<p>Ao aprender como tornar um link clic\u00e1vel, \u00e9 importante entender todos os motivos para criar hiperlinks. Dessa forma, voc\u00ea estar\u00e1 ciente dos recursos e poder\u00e1 tirar proveito deles no futuro.<\/p>\n<p>Aqui est\u00e3o os principais motivos pelos quais voc\u00ea pode querer tornar um link clic\u00e1vel:<\/p>\n<ol>\n<li><strong>Hiperlinks internos\/externos gerais para URLs<\/strong>: Voc\u00ea 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\u00e1ginas do seu site (particularmente \u00fatil para direcionar os leitores para conte\u00fado relevante e mant\u00ea-los no site por um per\u00edodo mais longo).<\/li>\n<li><strong>Vincula\u00e7\u00e3o de imagens<\/strong>: Voc\u00ea pode adicionar hiperlinks a URLs, arquivos de m\u00eddia ou p\u00e1ginas de anexo a qualquer imagem no WordPress e em muitos outros criadores de sites.<\/li>\n<li><strong>Bot\u00f5es de links<\/strong>: Os bot\u00f5es CSS oferecem op\u00e7\u00f5es para adicionar hiperlinks, acrescentando ao seu link clic\u00e1vel uma experi\u00eancia visual mais atraente que o texto simples.<\/li>\n<li><strong>N\u00fameros de telefone<\/strong>: Geralmente chamado de recurso &#8220;clique para ligar&#8221;, os hiperlinks que levam a n\u00fameros de telefone abrem aplicativos com recursos de chamada, como o pr\u00f3prio aplicativo de telefone no seu dispositivo ou o Skype.<\/li>\n<li><strong>Endere\u00e7os<\/strong>: O hiperlink para coordenadas espec\u00edficas no Google ou no Apple Maps significa que o usu\u00e1rio que clicar no link ter\u00e1 essas informa\u00e7\u00f5es automaticamente inseridas no aplicativo de GPS ou mapa para navega\u00e7\u00e3o.<\/li>\n<li><strong>Endere\u00e7os de e-mail<\/strong>: Isso \u00e9 semelhante aos links &#8220;clique para ligar&#8221;, mas com endere\u00e7os 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\u00e7o de e-mail espec\u00edfico adicionado no campo <strong>Para<\/strong>.<\/li>\n<li><strong><a href=\"https:\/\/kinsta.com\/pt\/blog\/links-de-ancora\/\">Criar links de \u00e2ncora<\/a><\/strong>: Voc\u00ea pode criar um link para o conte\u00fado da mesma p\u00e1gina usando links de \u00e2ncora; eles s\u00e3o muito populares para criar um \u00edndice no in\u00edcio de uma longa publica\u00e7\u00e3o de blog. \u00c0s vezes eles s\u00e3o chamados de &#8220;hiperlinks de marcadores&#8221;<\/li>\n<li><strong>Oferecer um arquivo para download<\/strong>: O WordPress \u2014 como outros criadores de sites \u2014 oferece ferramentas para carregar <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-um-arquivo-svg\/\">arquivos SVG<\/a>, <a href=\"https:\/\/kinsta.com\/pt\/blog\/plugins-wordpress-pdf-viewer\/\">PDFs<\/a>, <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-fazer-upload-arquivo-html-wordpress\/\">arquivos HTML<\/a> e muito mais; voc\u00ea pode at\u00e9 <a href=\"https:\/\/kinsta.com\/pt\/blog\/upload-de-arquivos-em-massa-para-a-biblioteca-de-midia-do-wordpress-via-ftp\/\">carregar itens em massa<\/a>. Depois disso, voc\u00ea pode criar hiperlinks em artigos\/p\u00e1ginas para que os usu\u00e1rios fa\u00e7am download dos arquivos diretamente em seus dispositivos.<\/li>\n<\/ol>\n<p>Agora que j\u00e1 abordamos os tipos de hiperlinks e os motivos pelos quais voc\u00ea pode querer gerar um, continue lendo para saber tudo sobre como fazer isso.<\/p>\n<h2>Como tornar um link clic\u00e1vel<\/h2>\n<p>O m\u00e9todo que voc\u00ea escolhe para criar um link depende da sua experi\u00eancia. Voc\u00ea pode optar por um m\u00e9todo visual mais f\u00e1cil ou considerar o uso de c\u00f3digo HTML.<\/p>\n<p>H\u00e1 quatro m\u00e9todos principais para tornar um link clic\u00e1vel:<\/p>\n<ol>\n<li>Usando o editor cl\u00e1ssico do WordPress<\/li>\n<li>Usando o editor de <a href=\"https:\/\/kinsta.com\/pt\/blog\/desabilitar-o-editor-wordpress-gutenberg\/\">blocos do WordPress (Gutenberg)<\/a><\/li>\n<li>Usando HTML<\/li>\n<li>Usando qualquer interface gr\u00e1fica de usu\u00e1rio (GUI)<\/li>\n<\/ol>\n<p>Lembre-se de que todos esses m\u00e9todos funcionam de forma semelhante para artigos e p\u00e1ginas do WordPress. Esses guias (especialmente o M\u00e9todo 4) tamb\u00e9m s\u00e3o \u00fateis para outros aplicativos\/criadores de sites, mas algumas terminologias e funcionalidades podem variar.<\/p>\n<h3>M\u00e9todo 1: Usando o editor cl\u00e1ssico do WordPress<\/h3>\n<p>Se voc\u00ea estiver trabalhando com o editor cl\u00e1ssico do WordPress, a maneira mais f\u00e1cil de criar um link clic\u00e1vel em um artigo ou p\u00e1gina \u00e9 por meio da aba <strong>Visual<\/strong>\u00a0do editor.<\/p>\n<p>Para fazer isso, v\u00e1 para a se\u00e7\u00e3o <strong>Posts<\/strong> ou <strong>Pages <\/strong>do painel do WordPress e selecione uma p\u00e1gina ou artigo individual que voc\u00ea gostaria de editar, usando a aba <strong>Visual<\/strong>.<\/p>\n<h4>Etapa 1: Destaque o texto que voc\u00ea deseja tornar clic\u00e1vel<\/h4>\n<p>Para um link de texto, \u00e9 melhor que voc\u00ea j\u00e1 tenha digitado o texto no editor <strong>Visual<\/strong>. Depois disso, use o cursor para destacar a sequ\u00eancia de texto.<\/p>\n<figure id=\"attachment_131328\" aria-describedby=\"caption-attachment-131328\" style=\"width: 1098px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131328 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Highlight-some-text.jpg\" alt=\"Destaque um trecho de texto.\" width=\"1098\" height=\"837\"><figcaption id=\"caption-attachment-131328\" class=\"wp-caption-text\">Destaque um trecho de texto.<\/figcaption><\/figure>\n<p><strong>Se voc\u00ea estiver transformando uma imagem em um link clic\u00e1vel:<\/strong><\/p>\n<p>Selecione a imagem para que voc\u00ea possa ver uma barra de ferramentas do editor e um contorno ao redor da imagem.<\/p>\n<figure id=\"attachment_131329\" aria-describedby=\"caption-attachment-131329\" style=\"width: 1081px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131329 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Select-the-image.jpg\" alt=\"Selecione a imagem.\" width=\"1081\" height=\"835\"><figcaption id=\"caption-attachment-131329\" class=\"wp-caption-text\">Selecione a imagem.<\/figcaption><\/figure>\n<h4>Etapa 2: Clique no bot\u00e3o Insert\/Edit link<\/h4>\n<p>Com o texto ainda destacado, role sobre o bot\u00e3o<strong> Insert\/Edit link<\/strong> na barra de ferramentas do editor visual. O \u00edcone do bot\u00e3o se parece com um elo de corrente.<\/p>\n<figure id=\"attachment_131331\" aria-describedby=\"caption-attachment-131331\" style=\"width: 1092px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131331 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Edit-Link-button.jpg\" alt=\"Clique no bot\u00e3o Insert\/Edit link.\" width=\"1092\" height=\"545\"><figcaption id=\"caption-attachment-131331\" class=\"wp-caption-text\">Clique no bot\u00e3o Insert\/Edit link.<\/figcaption><\/figure>\n<p><strong>Se voc\u00ea estiver transformando uma imagem em um link clic\u00e1vel<\/strong>:<\/p>\n<p>Com a imagem ainda selecionada, clique no bot\u00e3o<strong> Insert\/Edit link<\/strong> (aquele que se parece com um elo de corrente).<\/p>\n<figure id=\"attachment_131335\" aria-describedby=\"caption-attachment-131335\" style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131335 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Choose-the-Edit-Button.jpg\" alt=\"Escolha o bot\u00e3o Edit.\" width=\"1024\" height=\"678\"><figcaption id=\"caption-attachment-131335\" class=\"wp-caption-text\">Escolha o bot\u00e3o Edit.<\/figcaption><\/figure>\n<h4>Etapa 3: Cole uma URL<\/h4>\n<p>Isso revela um campo de URL vazio. Copie (<strong>Command + C ou Ctrl + C<\/strong>) a URL do link desejado para a \u00e1rea de transfer\u00eancia do dispositivo. Esse link pode ser uma URL externa que voc\u00ea encontrou em outro lugar na internet ou uma URL do seu pr\u00f3prio site.<\/p>\n<p>Depois de copiado, cole (<strong>Command + V ou Ctrl + V<\/strong>) no campo.<\/p>\n<figure id=\"attachment_131334\" aria-describedby=\"caption-attachment-131334\" style=\"width: 1086px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131334 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Paste-in-a-URL.jpg\" alt=\"Colar uma URL.\" width=\"1086\" height=\"630\"><figcaption id=\"caption-attachment-131334\" class=\"wp-caption-text\">Colar uma URL.<\/figcaption><\/figure>\n<p><strong>Se voc\u00ea estiver transformando uma imagem em um link clic\u00e1vel<\/strong>:<\/p>\n<p>Cole a URL desejada no campo revelado e, em seguida, clique no bot\u00e3o <strong>Apply<\/strong>\u00a0para ativar o link.<\/p>\n<figure id=\"attachment_131333\" aria-describedby=\"caption-attachment-131333\" style=\"width: 1092px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131333 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Insert-the-link-and-click-the-Apply-button-1.jpg\" alt=\"Insira o link e clique no bot\u00e3o Apply.\" width=\"1092\" height=\"837\"><figcaption id=\"caption-attachment-131333\" class=\"wp-caption-text\">Insira o link e clique no bot\u00e3o Apply.<\/figcaption><\/figure>\n<h4>Etapa 4: Aplicar o link<\/h4>\n<p>Clique no bot\u00e3o <strong>Apply<\/strong>\u00a0para ativar o link e tornar o texto clic\u00e1vel.<\/p>\n<figure id=\"attachment_131336\" aria-describedby=\"caption-attachment-131336\" style=\"width: 1080px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131336 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Click-the-Apply-button.jpg\" alt=\"Clique no bot\u00e3o Apply.\" width=\"1080\" height=\"629\"><figcaption id=\"caption-attachment-131336\" class=\"wp-caption-text\">Clique no bot\u00e3o Apply.<\/figcaption><\/figure>\n<p>Agora voc\u00ea deve ver a parte do hiperlink do seu texto sublinhada e, possivelmente, em uma cor diferente.<\/p>\n<figure id=\"attachment_131337\" aria-describedby=\"caption-attachment-131337\" style=\"width: 1084px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131337 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/The-resulting-link.jpg\" alt=\"O link resultante.\" width=\"1084\" height=\"475\"><figcaption id=\"caption-attachment-131337\" class=\"wp-caption-text\">O link resultante.<\/figcaption><\/figure>\n<p>Se voc\u00ea clicar no hiperlink no editor, ele revelar\u00e1 um link ativo para teste, juntamente com ferramentas de edi\u00e7\u00e3o, caso voc\u00ea queira alterar o hiperlink.<\/p>\n<h4>Op\u00e7\u00f5es adicionais<\/h4>\n<p>Abordaremos links clic\u00e1veis mais avan\u00e7ados nas pr\u00f3ximas se\u00e7\u00f5es, mas vale a pena observar que cada link que voc\u00ea cria no editor cl\u00e1ssico do WordPress tem um bot\u00e3o <strong>Link<\/strong> <strong>Options<\/strong> para configura\u00e7\u00f5es adicionais.<\/p>\n<figure id=\"attachment_138643\" aria-describedby=\"caption-attachment-138643\" style=\"width: 1078px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-138643 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/11\/link-for-options.jpeg\" alt=\"Clique no bot\u00e3o Link options.\" width=\"1078\" height=\"558\"><figcaption id=\"caption-attachment-138643\" class=\"wp-caption-text\">Clique no bot\u00e3o Link options.<\/figcaption><\/figure>\n<p>Aqui, voc\u00ea pode:<\/p>\n<ul>\n<li>Ajustar a URL<\/li>\n<li>Alterar o texto do link<\/li>\n<li>Abrir o link em uma nova aba<\/li>\n<li>Pesquisar e vincular ao conte\u00fado existente em seu site<\/li>\n<\/ul>\n<figure id=\"attachment_131340\" aria-describedby=\"caption-attachment-131340\" style=\"width: 1034px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131340 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/More-options.jpg\" alt=\"Mais op\u00e7\u00f5es.\" width=\"1034\" height=\"786\"><figcaption id=\"caption-attachment-131340\" class=\"wp-caption-text\">Mais op\u00e7\u00f5es.<\/figcaption><\/figure>\n<p><strong>Se voc\u00ea estiver transformando uma imagem em um link clic\u00e1vel:<\/strong><\/p>\n<p>O editor cl\u00e1ssico do WordPress oferece uma maneira secund\u00e1ria de tornar as imagens clic\u00e1veis. Para isso, voc\u00ea pode selecionar a imagem e escolher o bot\u00e3o <strong>Edit<\/strong>\u00a0(semelhante a um l\u00e1pis) na barra de ferramentas pop-up.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-131341 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Choose-the-Edit-Button-1.jpg\" alt width=\"1024\" height=\"678\"><\/p>\n<p>Role at\u00e9 o campo <strong>Link<\/strong> <strong>To<\/strong>, que permite que voc\u00ea crie um link para uma <strong>Custom URL <\/strong>(URL personalizada). Basta voc\u00ea colar a URL desejada no campo abaixo e clicar em <strong>Update <\/strong>(Atualizar).<\/p>\n<figure id=\"attachment_131342\" aria-describedby=\"caption-attachment-131342\" style=\"width: 1078px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131342 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Find-and-edit-the-Link-To-field.jpg\" alt=\"Localize e edite o campo Link To.\" width=\"1078\" height=\"884\"><figcaption id=\"caption-attachment-131342\" class=\"wp-caption-text\">Localize e edite o campo Link To.<\/figcaption><\/figure>\n<p>Voc\u00ea tamb\u00e9m pode selecionar o menu suspenso <strong>Link To<\/strong> para criar um hiperlink para:<\/p>\n<ul>\n<li>Arquivos de m\u00eddia<\/li>\n<li>P\u00e1ginas de anexos<\/li>\n<li>URLs personalizadas<\/li>\n<li>Nenhum<\/li>\n<\/ul>\n<figure id=\"attachment_131343\" aria-describedby=\"caption-attachment-131343\" style=\"width: 1078px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131343 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Choose-different-linking-options.jpg\" alt=\"Escolha diferentes op\u00e7\u00f5es de links.\" width=\"1078\" height=\"529\"><figcaption id=\"caption-attachment-131343\" class=\"wp-caption-text\">Escolha diferentes op\u00e7\u00f5es de links.<\/figcaption><\/figure>\n<h3>M\u00e9todo 2: Usando o editor de blocos do WordPress (Gutenberg)<\/h3>\n<p>Os hiperlinks funcionam da mesma forma em artigos e p\u00e1ginas no <a href=\"https:\/\/kinsta.com\/pt\/blog\/editor-gutenberg-wordpress\/\">editor de blocos do WordPress<\/a>.<\/p>\n<p>Para come\u00e7ar, v\u00e1 para a se\u00e7\u00e3o <strong>Posts<\/strong> ou <strong>Pages<\/strong> do seu painel do WordPress. Selecione um artigo ou p\u00e1gina individual que voc\u00ea gostaria de editar e, em seguida, siga as etapas abaixo.<\/p>\n<h4>Etapa 1: Destaque algum texto<\/h4>\n<p>Digite algum texto no editor. Com o cursor, destaque a parte do texto que voc\u00ea deseja tornar clic\u00e1vel. Na barra de ferramentas pop-up, clique no bot\u00e3o <strong>Link<\/strong>.<\/p>\n<figure id=\"attachment_131344\" aria-describedby=\"caption-attachment-131344\" style=\"width: 1043px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131344 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Highlight-text-and-click-the-Link-button.jpg\" alt=\"Destaque o texto e clique no bot\u00e3o Link.\" width=\"1043\" height=\"424\"><figcaption id=\"caption-attachment-131344\" class=\"wp-caption-text\">Destaque o texto e clique no bot\u00e3o Link.<\/figcaption><\/figure>\n<p><strong>Se voc\u00ea estiver transformando uma imagem em um link clic\u00e1vel<\/strong>:<\/p>\n<p>Para tornar uma imagem clic\u00e1vel no editor de blocos do WordPress, voc\u00ea precisa adicionar uma imagem ao editor.<\/p>\n<p>Para isso, clique no bot\u00e3o <strong>Add<\/strong> <strong>Block<\/strong> (Adicionar bloco) e selecione o bloco <strong>Image<\/strong>. Carregue a imagem que voc\u00ea deseja vincular.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-131345 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Add-an-image-block.jpg\" alt width=\"1044\" height=\"767\"><\/p>\n<p>Clique na imagem para que ela seja destacada\/selecionada e, em seguida, escolha o bot\u00e3o <strong>Insert<\/strong>\u00a0<strong>link<\/strong> na janela pop-up da barra de ferramentas.<\/p>\n<figure id=\"attachment_131346\" aria-describedby=\"caption-attachment-131346\" style=\"width: 953px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131346 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Add-an-image-block-1.jpg\" alt=\"Selecione a imagem e insira o link.\" width=\"953\" height=\"774\"><figcaption id=\"caption-attachment-131346\" class=\"wp-caption-text\">Selecione a imagem e insira o link.<\/figcaption><\/figure>\n<h4>Etapa 2: Cole a URL e envie o link<\/h4>\n<p>Voc\u00ea ver\u00e1 uma janela pop-up com um campo em branco. Cole a URL que deseja vincular e, em seguida, clique em <strong>Enter<\/strong> no teclado ou no bot\u00e3o <strong>Submit <\/strong>para ativar o link clic\u00e1vel.<\/p>\n<figure id=\"attachment_131347\" aria-describedby=\"caption-attachment-131347\" style=\"width: 1046px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131347 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Insert-a-URL-and-click-Submit.jpg\" alt=\"Insira uma URL e clique em Submit.\" width=\"1046\" height=\"485\"><figcaption id=\"caption-attachment-131347\" class=\"wp-caption-text\">Insira uma URL e clique em Submit.<\/figcaption><\/figure>\n<p>Como resultado, o texto com hiperlink ser\u00e1 exibido em uma cor diferente, e voc\u00ea poder\u00e1 clicar no link para ver uma pr\u00e9via do conte\u00fado e adicionar configura\u00e7\u00f5es de link mais avan\u00e7adas.<\/p>\n<figure id=\"attachment_131348\" aria-describedby=\"caption-attachment-131348\" style=\"width: 1028px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131348 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/View-a-preview-and-more-advanced-link-settings.jpg\" alt=\"Visualizar uma pr\u00e9via e configura\u00e7\u00f5es de link mais avan\u00e7adas.\" width=\"1028\" height=\"611\"><figcaption id=\"caption-attachment-131348\" class=\"wp-caption-text\">Visualizar uma pr\u00e9via e configura\u00e7\u00f5es de link mais avan\u00e7adas.<\/figcaption><\/figure>\n<p><strong>Se voc\u00ea estiver transformando uma imagem em um link clic\u00e1vel<\/strong>:<\/p>\n<p>H\u00e1 op\u00e7\u00f5es para criar hiperlinks para arquivos de m\u00eddia e p\u00e1ginas de anexos, se voc\u00ea desejar.<\/p>\n<figure id=\"attachment_131350\" aria-describedby=\"caption-attachment-131350\" style=\"width: 918px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131350 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Consider-media-file-and-attachment-page-links.jpg\" alt=\"Considere os links de arquivos de m\u00eddia e p\u00e1ginas de anexos.\" width=\"918\" height=\"424\"><figcaption id=\"caption-attachment-131350\" class=\"wp-caption-text\">Considere os links de arquivos de m\u00eddia e p\u00e1ginas de anexos.<\/figcaption><\/figure>\n<p>Caso contr\u00e1rio, cole uma URL no campo de link vazio. Clique no bot\u00e3o <strong>Apply<\/strong>\u00a0para ativar o link. Ap\u00f3s a publica\u00e7\u00e3o, qualquer pessoa que clicar na imagem ser\u00e1 direcionada para o link que voc\u00ea especificou.<\/p>\n<figure id=\"attachment_131352\" aria-describedby=\"caption-attachment-131352\" style=\"width: 920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131352 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Click-on-the-Apply-button-after-inserting-a-URL.jpg\" alt=\"Clique no bot\u00e3o Apply ap\u00f3s inserir uma URL.\" width=\"920\" height=\"412\"><figcaption id=\"caption-attachment-131352\" class=\"wp-caption-text\">Clique no bot\u00e3o Apply ap\u00f3s inserir uma URL.<\/figcaption><\/figure>\n<p>Para obter mais op\u00e7\u00f5es, clique no bot\u00e3o <strong>seta pra baixo <\/strong><strong>(v)<\/strong> para:<\/p>\n<ul>\n<li>Abrir o link em uma nova aba<\/li>\n<li>Adicionar um link rel<\/li>\n<li>Adicionar uma classe CSS ao link<\/li>\n<\/ul>\n<figure id=\"attachment_131353\" aria-describedby=\"caption-attachment-131353\" style=\"width: 983px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131353 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Click-the-down-carrot-button-for-more-settings.jpg\" alt=\"Clique no bot\u00e3o de seta para baixo para obter mais configura\u00e7\u00f5es.\" width=\"983\" height=\"712\"><figcaption id=\"caption-attachment-131353\" class=\"wp-caption-text\">Clique no bot\u00e3o de seta para baixo para obter mais configura\u00e7\u00f5es.<\/figcaption><\/figure>\n<h4>Op\u00e7\u00f5es adicionais<\/h4>\n<p>Vamos nos aprofundar mais nas estruturas avan\u00e7adas de hiperlink nas se\u00e7\u00f5es a seguir, mas voc\u00ea deve saber que um bot\u00e3o <strong>Edit<\/strong>\u00a0est\u00e1 dispon\u00edvel se voc\u00ea clicar com o cursor no link rec\u00e9m-criado.<\/p>\n<figure id=\"attachment_131355\" aria-describedby=\"caption-attachment-131355\" style=\"width: 983px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131355 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Click-the-Edit-button.jpg\" alt=\"Clique no bot\u00e3o Edit.\" width=\"983\" height=\"612\"><figcaption id=\"caption-attachment-131355\" class=\"wp-caption-text\">Clique no bot\u00e3o Edit.<\/figcaption><\/figure>\n<p>Na p\u00e1gina <strong>Edit<\/strong>, voc\u00ea ver\u00e1 campos para:<\/p>\n<ul>\n<li>Alterar o texto do link<\/li>\n<li>Modificar a URL<\/li>\n<li>Abrir o link em uma nova aba<\/li>\n<\/ul>\n<figure id=\"attachment_131356\" aria-describedby=\"caption-attachment-131356\" style=\"width: 918px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131356 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/The-Edit-page.jpg\" alt=\"A p\u00e1gina Edit.\" width=\"918\" height=\"419\"><figcaption id=\"caption-attachment-131356\" class=\"wp-caption-text\">A p\u00e1gina Edit.<\/figcaption><\/figure>\n<h4>Outros links clic\u00e1veis que voc\u00ea pode criar no editor de blocos<\/h4>\n<p>O editor de blocos do WordPress amplia as op\u00e7\u00f5es usuais de links dispon\u00edveis. De fato, dezenas de blocos incorporados permitem algum tipo de estrutura de link clic\u00e1vel, incluindo:<\/p>\n<ul>\n<li><strong>Bot\u00f5es<\/strong>: Uma maneira elegante de vincular conte\u00fado em compara\u00e7\u00e3o com links de texto simples.<\/li>\n<li><strong>Arquivos<\/strong>: Carregue arquivos rapidamente e inclua um bot\u00e3o para os usu\u00e1rios clicarem e baixarem.<\/li>\n<li><strong>\u00cdcones sociais<\/strong>: Insira \u00edcones sociais com links clic\u00e1veis.<\/li>\n<li><strong>Navega\u00e7\u00e3o<\/strong>: Coloque bot\u00f5es de navega\u00e7\u00e3o em qualquer lugar do seu site com o uso de links clic\u00e1veis.<\/li>\n<li><strong>Leia mais<\/strong>: Pode ser usado para encurtar seu conte\u00fado e fornecer um link para a vers\u00e3o mais extensa.<\/li>\n<li><strong>Login\/logout<\/strong>: Adicione um link r\u00e1pido para que os usu\u00e1rios fa\u00e7am login no seu site.<\/li>\n<li><strong>Pr\u00f3ximo artigo<\/strong>: Adicione um link\/bot\u00e3o clic\u00e1vel para o pr\u00f3ximo artigo do blog em seu site.<\/li>\n<li><strong>Artigo anterior<\/strong>: Adicione um link\/bot\u00e3o clic\u00e1vel que leva ao artigo anterior do blog em seu site.\n<ul>\n<li style=\"list-style-type: none\"><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<figure id=\"attachment_131357\" aria-describedby=\"caption-attachment-131357\" style=\"width: 952px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131357 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/A-button-is-yet-another-style-of-clickable-link-available-in-the-WordPress-Block-Editor.jpg\" alt=\"Um bot\u00e3o \u00e9 mais um estilo de link clic\u00e1vel dispon\u00edvel no editor de blocos do WordPress.\" width=\"952\" height=\"375\"><figcaption id=\"caption-attachment-131357\" class=\"wp-caption-text\">Um bot\u00e3o \u00e9 mais um estilo de link clic\u00e1vel dispon\u00edvel no editor de blocos do WordPress.<\/figcaption><\/figure>\n<h3>M\u00e9todo 3: Usando HTML<\/h3>\n<p>Para tornar um link clic\u00e1vel com HTML, voc\u00ea deve usar as mesmas fun\u00e7\u00f5es, independentemente da interface do seu editor.<\/p>\n<p>Voc\u00ea pode editar HTML com:<\/p>\n<p><strong>O painel de texto no editor cl\u00e1ssico do WordPress<\/strong><\/p>\n<figure id=\"attachment_138641\" aria-describedby=\"caption-attachment-138641\" style=\"width: 940px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-138641 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/11\/classic-editor-text-panel.jpeg\" alt=\"O painel de texto do editor cl\u00e1ssico do WordPress.\" width=\"940\" height=\"456\"><figcaption id=\"caption-attachment-138641\" class=\"wp-caption-text\">O painel de texto do editor cl\u00e1ssico do WordPress.<\/figcaption><\/figure>\n<p><strong>O editor de c\u00f3digo no editor de blocos do WordPress<\/strong><\/p>\n<figure id=\"attachment_138642\" aria-describedby=\"caption-attachment-138642\" style=\"width: 957px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-138642 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/11\/code-editor.jpeg\" alt=\"O editor de c\u00f3digo no editor de blocos do WordPress.\" width=\"957\" height=\"556\"><figcaption id=\"caption-attachment-138642\" class=\"wp-caption-text\">O editor de c\u00f3digo no editor de blocos do WordPress.<\/figcaption><\/figure>\n<p><strong>Um editor de HTML\/texto em seu dispositivo<\/strong><\/p>\n<p><a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-editores-texto\/\">Editores de texto como Atom, Sublime Text e Coda<\/a> fornecem a interface necess\u00e1ria para escrever e editar HTML, especialmente para links clic\u00e1veis. Tamb\u00e9m \u00e9 poss\u00edvel <a href=\"https:\/\/kinsta.com\/pt\/blog\/editores-markdown\/\">usar editores markdown<\/a>.<\/p>\n<figure id=\"attachment_131360\" aria-describedby=\"caption-attachment-131360\" style=\"width: 1230px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131360 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/The-Atom-text-editor.jpg\" alt=\"O editor de texto Atom.\" width=\"1230\" height=\"750\"><figcaption id=\"caption-attachment-131360\" class=\"wp-caption-text\">O editor de texto Atom.<\/figcaption><\/figure>\n<p>Ap\u00f3s trabalhar com o editor de texto, voc\u00ea pode:<\/p>\n<ul>\n<li>Fazer upload de seus arquivos para publica\u00e7\u00e3o na Internet, <a href=\"https:\/\/kinsta.com\/pt\/blog\/ftp-vs-sftp\/\">via FTP ou SFTP<\/a>. Recomendamos que voc\u00ea <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-usar-o-filezilla\/\">use o FileZilla<\/a> para que o processo seja mais f\u00e1cil.<\/li>\n<li><a href=\"https:\/\/kinsta.com\/pt\/blog\/upload-de-arquivos-em-massa-para-a-biblioteca-de-midia-do-wordpress-via-ftp\/\">Fazer upload em massa de arquivos HTML<\/a> para o <a href=\"https:\/\/kinsta.com\/pt\/blog\/arquivos-wordpress\/\">diret\u00f3rio de arquivos do WordPress<\/a>.<\/li>\n<li><a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-clientes-ftp\/\">Usar um dos muitos outros clientes de FTP<\/a> para fazer upload de arquivos HTML para o WordPress.<\/li>\n<\/ul>\n<p>Depois que voc\u00ea encontrar um editor de texto e souber como far\u00e1 o upload do HTML para o WordPress, siga as etapas abaixo para tornar um link clic\u00e1vel com HTML.<\/p>\n<p>Este formato \u00e9 usado para hiperlinks b\u00e1sicos em HTML:<\/p>\n<pre><code class=\"language-html\">&lt;a href=\"https:\/\/www.example.com\"&gt;Link Text&lt;\/a&gt;<\/code><\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-131361 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Basic-HTML-link-format.jpg\" alt width=\"937\" height=\"299\"><\/p>\n<p>Observa\u00e7\u00f5es:<\/p>\n<ol>\n<li>Substitua &#8220;https:\/\/www.example.com&#8221; pelo URL que voc\u00ea deseja.<\/li>\n<li>Substitua &#8220;Link Text&#8221; pelo texto do link desejado.<\/li>\n<\/ol>\n<p>Quando o link estiver pronto, voc\u00ea poder\u00e1 publicar o artigo\/p\u00e1gina ou carregar o HTML no seu site. Voc\u00ea tamb\u00e9m pode obter uma pr\u00e9via visual do link alternando para a aba <strong>Visual<\/strong> no WordPress.<\/p>\n<p>Uma vers\u00e3o publicada desse link HTML mostra o link sublinhado e, \u00e0s vezes, em uma cor diferente. Ao passar o mouse sobre o link, voc\u00ea ver\u00e1 o destino dele na parte inferior do navegador.<\/p>\n<figure id=\"attachment_131363\" aria-describedby=\"caption-attachment-131363\" style=\"width: 923px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-131363\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Link-on-the-frontend-with-the-browser-preview.jpg\" alt=\"frontend post with link text underlined\" width=\"923\" height=\"268\"><figcaption id=\"caption-attachment-131363\" class=\"wp-caption-text\">Link no frontend com a visualiza\u00e7\u00e3o do navegador.<\/figcaption><\/figure>\n<h3>M\u00e9todo 4: Usar qualquer interface gr\u00e1fica de usu\u00e1rio (GUI)<\/h3>\n<p>Embora n\u00e3o possamos abranger todas as GUIs imagin\u00e1veis existentes, aprender como tornar um link clic\u00e1vel em outro editor al\u00e9m do WordPress ou HTML geralmente \u00e9 semelhante ao que acabamos de abordar.<\/p>\n<p>De modo geral, cada GUI pode usar um nome de bot\u00e3o ou \u00edcone ligeiramente diferente para criar um hiperlink.<\/p>\n<p><strong>Seu processo geral deve ser o seguinte:<\/strong><\/p>\n<ol>\n<li>Destaque o texto que voc\u00ea deseja vincular.<\/li>\n<li>Clique no \u00edcone <strong>Link<\/strong> (pode ter um nome diferente) no editor.<\/li>\n<li>Cole a URL desejada.<\/li>\n<li>Clique no bot\u00e3o <strong>Adicionar<\/strong> <strong>link<\/strong> (ou com um nome semelhante).<\/li>\n<\/ol>\n<p>Como exemplo b\u00e1sico, um construtor de lojas on-line como o Shopify permite que voc\u00ea crie um link clic\u00e1vel em qualquer p\u00e1gina ou artigo, destacando o texto e clicando no bot\u00e3o <strong>Insert<\/strong>\u00a0<strong>link<\/strong>.<\/p>\n<figure id=\"attachment_131364\" aria-describedby=\"caption-attachment-131364\" style=\"width: 958px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131364 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Inserting-a-link-in-an-alternative-GUI.jpg\" alt=\"Inser\u00e7\u00e3o de um link em uma GUI alternativa.\" width=\"958\" height=\"627\"><figcaption id=\"caption-attachment-131364\" class=\"wp-caption-text\">Inser\u00e7\u00e3o de um link em uma GUI alternativa.<\/figcaption><\/figure>\n<p>Em seguida, voc\u00ea colaria a URL de destino e clicaria no bot\u00e3o<strong> Insert link<\/strong>.<\/p>\n<figure id=\"attachment_131365\" aria-describedby=\"caption-attachment-131365\" style=\"width: 915px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131365 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Paste-the-URL-and-click-Insert-Link.jpg\" alt=\"Voc\u00ea cola a URL e clica em Insert link.\" width=\"915\" height=\"522\"><figcaption id=\"caption-attachment-131365\" class=\"wp-caption-text\">Voc\u00ea cola a URL e clica em Insert link.<\/figcaption><\/figure>\n<p>Isso produz um link clic\u00e1vel.<\/p>\n<figure id=\"attachment_131366\" aria-describedby=\"caption-attachment-131366\" style=\"width: 920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131366 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Clickable-link-in-another-GUI.jpg\" alt=\"Link clic\u00e1vel em outra GUI.\" width=\"920\" height=\"592\"><figcaption id=\"caption-attachment-131366\" class=\"wp-caption-text\">Link clic\u00e1vel em outra GUI.<\/figcaption><\/figure>\n<h2>Como fazer com que os links abram em uma nova aba<\/h2>\n<p>Como discutimos anteriormente, o WordPress e outras GUIs oferecem op\u00e7\u00f5es adicionais de personaliza\u00e7\u00e3o para links clic\u00e1veis, como for\u00e7ar um link a abrir em uma aba diferente.<\/p>\n<p>Como voc\u00ea pode fazer isso? Vamos dar uma olhada.<\/p>\n<h3>Abrir o link em uma nova aba usando o editor cl\u00e1ssico do WordPress<\/h3>\n<p>Quando voc\u00ea tiver um link clic\u00e1vel no editor cl\u00e1ssico do WordPress, selecione o bot\u00e3o <strong>Link Options <\/strong>(Op\u00e7\u00f5es de link).<\/p>\n<figure id=\"attachment_151506\" aria-describedby=\"caption-attachment-151506\" style=\"width: 1078px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151506 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/link-options-button.jpeg\" alt=\"Op\u00e7\u00f5es de link.\" width=\"1078\" height=\"558\"><figcaption id=\"caption-attachment-151506\" class=\"wp-caption-text\">Op\u00e7\u00f5es de link.<\/figcaption><\/figure>\n<p><img class=\"size-full wp-image-13&lt;span id=\">Marque a caixa <strong>Open Link In A New Tab <\/strong>(Abrir o link em uma nova aba).<\/p>\n<p>Em seguida clique no bot\u00e3o <strong>Update <\/strong>(Atualizar).<\/p>\n<figure id=\"attachment_131368\" aria-describedby=\"caption-attachment-131368\" style=\"width: 974px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131368 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Open-link-in-new-tab.jpg\" alt=\"Abrir link em uma nova aba.\" width=\"974\" height=\"788\"><figcaption id=\"caption-attachment-131368\" class=\"wp-caption-text\">Abrir link em uma nova aba.<\/figcaption><\/figure>\n<h3>Abrir link em uma nova aba usando o editor de blocos do WordPress<\/h3>\n<p>Supondo que voc\u00ea j\u00e1 tenha adicionado um link no editor de blocos do WordPress, clicar no link abrir\u00e1 uma visualiza\u00e7\u00e3o pop-up do conte\u00fado no destino.<\/p>\n<p>O bot\u00e3o <strong>Edit<\/strong> fornece acesso a mais configura\u00e7\u00f5es (incluindo a op\u00e7\u00e3o <strong>Open In New Tab<\/strong>), mas \u00e9 mais f\u00e1cil ativar o bot\u00e3o <strong>Open In New Tab <\/strong>(Abrir em nova aba) na parte inferior da janela pop-up.<\/p>\n<figure id=\"attachment_131369\" aria-describedby=\"caption-attachment-131369\" style=\"width: 902px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131369 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Open-in-new-tab-switch.jpg\" alt=\"Op\u00e7\u00e3o Open In New Tab.\" width=\"902\" height=\"564\"><figcaption id=\"caption-attachment-131369\" class=\"wp-caption-text\">Op\u00e7\u00e3o Open In New Tab.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>O editor de blocos do WordPress adiciona automaticamente um atributo rel=&#8221;noreferrer noopener&#8221; quando voc\u00ea ativa a op\u00e7\u00e3o Open In New Tab, adicionando seguran\u00e7a extra ao seu link.<\/p>\n<\/aside>\n\n<h3><strong>Abrir link em nova aba usando HTML<\/strong><\/h3>\n<p>No editor de texto do WordPress, no editor de c\u00f3digo do WordPress ou em um editor HTML geral, voc\u00ea pode usar o seguinte c\u00f3digo para fazer com que o link clic\u00e1vel seja aberto em uma nova aba:<\/p>\n<pre><code class=\"language-html\">&lt;a href=\"https:\/\/www.example.com\" target=\"_blank\" rel=\"noreferrer noopener\"&gt;Link Text&lt;\/a&gt;<\/code><\/pre>\n<ol>\n<li>Substitua &#8220;https:\/\/www.example.com&#8221; pela URL de destino que voc\u00ea deseja<\/li>\n<li>Substitua &#8220;Link Text&#8221; pelo texto que voc\u00ea deseja vincular.<\/li>\n<li>O atributo <em>target=&#8221;_blank&#8221;<\/em> \u00e9 o segmento de c\u00f3digo que realmente abre o link em uma nova aba. \u00c9 a \u00fanica parte que \u00e9 realmente necess\u00e1ria para essa fun\u00e7\u00e3o simples.<\/li>\n<li>\u00c9 altamente recomend\u00e1vel que voc\u00ea adicione os atributos e valores <em>rel=&#8221;noreferrer noopener&#8221;<\/em> para bloquear problemas comuns de seguran\u00e7a ao abrir links em novas abas. No entanto, \u00e9 totalmente poss\u00edvel deix\u00e1-los de fora do c\u00f3digo e ainda assim fazer com que o link seja aberto em uma nova aba.<\/li>\n<\/ol>\n<p>Ap\u00f3s a publica\u00e7\u00e3o, o link ter\u00e1 exatamente a mesma apar\u00eancia, mas, quando clicado, a URL de destino ser\u00e1 aberta em uma nova aba.<\/p>\n<figure id=\"attachment_131370\" aria-describedby=\"caption-attachment-131370\" style=\"width: 937px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131370 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/A-link-opening-its-target-in-a-new-tab.jpg\" alt=\"Um link que abre seu destino em uma nova aba.\" width=\"937\" height=\"372\"><figcaption id=\"caption-attachment-131370\" class=\"wp-caption-text\">Um link que abre seu destino em uma nova aba.<\/figcaption><\/figure>\n<h2>Como adicionar nofollow a um hiperlink<\/h2>\n<p>O valor HTML <em>nofollow<\/em> informa aos mecanismos de pesquisa que devem ignorar um link clic\u00e1vel e impede que <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-seo\/\">o cr\u00e9dito do mecanismo de pesquisa<\/a> (&#8220;link juice&#8221;) seja transferido para o site de destino. O principal objetivo do <em>nofollow<\/em> \u00e9 reduzir os links de spam, mas os criadores de conte\u00fado o utilizam para links pagos, coment\u00e1rios, conte\u00fado gerado pelo usu\u00e1rio, incorpora\u00e7\u00f5es ou sempre que voc\u00ea preferir n\u00e3o ser visto como endossante de um site para o qual criou um link.<\/p>\n<p>O WordPress n\u00e3o tem uma maneira integrada de adicionar um link <em>nofollow<\/em>, mas voc\u00ea pode fazer isso acessando o HTML.<\/p>\n<p>O c\u00f3digo a seguir reflete um link b\u00e1sico com um valor <em>nofollow<\/em>:<\/p>\n<pre><code class=\"language-html\">&lt;a href=\"https:\/\/www.example.com\" rel=\"nofollow\"&gt;The Link Text.&lt;\/a&gt;<\/code><\/pre>\n<figure id=\"attachment_131371\" aria-describedby=\"caption-attachment-131371\" style=\"width: 1162px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131371 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/HTML-link-code-with-nofollow.jpg\" alt=\"C\u00f3digo de link HTML com nofollow.\" width=\"1162\" height=\"367\"><figcaption id=\"caption-attachment-131371\" class=\"wp-caption-text\">C\u00f3digo de link HTML com nofollow.<\/figcaption><\/figure>\n<p>O que voc\u00ea est\u00e1 vendo:<\/p>\n<ol>\n<li>Substitua o texto &#8220;https:\/\/www.example.com&#8221; pela URL de destino que voc\u00ea deseja.<\/li>\n<li>Substitua a parte &#8220;The Link Text&#8221; por qualquer texto de link que voc\u00ea desejar.<\/li>\n<li>Use o atributo e o valor <em>rel=&#8221;nofollow&#8221;<\/em> no HTML do link.<\/li>\n<\/ol>\n<p>Quando publicado, ou na visualiza\u00e7\u00e3o Visual, um link <em>nofollow<\/em> n\u00e3o parece diferente de um hiperlink padr\u00e3o; no entanto, a funcionalidade <em>nofollow<\/em> \u00e9 salva no c\u00f3digo de backend.<\/p>\n<figure id=\"attachment_131372\" aria-describedby=\"caption-attachment-131372\" style=\"width: 1165px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131372 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/A-nofollow-link-appears-no-different-on-the-frontend.jpg\" alt=\"Um link nofollow n\u00e3o aparece de forma diferente no frontend.\" width=\"1165\" height=\"378\"><figcaption id=\"caption-attachment-131372\" class=\"wp-caption-text\">Um link nofollow n\u00e3o aparece de forma diferente no frontend.<\/figcaption><\/figure>\n<h2>Como criar links para conte\u00fado existente<\/h2>\n<p>O link para conte\u00fado existente \u00e9 um recurso exclusivo do WordPress, no qual voc\u00ea pode pesquisar artigos e p\u00e1ginas de blog criados anteriormente diretamente no editor do WordPress. Isso elimina a necessidade de voc\u00ea abrir as URLs em outra janela do navegador para copi\u00e1-las e col\u00e1-las em um link clic\u00e1vel.<\/p>\n<h3>Link para conte\u00fado existente no editor cl\u00e1ssico do WordPress<\/h3>\n<p>Para criar um link, voc\u00ea deve destacar o texto desejado e clicar no bot\u00e3o Insert\/Edit link (elo de corrente) no editor. Isso revela um campo pop-up no qual voc\u00ea pode clicar no bot\u00e3o Link options (\u00edcone de engrenagem).<\/p>\n<figure id=\"attachment_131373\" aria-describedby=\"caption-attachment-131373\" style=\"width: 1270px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131373 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Go-to-the-Link-Options-button.jpg\" alt=\"V\u00e1 at\u00e9 o bot\u00e3o Link options.\" width=\"1270\" height=\"576\"><figcaption id=\"caption-attachment-131373\" class=\"wp-caption-text\">V\u00e1 at\u00e9 o bot\u00e3o Link options.<\/figcaption><\/figure>\n<ol>\n<li>V\u00e1 para a se\u00e7\u00e3o chamada &#8220;Or link to existing content&#8221; (&#8220;Ou vincule a conte\u00fado existente.&#8221;)<\/li>\n<li>Digite uma palavra-chave na barra de pesquisa e, em seguida, escolha uma p\u00e1gina ou publica\u00e7\u00e3o existente nos resultados.<\/li>\n<li>Observe como o link para o conte\u00fado existente \u00e9 automaticamente colocado no campo URL.<\/li>\n<\/ol>\n<p>Certifique-se de clicar no bot\u00e3o Add Link quando terminar.<\/p>\n<figure id=\"attachment_131374\" aria-describedby=\"caption-attachment-131374\" style=\"width: 1121px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131374 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/The-process-of-finding-existing-content.jpg\" alt=\"O processo de localiza\u00e7\u00e3o de conte\u00fado existente.\" width=\"1121\" height=\"839\"><figcaption id=\"caption-attachment-131374\" class=\"wp-caption-text\">O processo de localiza\u00e7\u00e3o de conte\u00fado existente.<\/figcaption><\/figure>\n<p>Isso produz um link imediato para outro conte\u00fado (tamb\u00e9m conhecido como link interno) no editor.<\/p>\n<figure id=\"attachment_131375\" aria-describedby=\"caption-attachment-131375\" style=\"width: 1021px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131375 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/The-resulting-view-of-an-internal-link.jpg\" alt=\"A visualiza\u00e7\u00e3o resultante de um link interno.\" width=\"1021\" height=\"450\"><figcaption id=\"caption-attachment-131375\" class=\"wp-caption-text\">A visualiza\u00e7\u00e3o resultante de um link interno.<\/figcaption><\/figure>\n<h3>Link para conte\u00fado existente no editor de blocos do WordPress<\/h3>\n<p>Destaque o texto\/imagem que voc\u00ea deseja vincular e, em seguida, clique no bot\u00e3o Link na barra de ferramentas pop-up.<\/p>\n<figure id=\"attachment_131376\" aria-describedby=\"caption-attachment-131376\" style=\"width: 951px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131376 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Click-the-Link-button.jpg\" alt=\"Clique no bot\u00e3o Link.\" width=\"951\" height=\"316\"><figcaption id=\"caption-attachment-131376\" class=\"wp-caption-text\">Clique no bot\u00e3o Link.<\/figcaption><\/figure>\n<p>O campo fornecido tem duas fun\u00e7\u00f5es: voc\u00ea pode colar uma URL ou us\u00e1-lo como uma barra de pesquisa. Portanto, digite qualquer palavra-chave relacionada a algum conte\u00fado que voc\u00ea j\u00e1 tenha para revelar os resultados relacionados.<\/p>\n<p>Quando voc\u00ea ver a p\u00e1gina ou o artigo que deseja, clique nele.<\/p>\n<figure id=\"attachment_131377\" aria-describedby=\"caption-attachment-131377\" style=\"width: 908px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131377 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Search-for-previous-content.jpg\" alt=\"Pesquisando conte\u00fado anterior.\" width=\"908\" height=\"442\"><figcaption id=\"caption-attachment-131377\" class=\"wp-caption-text\">Pesquisando conte\u00fado anterior.<\/figcaption><\/figure>\n<p>Isso cria automaticamente um link para o conte\u00fado existente no editor de blocos do WordPress.<\/p>\n<h2>Como criar links clic\u00e1veis para telefone, SMS e e-mail<\/h2>\n<p>Existem algumas maneiras de adicionar a\u00e7\u00f5es especiais a links clic\u00e1veis, trocando a estrutura de URL padr\u00e3o e criando um link para algo diferente, como:<\/p>\n<ul>\n<li>Um n\u00famero de telefone que abre o aplicativo Telefone.<\/li>\n<li>Um n\u00famero de telefone que abre o aplicativo de mensagens de texto.<\/li>\n<li>Um endere\u00e7o de e-mail que abre automaticamente o aplicativo de e-mail do usu\u00e1rio.<\/li>\n<\/ul>\n<h3>Como criar um link telef\u00f4nico clic\u00e1vel<\/h3>\n<p>Um link de telefone, ou &#8220;clique para ligar&#8221;, adiciona automaticamente um n\u00famero de telefone espec\u00edfico ao aplicativo de telefone do usu\u00e1rio, ou at\u00e9 mesmo a um aplicativo compat\u00edvel com n\u00fameros de telefone, como o Skype.<\/p>\n<p>Em vez de usar uma URL, voc\u00ea deve inserir o c\u00f3digo <em>tel:<\/em> no HTML, seguido de um n\u00famero de telefone, como este:<\/p>\n<pre><code class=\"language-html\">&lt;a href=\"tel:555-555-5555\"&gt;Click To Call&lt;\/a&gt;<\/code><\/pre>\n<p>Observa\u00e7\u00f5es:<\/p>\n<ol>\n<li>Substitua o n\u00famero de telefone pelo n\u00famero para o qual voc\u00ea deseja que os usu\u00e1rios liguem.<\/li>\n<li>Substitua o texto &#8220;Click To Call&#8221; pelo texto do link que voc\u00ea deseja que seja exibido.<\/li>\n<\/ol>\n<figure id=\"attachment_131379\" aria-describedby=\"caption-attachment-131379\" style=\"width: 903px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131379 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/A-tel-link-in-a-visual-editor.jpg\" alt=\"Um link tel: no editor visual.\" width=\"903\" height=\"422\"><figcaption id=\"caption-attachment-131379\" class=\"wp-caption-text\">Um link tel: no editor visual.<\/figcaption><\/figure>\n<p>Em editores visuais, como o editor cl\u00e1ssico do WordPress ou o editor de blocos, basta digitar <em>tel:555-555-5555<\/em> (com o n\u00famero de telefone desejado) no campo URL de um link. Clique em Enter para que ele gere automaticamente o link do telefone para voc\u00ea.<\/p>\n<p>Quando algu\u00e9m clica nesse link, \u00e9 enviado diretamente para o aplicativo mais relevante (o aplicativo de telefone em um smartphone) ou v\u00ea uma solicita\u00e7\u00e3o para abrir um aplicativo como o Skype.<\/p>\n<figure id=\"attachment_131380\" aria-describedby=\"caption-attachment-131380\" style=\"width: 907px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131380 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/The-tel-link-opens-in-Skype-or-other-phone-apps.jpg\" alt=\"O link tel: abre no Skype ou em outros aplicativos de telefone.\" width=\"907\" height=\"272\"><figcaption id=\"caption-attachment-131380\" class=\"wp-caption-text\">O link tel: abre no Skype ou em outros aplicativos de telefone.<\/figcaption><\/figure>\n<h3><strong>Como criar um link de SMS clic\u00e1vel<\/strong><\/h3>\n<p>Os links de SMS clic\u00e1veis funcionam de forma muito semelhante aos links de telefone, mas optam por abrir automaticamente aplicativos de mensagens em vez de aplicativos de chamadas.<\/p>\n<p>Para adicionar um link de SMS, use <em>sms:555-555-5555<\/em> em vez de uma URL.<\/p>\n<pre><code class=\"language-html\">&lt;a href=\"sms:555-555-5555\"&gt;Click To Text&lt;\/a&gt;<\/code><\/pre>\n<p>Observa\u00e7\u00f5es:<\/p>\n<ol>\n<li>Substitua &#8220;555-555-5555&#8221; por um n\u00famero de telefone diferente.<\/li>\n<li>Substitua &#8220;Click To Text&#8221; pelo texto que voc\u00ea quiser para o link.<\/li>\n<\/ol>\n<p>Os editores cl\u00e1ssico e de blocos do WordPress suportam links de SMS quando voc\u00ea coloca o valor <em>sms:555-555-5555<\/em> no campo URL para links.<\/p>\n<p>Como prometido, os usu\u00e1rios veem aplicativos de mensagens quando clicam nesses tipos de links.<\/p>\n<figure id=\"attachment_131382\" aria-describedby=\"caption-attachment-131382\" style=\"width: 928px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131382 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/An-sms-link-opens-in-the-most-relevant-messaging-app.jpg\" alt=\"Um link sms: abre no aplicativo de mensagens mais relevante.\" width=\"928\" height=\"252\"><figcaption id=\"caption-attachment-131382\" class=\"wp-caption-text\">Um link sms: abre no aplicativo de mensagens mais relevante.<\/figcaption><\/figure>\n<h3>Como criar um link de e-mail clic\u00e1vel<\/h3>\n<p>Quando clicados, os hiperlinks de e-mail solicitam automaticamente que o dispositivo do usu\u00e1rio abra o aplicativo de e-mail mais relevante, juntamente com uma se\u00e7\u00e3o Compor que vai para um endere\u00e7o de e-mail espec\u00edfico.<\/p>\n<p>Para isso, adicione o c\u00f3digo <em>mailto:<\/em>, seguido de um endere\u00e7o de e-mail onde voc\u00ea normalmente colocaria uma URL de destino.<\/p>\n<pre><code class=\"language-html\">&lt;a href=\"mailto:mail@example.com\"&gt;Click To Email&lt;\/a&gt;<\/code><\/pre>\n<p>Observa\u00e7\u00f5es:<\/p>\n<ol>\n<li>Substitua o endere\u00e7o de e-mail &#8220;mail@example.com&#8221; pelo endere\u00e7o de e-mail de destino que voc\u00ea deseja.<\/li>\n<li>Substitua o texto &#8220;Click To Email&#8221; pelo texto do link que voc\u00ea deseja que seja exibido.<\/li>\n<\/ol>\n<p>Se voc\u00ea estiver usando o editor cl\u00e1ssico ou de blocos do WordPress, basta digitar o valor <em>mailto:mail@example.com<\/em> no campo URL ao criar um link.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-131383 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/A-mailto-link-in-a-visual-WordPress-editor.jpg\" alt width=\"908\" height=\"360\"><\/p>\n<p>Depois que voc\u00ea publicar o link, os usu\u00e1rios que clicarem nele ser\u00e3o redirecionados para o aplicativo de e-mail, com o endere\u00e7o de e-mail que voc\u00ea especificou inclu\u00eddo no campo To:.<\/p>\n<figure id=\"attachment_131384\" aria-describedby=\"caption-attachment-131384\" style=\"width: 970px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131384 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/mailto-link.jpeg\" alt=\"Os links mailto: abrem aplicativos de e-mail com o endere\u00e7o de e-mail especificado inclu\u00eddo.\" width=\"970\" height=\"392\"><figcaption id=\"caption-attachment-131384\" class=\"wp-caption-text\">Os links mailto: abrem aplicativos de e-mail com o endere\u00e7o de e-mail especificado inclu\u00eddo.<\/figcaption><\/figure>\n\n<h2><strong>Resumo<\/strong><\/h2>\n<p>A adi\u00e7\u00e3o de links clic\u00e1veis (tamb\u00e9m conhecidos como hiperlinks ou apenas links) pode melhorar a interatividade em seu site, levar as pessoas a mais conte\u00fado e fazer refer\u00eancia a informa\u00e7\u00f5es importantes de outros lugares na Internet. Por isso, aprender a criar um link clic\u00e1vel \u00e9 uma das li\u00e7\u00f5es fundamentais do design de sites e da cria\u00e7\u00e3o de conte\u00fado.<\/p>\n<p>Depois de ler este artigo, voc\u00ea dever\u00e1 ser capaz de identificar a apar\u00eancia de um link clic\u00e1vel e saber exatamente como criar um, seja para adicionar um link a textos ou imagens. Tamb\u00e9m \u00e9 bom saber que h\u00e1 v\u00e1rios m\u00e9todos para tornar um link clic\u00e1vel, como o editor cl\u00e1ssico e o editor de blocos do WordPress, HTML ou qualquer interface gr\u00e1fica de usu\u00e1rio dispon\u00edvel.<\/p>\n<p>E, \u00e9 claro, incentivamos voc\u00ea a explorar op\u00e7\u00f5es mais avan\u00e7adas de links clic\u00e1veis, como links para n\u00fameros de telefone, endere\u00e7os de e-mail e aqueles com tags nofollow.<\/p>\n<p>Se voc\u00ea ainda tiver alguma d\u00favida sobre como tornar um link clic\u00e1vel, compartilhe suas perguntas e preocupa\u00e7\u00f5es nos coment\u00e1rios abaixo.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Os links on-line estabelecem a base para a interatividade on-line simples, seja enviando os usu\u00e1rios para p\u00e1ginas da web, documentos para download ou outros aplicativos. E &#8230;<\/p>\n","protected":false},"author":199,"featured_media":59637,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1037,1015],"class_list":["post-59636","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-dicas-wordpress","topic-web-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Como Tornar um Link Clic\u00e1vel - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Saiba como tornar um link clic\u00e1vel em v\u00e1rias situa\u00e7\u00f5es, como no editor cl\u00e1ssico ou no editor de blocos do WordPress, e com links especiais.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/pt\/blog\/tornar-link-clicavel\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Tornar um Link Clic\u00e1vel\" \/>\n<meta property=\"og:description\" content=\"Saiba como tornar um link clic\u00e1vel em v\u00e1rias situa\u00e7\u00f5es, como no editor cl\u00e1ssico ou no editor de blocos do WordPress, e com links especiais.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/tornar-link-clicavel\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-10-21T13:53:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-24T06:07:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/how-to-make-a-link-clickable.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jeremy Holcombe\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Saiba como tornar um link clic\u00e1vel em v\u00e1rias situa\u00e7\u00f5es, como no editor cl\u00e1ssico ou no editor de blocos do WordPress, e com links especiais.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/how-to-make-a-link-clickable.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeremy Holcombe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"39 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/tornar-link-clicavel\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/tornar-link-clicavel\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"Como Tornar um Link Clic\u00e1vel\",\"datePublished\":\"2023-10-21T13:53:37+00:00\",\"dateModified\":\"2023-10-24T06:07:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/tornar-link-clicavel\/\"},\"wordCount\":6183,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/tornar-link-clicavel\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/how-to-make-a-link-clickable.jpg\",\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/tornar-link-clicavel\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/tornar-link-clicavel\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/tornar-link-clicavel\/\",\"name\":\"Como Tornar um Link Clic\u00e1vel - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/tornar-link-clicavel\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/tornar-link-clicavel\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/how-to-make-a-link-clickable.jpg\",\"datePublished\":\"2023-10-21T13:53:37+00:00\",\"dateModified\":\"2023-10-24T06:07:43+00:00\",\"description\":\"Saiba como tornar um link clic\u00e1vel em v\u00e1rias situa\u00e7\u00f5es, como no editor cl\u00e1ssico ou no editor de blocos do WordPress, e com links especiais.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/tornar-link-clicavel\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/tornar-link-clicavel\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/tornar-link-clicavel\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/how-to-make-a-link-clickable.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/how-to-make-a-link-clickable.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/tornar-link-clicavel\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Dicas WordPress\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/dicas-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Como Tornar um Link Clic\u00e1vel\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\",\"name\":\"Jeremy Holcombe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"caption\":\"Jeremy Holcombe\"},\"description\":\"Senior 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.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/jeremyholcombe\/\"],\"url\":\"https:\/\/kinsta.com\/pt\/blog\/author\/jeremyholcombe\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Como Tornar um Link Clic\u00e1vel - Kinsta\u00ae","description":"Saiba como tornar um link clic\u00e1vel em v\u00e1rias situa\u00e7\u00f5es, como no editor cl\u00e1ssico ou no editor de blocos do WordPress, e com links especiais.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/pt\/blog\/tornar-link-clicavel\/","og_locale":"pt_PT","og_type":"article","og_title":"Como Tornar um Link Clic\u00e1vel","og_description":"Saiba como tornar um link clic\u00e1vel em v\u00e1rias situa\u00e7\u00f5es, como no editor cl\u00e1ssico ou no editor de blocos do WordPress, e com links especiais.","og_url":"https:\/\/kinsta.com\/pt\/blog\/tornar-link-clicavel\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2023-10-21T13:53:37+00:00","article_modified_time":"2023-10-24T06:07:43+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/how-to-make-a-link-clickable.jpg","type":"image\/jpeg"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"Saiba como tornar um link clic\u00e1vel em v\u00e1rias situa\u00e7\u00f5es, como no editor cl\u00e1ssico ou no editor de blocos do WordPress, e com links especiais.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/how-to-make-a-link-clickable.jpg","twitter_creator":"@kinsta_pt","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Jeremy Holcombe","Tempo estimado de leitura":"39 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/tornar-link-clicavel\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/tornar-link-clicavel\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"Como Tornar um Link Clic\u00e1vel","datePublished":"2023-10-21T13:53:37+00:00","dateModified":"2023-10-24T06:07:43+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/tornar-link-clicavel\/"},"wordCount":6183,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/tornar-link-clicavel\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/how-to-make-a-link-clickable.jpg","inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/tornar-link-clicavel\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/tornar-link-clicavel\/","url":"https:\/\/kinsta.com\/pt\/blog\/tornar-link-clicavel\/","name":"Como Tornar um Link Clic\u00e1vel - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/tornar-link-clicavel\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/tornar-link-clicavel\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/how-to-make-a-link-clickable.jpg","datePublished":"2023-10-21T13:53:37+00:00","dateModified":"2023-10-24T06:07:43+00:00","description":"Saiba como tornar um link clic\u00e1vel em v\u00e1rias situa\u00e7\u00f5es, como no editor cl\u00e1ssico ou no editor de blocos do WordPress, e com links especiais.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/tornar-link-clicavel\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/tornar-link-clicavel\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/tornar-link-clicavel\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/how-to-make-a-link-clickable.jpg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/how-to-make-a-link-clickable.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/tornar-link-clicavel\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Dicas WordPress","item":"https:\/\/kinsta.com\/pt\/topicos\/dicas-wordpress\/"},{"@type":"ListItem","position":3,"name":"Como Tornar um Link Clic\u00e1vel"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21","name":"Jeremy Holcombe","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","caption":"Jeremy Holcombe"},"description":"Senior 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.","sameAs":["https:\/\/www.linkedin.com\/in\/jeremyholcombe\/"],"url":"https:\/\/kinsta.com\/pt\/blog\/author\/jeremyholcombe\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/59636","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=59636"}],"version-history":[{"count":14,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/59636\/revisions"}],"predecessor-version":[{"id":64250,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/59636\/revisions\/64250"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59636\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59636\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59636\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59636\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59636\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59636\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59636\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59636\/translations\/es"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59636\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/59637"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=59636"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=59636"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=59636"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}