{"id":66147,"date":"2023-05-22T15:50:50","date_gmt":"2023-05-22T13:50:50","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=66147&#038;preview=true&#038;preview_id=66147"},"modified":"2025-01-17T13:56:14","modified_gmt":"2025-01-17T12:56:14","slug":"como-hacer-que-enlace-sea-clicable","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/como-hacer-que-enlace-sea-clicable\/","title":{"rendered":"C\u00f3mo Hacer que un Enlace Sea Clicable"},"content":{"rendered":"<p><!-- Output copied to clipboard! --><\/p>\n<p>Los enlaces online sientan las bases de la interactividad sencilla en l\u00ednea, ya sea enviando a los usuarios a p\u00e1ginas web, <a href=\"https:\/\/kinsta.com\/es\/blog\/gestor-descargas-wordpress\/\">documentos descargables<\/a> u otras aplicaciones.<\/p>\n<p>Lo mejor es que puedes hacer enlaces clicables en muchas aplicaciones, como <a href=\"https:\/\/kinsta.com\/es\/blog\/sitema-de-gestion-de-contenido\/\">sistemas de gesti\u00f3n de contenidos<\/a>, <a href=\"https:\/\/kinsta.com\/es\/blog\/software-de-diseno-de-paginas-web\/\">creadores de sitios web<\/a>, procesadores de texto y <a href=\"https:\/\/kinsta.com\/es\/blog\/proveedores-de-correo-electronico-seguro\/\">clientes de correo electr\u00f3nico<\/a>.<\/p>\n<p>Esta gu\u00eda te explica todo lo que necesitas saber sobre c\u00f3mo hacer que un enlace sea clicable, al tiempo que explica los fundamentos de un enlace y la terminolog\u00eda que puedes encontrar al crearlo<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>Conceptos B\u00e1sicos sobre Hiperv\u00ednculos<\/h2>\n<p>Existen varios t\u00e9rminos para referirse a una parte del contenido -como un texto o una imagen- que ofrece la posibilidad de hacer clic, o la opci\u00f3n interactiva de colocar el cursor sobre el contenido y navegar a otra parte.<\/p>\n<p>Algunos de esos t\u00e9rminos son:<\/p>\n<ul>\n<li>Enlace<\/li>\n<li>Hiperv\u00ednculo\/hiperenlace<\/li>\n<li>Enlace clicable<\/li>\n<\/ul>\n\n<p>T\u00e9cnicamente, todos ellos tienen sus propias definiciones, pero hoy en d\u00eda se utilizan indistintamente.<\/p>\n<p>La capacidad de un usuario para interactuar con el contenido en l\u00ednea se basa en estos hiperv\u00ednculos, en los que los usuarios pueden desplazarse sobre un trozo de texto, una imagen o un bot\u00f3n y hacer clic en \u00e9l, envi\u00e1ndoles as\u00ed a otro contenido (como una p\u00e1gina web externa) o a realizar una acci\u00f3n (como llamar a un n\u00famero de tel\u00e9fono desde tu smartphone).<\/p>\n<p>Una <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-el-html\/\">versi\u00f3n simple codificada en HTML<\/a> de un hiperenlace tiene este aspecto:<\/p>\n<pre><code class=\"language-html\">&lt;a href=\"https:\/\/example.com\/\"&gt;the hyperlink text&lt;\/a&gt;<\/code><\/pre>\n<p>Pero se vuelve m\u00e1s compleja cuando se tienen en cuenta elementos opcionales como los objetivos y los elementos nofollow:<\/p>\n<pre><code class=\"language-html\"> &lt;<span class=\"syntax-all syntax-tag\">a<\/span> <span class=\"syntax-all syntax-entity\">href<\/span>=<span class=\"syntax-all syntax-string\">\"https:\/\/example.com\/\"<\/span> <span class=\"syntax-all syntax-entity\">target<\/span>=<span class=\"syntax-all syntax-string\">\"_blank\"<\/span> <span class=\"syntax-all syntax-entity\">rel<\/span>=<span class=\"syntax-all syntax-string\">\"noreferrer noopener\"<\/span>&gt;the hyperlink text&lt;\/<span class=\"syntax-all syntax-tag\">a<\/span>&gt;<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Para hacer un enlace clicable, debes sustituir \u00abhttps:\/\/example.com\/\u00bb y \u00abel texto del hiperv\u00ednculo\u00bb del ejemplo anterior por tu propia informaci\u00f3n.<\/p>\n<\/aside>\n\n<p>Estos son los elementos que componen un hiperv\u00ednculo:<\/p>\n<ol>\n<li>El contenido<\/li>\n<li><a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-una-url\/\">La URL<\/a> o <a href=\"https:\/\/kinsta.com\/es\/blog\/permalinks-wordpress\/\">enlace permanente<\/a><\/li>\n<li>El objetivo<\/li>\n<li>Nofollow, noreferrer y 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=\"parts of a hyperlink highlighted and labeled\" width=\"1421\" height=\"394\"><figcaption id=\"caption-attachment-131266\" class=\"wp-caption-text\">Los elementos de un hiperv\u00ednculo<\/figcaption><\/figure>\n<p>Sigue leyendo para conocer cada uno de estos elementos y c\u00f3mo funcionan.<\/p>\n<h3>El contenido<\/h3>\n<p>Puedes crear enlaces clicables con dos tipos de contenido:<\/p>\n<ol>\n<li>Texto<\/li>\n<li>Gr\u00e1ficos<\/li>\n<\/ol>\n<p>Esto significa que, siempre que la aplicaci\u00f3n que utilices admita hiperv\u00ednculos, puedes encontrar cualquier l\u00ednea de texto escrito o <a href=\"https:\/\/kinsta.com\/es\/blog\/imagenes-gratis-para-wordpress\/\">imagen dentro de tu contenido<\/a> y convertirla en un enlace clicable.<\/p>\n<h4>Texto con hiperv\u00ednculos<\/h4>\n<p>El texto es una de las opciones de contenido a la hora de hacer enlaces clicables.<\/p>\n<p>Si utilizas un editor como WordPress, puedes resaltar el texto que quieras en la pantalla del editor y, a continuaci\u00f3n, selecciona el bot\u00f3n <strong>Enlazar<\/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=\"a link the the potbelly website\" width=\"938\" height=\"548\"><figcaption id=\"caption-attachment-131257\" class=\"wp-caption-text\">A\u00f1adir un enlace en WordPress<\/figcaption><\/figure>\n<p>Esto muestra un enlace en el frontend, normalmente con texto subrayado y coloreado.<\/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=\"a link for viewing a menu\" width=\"1015\" height=\"437\"><figcaption id=\"caption-attachment-131259\" class=\"wp-caption-text\">Un enlace clicable en el frontend<\/figcaption><\/figure>\n<p>Un hiperv\u00ednculo de texto a veces cambia cuando un usuario pasa el rat\u00f3n por encima, a menudo cambiando de color u ocultando el subrayado para especificar que es un enlace sobre el que se puede hacer clic.<\/p>\n<p>Adem\u00e1s, al pasar el rat\u00f3n por encima de un enlace de texto, los navegadores suelen mostrar una vista previa de la URL enlazada para que veas a d\u00f3nde conduce.<\/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=\"preview link about sandwiches\" width=\"1039\" height=\"588\"><figcaption id=\"caption-attachment-131268\" class=\"wp-caption-text\">Vista previa de la URL de destino<\/figcaption><\/figure>\n<h4>Im\u00e1genes hipervinculadas<\/h4>\n<p>Muchos programas &#8211;<a href=\"https:\/\/kinsta.com\/es\/blog\/version-wordpress\/\">incluido WordPress<\/a>&#8211; te permiten generar hiperv\u00ednculos utilizando medios online, como im\u00e1genes.<\/p>\n<p>Esto funciona seleccionando una imagen en el backend (en lugar de texto) y a\u00f1adiendo la URL deseada mediante la funci\u00f3n <strong>Enlace<\/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=\"sandwich picture on a website that's being linked\" width=\"1028\" height=\"804\"><figcaption id=\"caption-attachment-131269\" class=\"wp-caption-text\">Enlazar una imagen<\/figcaption><\/figure>\n<p>Una vez publicada, la flecha est\u00e1ndar del cursor se convierte en un cursor manual al pasar el rat\u00f3n por encima de la imagen, y los visitantes ver\u00e1n que el navegador presenta una vista previa de la URL enlazada.<\/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=\"arrow pointing to the browser's preview URL on a Potbelly product page\" width=\"1048\" height=\"718\"><figcaption id=\"caption-attachment-131270\" class=\"wp-caption-text\">Una vista previa de la URL de destino<\/figcaption><\/figure>\n<p>Tanto si se trata de un enlace de imagen como de texto, al hacer clic en \u00e9l se activar\u00e1 una acci\u00f3n, como enviar al usuario a una 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=\"a Potbelly sandwich page \" width=\"1372\" height=\"759\"><figcaption id=\"caption-attachment-131271\" class=\"wp-caption-text\">Una p\u00e1gina de destino externa<\/figcaption><\/figure>\n<h4>C\u00f3mo es la codificaci\u00f3n<\/h4>\n<p>El contenido de texto o imagen de un hiperv\u00ednculo est\u00e1 representado por \u00abThe Link Text\u00bb en el ejemplo siguiente:<\/p>\n<pre><code class=\"language-html\">&lt;<span class=\"syntax-all syntax-tag\">a<\/span> <span class=\"syntax-all syntax-entity\">href<\/span>=<span class=\"syntax-all syntax-string\">\"https:\/\/example.com\/\"<\/span> <span class=\"syntax-all syntax-entity\">target<\/span>=<span class=\"syntax-all syntax-string\">\"_blank\"<\/span> <span class=\"syntax-all syntax-entity\">rel<\/span>=<span class=\"syntax-all syntax-string\">\"noreferrer noopener\"<\/span>&gt;The Link Text&lt;\/<span class=\"syntax-all syntax-tag\">a<\/span>&gt;<\/code><\/pre>\n<p>Sin embargo, aprender a hacer un enlace clicable significa que sustituir\u00e1s ese texto por tu propio contenido.<\/p>\n<p>Para un enlace de texto, el texto sobre el que se puede hacer clic va justo antes del corchete de cierre <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=\"link text highlighted within link code\" width=\"1202\" height=\"174\"><figcaption id=\"caption-attachment-131272\" class=\"wp-caption-text\">El texto del enlace<\/figcaption><\/figure>\n<p>Los enlaces de imagen son un poco diferentes, ya que deben incluir la URL de la imagen (mejor si <a href=\"https:\/\/kinsta.com\/es\/blog\/aumentar-tamano-maximo-subida-archivos-wordpress\/\">est\u00e1 subida a la base de datos multimedia de tu sitio web<\/a>).<\/p>\n<p>Esa URL multimedia va entre las comillas de la secci\u00f3n <em>img src=\u00bb\u00bb<\/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\">La URL de origen de la imagen<\/figcaption><\/figure>\n<p>Hay otros elementos que a\u00f1adir con los enlaces de imagen, como:<\/p>\n<ul>\n<li><strong>Una etiqueta alt (<em>alt=\u00bb\u00bb)<\/em>:<\/strong> Texto que describe la imagen para los rastreadores de los motores de b\u00fasqueda y los usuarios con discapacidad visual.<\/li>\n<li><strong>Una clase (<em>class=\u00bb\u00bb)<\/em>:<\/strong> Un nombre codificado para utilizar la imagen en otra parte de tu c\u00f3digo o de los archivos de tu sitio web.<\/li>\n<\/ul>\n<h3>La URL<\/h3>\n<p>Como parte de un hiperv\u00ednculo, la URL sirve como destino o acci\u00f3n que se produce cuando alguien hace clic en el enlace.<\/p>\n<figure id=\"attachment_131275\" aria-describedby=\"caption-attachment-131275\" style=\"width: 1003px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-131275\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/A-URL-within-a-clickable-link.jpg\" alt=\"link pasted into the URL field\" width=\"1003\" height=\"587\"><figcaption id=\"caption-attachment-131275\" class=\"wp-caption-text\">Una URL dentro de un enlace clicable<\/figcaption><\/figure>\n<p>Pero no todos los hiperenlaces tienen URL de <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-cambiar-url\/\">p\u00e1gina web<\/a>. Puedes encontrar que algunos hiperv\u00ednculos tienen la funcionalidad \u00abclic para llamar\u00bb, que permite a los usuarios llamar a un n\u00famero de tel\u00e9fono directamente desde su smartphone con un solo clic.<\/p>\n<figure id=\"attachment_131276\" aria-describedby=\"caption-attachment-131276\" style=\"width: 908px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-131276\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/An-example-of-click-to-call-functionality.jpg\" alt=\"a phone number within the URL field\" width=\"908\" height=\"404\"><figcaption id=\"caption-attachment-131276\" class=\"wp-caption-text\">Un ejemplo de funcionalidad \u00abclic para llamar<\/figcaption><\/figure>\n<p>Otra opci\u00f3n es mostrar un mapa que abra la aplicaci\u00f3n de mapas del usuario en su tel\u00e9fono.<\/p>\n<figure id=\"attachment_131277\" aria-describedby=\"caption-attachment-131277\" style=\"width: 908px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-131277\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/A-link-that-leads-to-a-map-app.jpg\" alt=\"a map link to Google Maps placed inside a URL field\" width=\"908\" height=\"635\"><figcaption id=\"caption-attachment-131277\" class=\"wp-caption-text\">Un enlace que lleva a una aplicaci\u00f3n de mapas<\/figcaption><\/figure>\n<h4>C\u00f3mo es la codificaci\u00f3n<\/h4>\n<p>Las URL de los enlaces clicables se colocan entre las comillas en la parte <em>&lt;a href=\u00bb\u00bb<\/em> del hiperv\u00ednculo.<\/p>\n<p>Por ejemplo, la parte <em>https:\/\/www.example.com<\/em> del siguiente c\u00f3digo de hiperv\u00ednculo es la URL:<\/p>\n<pre><code class=\"language-html\">&lt;<span class=\"syntax-all syntax-tag\">a<\/span> <span class=\"syntax-all syntax-entity\">href<\/span>=<span class=\"syntax-all syntax-string\">\"https:\/\/www.example.com\"<\/span> <span class=\"syntax-all syntax-entity\">target<\/span>=<span class=\"syntax-all syntax-string\">\"_blank\"<\/span> <span class=\"syntax-all syntax-entity\">rel<\/span>=<span class=\"syntax-all syntax-string\">\"noreferrer noopener\"<\/span>&gt;View the entire menu.&lt;\/<span class=\"syntax-all syntax-tag\">a<\/span>&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=\"size-full wp-image-131278\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/The-URL-presented-in-a-hyperlink-HTML-code.jpg\" alt=\"a link with the ahref part highlighted\" width=\"1565\" height=\"208\"><figcaption id=\"caption-attachment-131278\" class=\"wp-caption-text\">La URL presentada en un c\u00f3digo HTML de hiperv\u00ednculo<\/figcaption><\/figure>\n<p>Algunas URL llevan a documentos descargables, mientras que otras requieren una codificaci\u00f3n especial. Por ejemplo, un enlace \u00abhaz clic para llamar\u00bb requiere que coloques <em>tel:<\/em> y un n\u00famero de tel\u00e9fono dentro de las comillas <em>href=\u00bb\u00bb<\/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=\"size-full wp-image-131279\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Example-of-a-tel-click-to-call-link.jpg\" alt=\"link with telephone number within it\" width=\"1407\" height=\"166\"><figcaption id=\"caption-attachment-131279\" class=\"wp-caption-text\">Ejemplo de enlace tel: clic para llamar<\/figcaption><\/figure>\n<h3>Ventana de destino<\/h3>\n<p>La ventana de destino es una parte opcional de un hiperenlace. Especifica si el contenido se abre en la misma pesta\u00f1a del navegador o en una nueva pesta\u00f1a.<\/p>\n<p>En WordPress y en muchas otras aplicaciones, puedes a\u00f1adir una ventana de destino sin tocar ning\u00fan c\u00f3digo utilizando el editor visual.<\/p>\n<p>Simplemente desactiva el conmutador <strong>\u00abAbrir en una<\/strong> <strong>nueva pesta\u00f1a\u00bb<\/strong> si quieres que el enlace se abra en la misma pesta\u00f1a que est\u00e1 viendo el usuario.<\/p>\n<figure id=\"attachment_131280\" aria-describedby=\"caption-attachment-131280\" style=\"width: 992px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-131280\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Open-In-New-Tab-switch-turned-off.jpg\" alt=\"the tab is switched off for a link\" width=\"992\" height=\"388\"><figcaption id=\"caption-attachment-131280\" class=\"wp-caption-text\">Interruptor \u00abAbrir en una nueva pesta\u00f1a\u00bb desactivado<\/figcaption><\/figure>\n<p>Como alternativa, puedes activar el interruptor <strong>\u00abAbrir en una pesta\u00f1a nueva\u00bb<\/strong>, que a\u00f1ade autom\u00e1ticamente un atributo <em>_blank<\/em> a la codificaci\u00f3n del hiperv\u00ednculo y abre la URL en una pesta\u00f1a nueva al hacer clic.<\/p>\n<figure id=\"attachment_131281\" aria-describedby=\"caption-attachment-131281\" style=\"width: 939px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-131281\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Open-In-New-Tab-switch-turned-on.jpg\" alt=\"the switch is now turned on for the menu link\" width=\"939\" height=\"383\"><figcaption id=\"caption-attachment-131281\" class=\"wp-caption-text\">Interruptor \u00abAbrir en nueva pesta\u00f1a\u00bb activado<\/figcaption><\/figure>\n<h4>Aspecto de la codificaci\u00f3n<\/h4>\n<p>Estas opciones se activan al a\u00f1adir y editar el elemento <em>target=\u00bb\u00bb<\/em> en un hiperv\u00ednculo.<\/p>\n<p>Aunque el atributo target tiene varios valores, como <em>_blank<\/em>, <em>_parent<\/em>, <em>_self<\/em> y <em>_top<\/em>, generalmente s\u00f3lo utilizamos el valor <em>_blank<\/em>.<\/p>\n<p>Un hiperv\u00ednculo sin el objetivo <em>_blank<\/em> tiene el siguiente aspecto:<\/p>\n<figure id=\"attachment_131282\" aria-describedby=\"caption-attachment-131282\" style=\"width: 1287px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-131282\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/No-_blank-target-within-a-link.jpg\" alt=\"they have removed the blank target of the link code\" width=\"1287\" height=\"227\"><figcaption id=\"caption-attachment-131282\" class=\"wp-caption-text\">Sin objetivo _blank dentro de un enlace<\/figcaption><\/figure>\n<p>Ver\u00e1s que no se diferencia de un hiperv\u00ednculo normal. Esto se debe a que los hiperv\u00ednculos, por defecto, no se abren en una pesta\u00f1a nueva. Por tanto, no tienes que hacer nada con el enlace a menos que prefieras que se abra en una pesta\u00f1a separada del navegador.<\/p>\n<p>Un hiperv\u00ednculo con el objetivo _blank, que hace que la URL se abra en una pesta\u00f1a aparte, tiene este aspecto:<\/p>\n<pre><code class=\"language-html\">&lt;<span class=\"syntax-all syntax-tag\">a<\/span> <span class=\"syntax-all syntax-entity\">href<\/span>=<span class=\"syntax-all syntax-string\">\"https:\/\/www.example.com\"<\/span> <span class=\"syntax-all syntax-entity\">target<\/span>=<span class=\"syntax-all syntax-string\">\"_blank\"<\/span>&gt;View the entire menu.&lt;\/<span class=\"syntax-all syntax-tag\">a<\/span>&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=\"size-full wp-image-131283\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Clickable-link-with-a-_blank-target.jpg\" alt=\"a blank target has now been added\" width=\"1314\" height=\"161\"><figcaption id=\"caption-attachment-131283\" class=\"wp-caption-text\">Enlace clicable con un objetivo _blank<\/figcaption><\/figure>\n<h3>nofollow, noreferrer y noopener<\/h3>\n<p>Tambi\u00e9n puedes a\u00f1adir elementos adicionales a un enlace clicable, la mayor\u00eda de los cuales a\u00f1aden seguridad o <a href=\"https:\/\/kinsta.com\/es\/blog\/disuadir-los-motores-busqueda-indexacion\/\">encubrimiento frente a los motores de b\u00fasqueda<\/a>:<\/p>\n<ul>\n<li><strong><a href=\"https:\/\/kinsta.com\/es\/blog\/links-nofollow-wordpress\/\">nofollow<\/a>:<\/strong> Un atributo que bloquea el \u00abSEO link juice\u00bb para que no vaya al sitio web enlazado. Esto ayuda a proteger tu sitio web y puede ocultar el enlace a los motores de b\u00fasqueda.<\/li>\n<li><strong>noopener:<\/strong> Es un atributo HTML que se a\u00f1ade autom\u00e1ticamente a los enlaces de WordPress marcados como <strong>\u00abAbrir en una pesta\u00f1a nueva\u00bb<\/strong> Se empareja con <em>noreferrer<\/em> para minimizar ciertos problemas de seguridad al abrir enlaces en pesta\u00f1as nuevas.<\/li>\n<li><strong>noreferrer:<\/strong> A menudo emparejado con <em>noopener<\/em>, el atributo <em>noreferrer<\/em> bloquea toda la informaci\u00f3n de referencia que se pasa al sitio de destino, a\u00f1adiendo seguridad adicional y bloqueando potencialmente los datos de sitios de seguimiento y sitios de ganancias de afiliados.<\/li>\n<\/ul>\n<p>No puedes identificar ninguno de estos atributos de enlace observando un enlace en el sitio activo. En su lugar, debes acceder al c\u00f3digo HTML.<\/p>\n<h4>C\u00f3mo es la codificaci\u00f3n<\/h4>\n<p>Todos estos atributos de enlace van entre comillas en la parte <em>rel=\u00bb\u00bb<\/em> del enlace sobre el que se puede hacer clic.<\/p>\n<p>Es posible incluirlos todos en un enlace.<\/p>\n<figure id=\"attachment_131327\" aria-describedby=\"caption-attachment-131327\" style=\"width: 1168px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-131327\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Link-with-noreferrer-noopener-and-nofollow-all-included.jpg\" alt=\"rel=noreferrer noopener and nofollow highlighted within the link code\" width=\"1168\" height=\"190\"><figcaption id=\"caption-attachment-131327\" class=\"wp-caption-text\">Enlace con noreferrer, noopener y nofollow incluidos<\/figcaption><\/figure>\n<p>Alternativamente, puedes ver que algunos hiperv\u00ednculos s\u00f3lo incluyen un atributo noreferrer <em>noopener<\/em>, o un <em>nofollow<\/em> sin los otros dos. Todo depende de lo que quiera conseguir el creador del enlace.<\/p>\n<h3>Razones por las que podr\u00edas querer hacer clic en un enlace<\/h3>\n<p>Al aprender c\u00f3mo hacer que un enlace sea clicable, es importante comprender todas las razones que hay detr\u00e1s de los hiperv\u00ednculos. De este modo, ser\u00e1s consciente de las caracter\u00edsticas y podr\u00e1s aprovecharlas en el futuro.<\/p>\n<p>\u00c9stas son las principales razones por las que puedes hacer que un enlace sea clicable:<\/p>\n<ol>\n<li><strong>Hiperenlaces generales internos\/externos a URLs:<\/strong> Puedes hacer enlaces de texto que lleven fuera de tu sitio web (como para citar fuentes o reforzar un argumento con un estudio de terceros), o a otras p\u00e1ginas de tu sitio (especialmente \u00fatiles para enviar a los lectores a contenidos relevantes y mantenerlos en tu sitio durante m\u00e1s tiempo).<\/li>\n<li><strong>Enlazar im\u00e1genes:<\/strong> Puedes a\u00f1adir hiperv\u00ednculos a URL, archivos multimedia o p\u00e1ginas adjuntas a cualquier imagen en WordPress, y en muchos otros creadores de sitios web.<\/li>\n<li><strong>Botones de enlace:<\/strong> Los botones CSS ofrecen opciones para a\u00f1adir hiperv\u00ednculos, a\u00f1adiendo una experiencia visual m\u00e1s atractiva a tu enlace clicable en comparaci\u00f3n con el texto plano.<\/li>\n<li><strong>N\u00fameros de tel\u00e9fono:<\/strong> Los hiperv\u00ednculos que llevan a n\u00fameros de tel\u00e9fono abren aplicaciones con funciones de llamada, como la propia aplicaci\u00f3n de tel\u00e9fono de tu dispositivo o Skype.<\/li>\n<li><strong>Direcciones:<\/strong> Los hiperv\u00ednculos a coordenadas espec\u00edficas en Google o Apple Maps significan que el usuario que haga clic en el enlace tendr\u00e1 esa informaci\u00f3n colocada autom\u00e1ticamente en su aplicaci\u00f3n GPS\/mapa para la navegaci\u00f3n.<\/li>\n<li><strong>Direcciones de correo electr\u00f3nico:<\/strong> Esto es similar a los enlaces \u00abhaz clic para llamar\u00bb, pero con direcciones de correo electr\u00f3nico. Activa la aplicaci\u00f3n de correo electr\u00f3nico en un tel\u00e9fono u ordenador, junto con una nueva composici\u00f3n de correo electr\u00f3nico con una direcci\u00f3n de correo electr\u00f3nico espec\u00edfica a\u00f1adida en el campo <strong>To<\/strong>.<\/li>\n<li><strong> <a href=\"https:\/\/kinsta.com\/es\/blog\/enlaces-ancla\/\">Crear enlaces de anclaje<\/a>:<\/strong> Puedes enlazar a contenidos de la misma p\u00e1gina utilizando enlaces de anclaje; son muy populares para crear una tabla de contenidos al principio de una entrada larga de un blog. A veces se llaman \u00abhiperv\u00ednculos marcadores\u00bb<\/li>\n<li><strong>Ofrecer un archivo descargable:<\/strong> WordPress &#8211; y otros creadores de sitios web &#8211; ofrecen herramientas para subir <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-svg\/\">archivos SVG<\/a>, <a href=\"https:\/\/kinsta.com\/es\/blog\/visor-de-pdf\/\">PDF<\/a>, <a href=\"https:\/\/kinsta.com\/es\/blog\/como-subir-un-archivo-html-a-wordpress\/\">HTML<\/a> y muchos otros; incluso puedes <a href=\"https:\/\/kinsta.com\/es\/blog\/subir-archivos-de-carga-masiva-ftp\/\">subir elementos en bloque<\/a>. Despu\u00e9s, es posible crear hiperv\u00ednculos dentro de las entradas\/p\u00e1ginas para que los usuarios descarguen los archivos directamente a sus dispositivos.<\/li>\n<\/ol>\n<p>Ahora que hemos cubierto los tipos de hiperv\u00ednculos y las razones por las que puedes querer generar uno, sigue leyendo para aprender todo sobre c\u00f3mo hacerlo realidad.<\/p>\n<h2>C\u00f3mo Hacer que un Enlace Sea Clicable<\/h2>\n<p>El m\u00e9todo que elijas para crear un enlace depende de tu experiencia. Puedes optar por un m\u00e9todo visual m\u00e1s sencillo o considerar el uso de c\u00f3digo HTML.<\/p>\n<p>Hay cuatro m\u00e9todos principales para hacer que un enlace sea clicable:<\/p>\n<ol>\n<li>Usando el Editor Cl\u00e1sico de WordPress<\/li>\n<li>Usando el <a href=\"https:\/\/kinsta.com\/es\/blog\/deshabilitar-gutenberg-wordpress-editor\/\">Editor de Bloques de WordPress (Gutenberg)<\/a><\/li>\n<li>Usando HTML<\/li>\n<li>Usando cualquier Interfaz Gr\u00e1fica de Usuario (GUI)<\/li>\n<\/ol>\n<p>Ten en cuenta que todos estos m\u00e9todos funcionan de forma similar para las entradas y p\u00e1ginas de WordPress. Estas gu\u00edas (en particular el M\u00e9todo 4) son \u00fatiles tambi\u00e9n para otras aplicaciones\/constructores de sitios web, pero alguna terminolog\u00eda\/funcionalidad puede variar.<\/p>\n<h3>M\u00e9todo 1: Usar el editor cl\u00e1sico de WordPress<\/h3>\n<p>Si est\u00e1s trabajando con el Editor Cl\u00e1sico de WordPress, la forma m\u00e1s sencilla de hacer un enlace clicable en una entrada o p\u00e1gina es a trav\u00e9s de la pesta\u00f1a Editor <strong>visual<\/strong>.<\/p>\n<p>Para ello, ve a la secci\u00f3n <strong>Entradas<\/strong> o <strong>P\u00e1ginas<\/strong> de tu panel de control de WordPress, y selecciona una p\u00e1gina o entrada individual que quieras editar, utilizando la pesta\u00f1a <strong>Visual<\/strong>.<\/p>\n<h4>Paso 1: Resalta el texto en el que quieres hacer clic<\/h4>\n<p>Para un enlace de texto, lo mejor es que ya tengas el texto escrito en el editor <strong>Visual<\/strong>. A continuaci\u00f3n, utiliza el cursor para resaltar la cadena 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=\"size-full wp-image-131328\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Highlight-some-text.jpg\" alt=\"highlighting a section of text in the WordPress editor\" width=\"1098\" height=\"837\"><figcaption id=\"caption-attachment-131328\" class=\"wp-caption-text\">Resalta el texto<\/figcaption><\/figure>\n<p><strong>Si vas a convertir una imagen en un enlace clicable:<\/strong><\/p>\n<p>Selecciona la imagen para que puedas ver una barra de herramientas del editor y un contorno alrededor de la imagen.<\/p>\n<figure id=\"attachment_131329\" aria-describedby=\"caption-attachment-131329\" style=\"width: 1081px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-131329\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Select-the-image.jpg\" alt=\"In the WordPress editor clicking and selecting an image\" width=\"1081\" height=\"835\"><figcaption id=\"caption-attachment-131329\" class=\"wp-caption-text\">Selecciona la imagen<\/figcaption><\/figure>\n<h4>Paso 2: Haz clic en el bot\u00f3n Insertar\/Editar enlace<\/h4>\n<p>Con el texto a\u00fan resaltado, despl\u00e1zate sobre el bot\u00f3n<strong> Insertar\/Editar<\/strong> <strong>un enlace<\/strong> de la barra de herramientas del Editor Visual. El icono del bot\u00f3n parece un eslab\u00f3n.<\/p>\n<figure id=\"attachment_131331\" aria-describedby=\"caption-attachment-131331\" style=\"width: 1092px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-131331\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Edit-Link-button.jpg\" alt=\"text highlighted and clicking the Insert Edit link button in WordPress\" width=\"1092\" height=\"545\"><figcaption id=\"caption-attachment-131331\" class=\"wp-caption-text\">Haz clic en el bot\u00f3n Insertar\/Editar enlace<\/figcaption><\/figure>\n<p><strong>Si vas a convertir una imagen en un enlace en el que se puede hacer clic:<\/strong><\/p>\n<p>Con la imagen a\u00fan seleccionada, haz clic en el bot\u00f3n<strong> Insertar\/Editar<\/strong> <strong>un enlace<\/strong> (el que parece un eslab\u00f3n).<\/p>\n<figure id=\"attachment_131335\" aria-describedby=\"caption-attachment-131335\" style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-131335\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Choose-the-Edit-Button.jpg\" alt=\"WordPress post where we click the Edit button to link an image\" width=\"1024\" height=\"678\"><figcaption id=\"caption-attachment-131335\" class=\"wp-caption-text\">Elige el bot\u00f3n Editar<\/figcaption><\/figure>\n<h4>Paso 3: Pega una URL<\/h4>\n<p>Aparecer\u00e1 un campo URL vac\u00edo. Copia <strong>(Comando + C, o Ctrl + C)<\/strong> la URL del enlace deseado en el portapapeles de tu dispositivo. Este enlace puede ser una URL externa que hayas encontrado en otro lugar de Internet o una URL de tu propio sitio web.<\/p>\n<p>Una vez copiado, p\u00e9galo <strong>(Comando + V, o Ctrl +<\/strong> <strong>V)<\/strong> en el 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=\"size-full wp-image-131334\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Paste-in-a-URL.jpg\" alt=\"WordPress editor where we paste a URL into the field\" width=\"1086\" height=\"630\"><figcaption id=\"caption-attachment-131334\" class=\"wp-caption-text\">Pegar una URL<\/figcaption><\/figure>\n<p><strong>Si vas a convertir una imagen en un enlace clicable:<\/strong><\/p>\n<p>Pega la URL deseada en el campo revelado y haz clic en el bot\u00f3n <strong>Aplicar<\/strong> para activar el enlace.<\/p>\n<figure id=\"attachment_131333\" aria-describedby=\"caption-attachment-131333\" style=\"width: 1092px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-131333\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Insert-the-link-and-click-the-Apply-button-1.jpg\" alt=\"WordPress post editor with an image, clicking the insert edit link button and\" width=\"1092\" height=\"837\"><figcaption id=\"caption-attachment-131333\" class=\"wp-caption-text\">Inserta el enlace y haz clic en el bot\u00f3n Aplicar<\/figcaption><\/figure>\n<h4>Paso 4: Aplicar el enlace<\/h4>\n<p>Haz clic en el bot\u00f3n <strong>Aplicar<\/strong> para activar el enlace y hacer que se pueda hacer clic en el texto.<\/p>\n<figure id=\"attachment_131336\" aria-describedby=\"caption-attachment-131336\" style=\"width: 1080px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-131336\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Click-the-Apply-button.jpg\" alt=\"highlighted text in WordPress, then clicking the blue apply button to add a link\" width=\"1080\" height=\"629\"><figcaption id=\"caption-attachment-131336\" class=\"wp-caption-text\">Haz clic en el bot\u00f3n Aplicar<\/figcaption><\/figure>\n<p>Ahora deber\u00edas ver la parte del hiperv\u00ednculo de tu texto subrayada, y potencialmente en un color 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=\"size-full wp-image-131337\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/The-resulting-link.jpg\" alt=\"A link that's underlined to show that it's clickable in the WordPress backend\" width=\"1084\" height=\"475\"><figcaption id=\"caption-attachment-131337\" class=\"wp-caption-text\">El enlace resultante<\/figcaption><\/figure>\n<p>Si haces clic en el hiperv\u00ednculo en tu editor, aparecer\u00e1 un enlace activo para probar, junto con herramientas de edici\u00f3n por si quieres cambiar el hiperv\u00ednculo.<\/p>\n<p><img class=\"size-full wp-image-1313&lt;span id=\"><\/p>\n<h4>Opciones adicionales<\/h4>\n<p>Cubriremos enlaces clicables m\u00e1s avanzados en las siguientes secciones, pero vale la pena se\u00f1alar que cada enlace que crees en el editor cl\u00e1sico de WordPress tiene un bot\u00f3n de <strong>Opciones de<\/strong> <strong>enlace<\/strong> para ajustes adicionales.<\/p>\n<figure id=\"attachment_138643\" aria-describedby=\"caption-attachment-138643\" style=\"width: 1078px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-138643\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/11\/link-for-options.jpeg\" alt=\"selecting the link options tool\" width=\"1078\" height=\"558\"><figcaption id=\"caption-attachment-138643\" class=\"wp-caption-text\">Haz clic en el bot\u00f3n Opciones de enlace<\/figcaption><\/figure>\n<p>Aqu\u00ed puedes<\/p>\n<ul>\n<li>Ajustar la URL<\/li>\n<li>Cambiar el texto del enlace<\/li>\n<li>Abrir el enlace en una nueva pesta\u00f1a<\/li>\n<li>Buscar y enlazar a contenido existente en tu sitio<\/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=\"size-full wp-image-131340\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/More-options.jpg\" alt=\"popup window with URL, Link Text, and Search fields\" width=\"1034\" height=\"786\"><figcaption id=\"caption-attachment-131340\" class=\"wp-caption-text\">M\u00e1s opciones<\/figcaption><\/figure>\n<p><strong>Si vas a convertir una imagen en un enlace clicable:<\/strong><\/p>\n<p>El editor cl\u00e1sico de WordPress proporciona una forma secundaria de hacer que las im\u00e1genes sean clicables. Para ello, selecciona la imagen y, a continuaci\u00f3n, elige el bot\u00f3n <strong>Editar<\/strong> (que parece un l\u00e1piz) en la barra de herramientas emergente.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-131341\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Choose-the-Edit-Button-1.jpg\" alt=\"image selected in WordPress and clicking the Edit button\" width=\"1024\" height=\"678\"><\/p>\n<p>Despl\u00e1zate hasta el campo <strong>Enlazado<\/strong>\u00a0<strong>a<\/strong>, que te permite enlazar con una <strong>URL personalizada<\/strong>. S\u00f3lo tienes que pegar la URL deseada en el campo situado debajo y hacer clic en <strong>Actualizar<\/strong>.<\/p>\n<figure id=\"attachment_131342\" aria-describedby=\"caption-attachment-131342\" style=\"width: 1078px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-131342\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Find-and-edit-the-Link-To-field.jpg\" alt=\"new popup window with the Link To field available at the bottom\" width=\"1078\" height=\"884\"><figcaption id=\"caption-attachment-131342\" class=\"wp-caption-text\">Busca y edita el campo Enlace a<\/figcaption><\/figure>\n<p>Tambi\u00e9n puedes seleccionar el men\u00fa desplegable <strong>Enlazado<\/strong> <strong>a<\/strong> para hacer un hiperv\u00ednculo a:<\/p>\n<ul>\n<li>Archivos multimedia<\/li>\n<li>P\u00e1ginas adjuntas<\/li>\n<li>URL personalizadas<\/li>\n<li>Ninguno<\/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=\"size-full wp-image-131343\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Choose-different-linking-options.jpg\" alt=\"dropdown menu from the Link To field for adding different linking options like attachment page and custom URL\" width=\"1078\" height=\"529\"><figcaption id=\"caption-attachment-131343\" class=\"wp-caption-text\">Elige diferentes opciones de enlace<\/figcaption><\/figure>\n<h3>M\u00e9todo 2: Usar el editor de bloques de WordPress (Gutenberg)<\/h3>\n<p>Los hiperv\u00ednculos funcionan igual tanto en las entradas como en las p\u00e1ginas <a href=\"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/\">del Editor de bloques de WordPress<\/a>.<\/p>\n<p>Para empezar, ve a la secci\u00f3n <strong>Entradas<\/strong> o <strong>P\u00e1ginas<\/strong> de tu panel de control de WordPress. Selecciona una entrada o p\u00e1gina individual que quieras editar y, a continuaci\u00f3n, sigue los pasos que se indican a continuaci\u00f3n.<\/p>\n<h4>Paso 1: Resalta alg\u00fan texto<\/h4>\n<p>Escribe algo de texto en el editor. Con el cursor, resalta la parte del texto en la que quieras hacer clic. En la barra de herramientas emergente, haz clic en el bot\u00f3n <strong>Enlace<\/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=\"size-full wp-image-131344\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Highlight-text-and-click-the-Link-button.jpg\" alt=\"in WordPress highlighting text and clicking the Link button for the visual editor\" width=\"1043\" height=\"424\"><figcaption id=\"caption-attachment-131344\" class=\"wp-caption-text\">Resalta el texto y haz clic en el bot\u00f3n Enlazar<\/figcaption><\/figure>\n<p><strong>Si vas a convertir una imagen en un enlace clicable:<\/strong><\/p>\n<p>Para hacer que una imagen sea clicable en el editor de bloques de WordPress hay que a\u00f1adir una imagen al editor.<\/p>\n<p>Para ello, haz clic en el bot\u00f3n <strong>A\u00f1adir<\/strong> <strong>bloque<\/strong> y selecciona el bloque <strong>Imagen<\/strong>. Sube la imagen que quieras enlazar.<\/p>\n<div class=\"mceTemp\">\n<dl id=\"urn:enhancement-cb85b45a-ab00-4574-bc15-2d32c99fad0c\" class=\"textannotation selected\">\n<dt class=\"wp-caption-dt\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-131345\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Add-an-image-block.jpg\" alt=\"in WordPress post, there's a block + button for click, then you can search for the Image block\" width=\"1044\" height=\"767\"><\/dt>\n<dd class=\"wp-caption-dd\">A\u00f1adir un bloque de imagen<\/dd>\n<\/dl>\n<\/div>\n<p>Haz clic en la imagen para que quede resaltada\/seleccionada y, a continuaci\u00f3n, selecciona el bot\u00f3n <strong>Insertar<\/strong> <strong>enlace<\/strong> en la ventana emergente de la barra de herramientas.<\/p>\n<figure id=\"attachment_131346\" aria-describedby=\"caption-attachment-131346\" style=\"width: 953px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-131346\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Add-an-image-block-1.jpg\" alt=\"clicking the image and clicking the Insert Link button, which looks like a link icon\" width=\"953\" height=\"774\"><figcaption id=\"caption-attachment-131346\" class=\"wp-caption-text\">Selecciona la imagen e inserta el enlace<\/figcaption><\/figure>\n<h4>Paso 2: Pega la URL y env\u00eda el enlace<\/h4>\n<p>Ver\u00e1s una ventana emergente con un campo en blanco. Pega la URL a la que quieras enlazar y pulsa <strong>Intro<\/strong> en el teclado o el bot\u00f3n <strong>Enviar<\/strong> para activar el enlace.<\/p>\n<figure id=\"attachment_131347\" aria-describedby=\"caption-attachment-131347\" style=\"width: 1046px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-131347\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Insert-a-URL-and-click-Submit.jpg\" alt=\"pasting in a URL and clicking on the Submit button, which looks like a curved arrow\" width=\"1046\" height=\"485\"><figcaption id=\"caption-attachment-131347\" class=\"wp-caption-text\">Inserta una URL y haz clic en Enviar<\/figcaption><\/figure>\n<p>Como resultado, el texto hipervinculado se muestra en un color diferente, y puedes hacer clic en el enlace para revisar una vista previa del contenido y a\u00f1adir ajustes de enlace m\u00e1s avanzados.<\/p>\n<figure id=\"attachment_131348\" aria-describedby=\"caption-attachment-131348\" style=\"width: 1028px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-131348\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/View-a-preview-and-more-advanced-link-settings.jpg\" alt=\"clicking on the new link shows a visual preview with the page's link, featured image, and more information\" width=\"1028\" height=\"611\"><figcaption id=\"caption-attachment-131348\" class=\"wp-caption-text\">Ver una vista previa y m\u00e1s ajustes avanzados del enlace<\/figcaption><\/figure>\n<p><strong>Si vas a convertir una imagen en un enlace clicable:<\/strong><\/p>\n<p>Existen opciones para hipervincular archivos multimedia y p\u00e1ginas adjuntas si lo deseas.<\/p>\n<figure id=\"attachment_131350\" aria-describedby=\"caption-attachment-131350\" style=\"width: 918px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-131350\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Consider-media-file-and-attachment-page-links.jpg\" alt=\"the link popup for images has options to link media files and attachment pages\" width=\"918\" height=\"424\"><figcaption id=\"caption-attachment-131350\" class=\"wp-caption-text\">Considera los enlaces a archivos multimedia y p\u00e1ginas adjuntas<\/figcaption><\/figure>\n<p>Si no, pega una URL en el campo de enlace vac\u00edo. Pulsa el bot\u00f3n <strong>Aplicar<\/strong> para activar el enlace. Tras la publicaci\u00f3n, quien haga clic en la imagen ser\u00e1 conducido al enlace que hayas especificado.<\/p>\n<figure id=\"attachment_131352\" aria-describedby=\"caption-attachment-131352\" style=\"width: 920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-131352\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Click-on-the-Apply-button-after-inserting-a-URL.jpg\" alt=\"the URL is pasted inside the link field, and you can click on Apply\" width=\"920\" height=\"412\"><figcaption id=\"caption-attachment-131352\" class=\"wp-caption-text\">Pulsa el bot\u00f3n Aplicar despu\u00e9s de insertar una URL<\/figcaption><\/figure>\n<p>Para m\u00e1s opciones, haz clic en el <strong>Carrot-Button\u00a0(v)<\/strong>:<\/p>\n<ul>\n<li>Abrir el enlace en una pesta\u00f1a nueva<\/li>\n<li>A\u00f1adir enlace Rel<\/li>\n<li>A\u00f1adir clase CSS de enlace<\/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=\"size-full wp-image-131353\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Click-the-down-carrot-button-for-more-settings.jpg\" alt=\"There's a down carrot button that shows fields to open in new tab, link rel and link CSS class\" width=\"983\" height=\"712\"><figcaption id=\"caption-attachment-131353\" class=\"wp-caption-text\">Haz clic en el\u00a0Carrot-Button\u00a0(v) para ver m\u00e1s opciones<\/figcaption><\/figure>\n<h4>Opciones adicionales<\/h4>\n<p>Profundizaremos en las estructuras avanzadas de los hiperv\u00ednculos en las secciones siguientes, pero debes saber que tienes a tu disposici\u00f3n un bot\u00f3n <strong>Editar<\/strong> si haces clic con el cursor en el enlace reci\u00e9n creado.<\/p>\n<figure id=\"attachment_131355\" aria-describedby=\"caption-attachment-131355\" style=\"width: 983px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-131355\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Click-the-Edit-button.jpg\" alt=\"there's an edit button that looks like a pencil\" width=\"983\" height=\"612\"><figcaption id=\"caption-attachment-131355\" class=\"wp-caption-text\">Haz clic en el bot\u00f3n Editar<\/figcaption><\/figure>\n<p>Esa p\u00e1gina <strong>Editar<\/strong> revela campos para:<\/p>\n<ul>\n<li>Cambiar el texto del enlace<\/li>\n<li>Modificar la URL<\/li>\n<li>Abrir el enlace en una pesta\u00f1a nueva<\/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=\"size-full wp-image-131356\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/The-Edit-page.jpg\" alt=\"the new popup page has fields for text, URL, and to open in new tab\" width=\"918\" height=\"419\"><figcaption id=\"caption-attachment-131356\" class=\"wp-caption-text\">La p\u00e1gina Editar<\/figcaption><\/figure>\n<h4>Otros enlaces clicables que puedes hacer en el editor de bloques<\/h4>\n<p>El editor de bloques de WordPress ampl\u00eda las opciones habituales de enlace disponibles. De hecho, docenas de bloques incorporados permiten alg\u00fan tipo de estructura de enlace clicable, incluyendo:<\/p>\n<ul>\n<li><strong>Botones: <\/strong>Una forma elegante de enlazar contenido en comparaci\u00f3n con los simples enlaces de texto.<\/li>\n<li><strong style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">Archivos: <\/strong>Sube archivos r\u00e1pidamente e incluye un bot\u00f3n para que los usuarios hagan clic y los descarguen.<\/li>\n<li><strong>Iconos sociales:<\/strong> Inserta iconos sociales con enlaces clicables.<\/li>\n<li><strong>Navegaci\u00f3n:<\/strong> Coloca botones de navegaci\u00f3n en cualquier parte de tu sitio con enlaces clicables.<\/li>\n<li><strong>Leer M\u00e1s:<\/strong> Se puede utilizar para acortar tu contenido y proporcionar un enlace a la versi\u00f3n m\u00e1s ampliada.<\/li>\n<li><strong>Entrar\/Salir:<\/strong> A\u00f1ade un enlace r\u00e1pido para que los usuarios inicien sesi\u00f3n en tu sitio.<\/li>\n<li><strong>Siguiente entrada:<\/strong> A\u00f1ade un enlace\/bot\u00f3n clicable a la siguiente entrada de tu sitio.<\/li>\n<li><strong>Entrada anterior: <\/strong>A\u00f1ade un enlace\/bot\u00f3n en el que se pueda hacer clic para ir a la entrada anterior del blog de tu sitio.\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=\"size-full wp-image-131357\" 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=\"there's a button added, which you can link just like any other text or image\" width=\"952\" height=\"375\"><figcaption id=\"caption-attachment-131357\" class=\"wp-caption-text\">Un bot\u00f3n es otro tipo de enlace clicable disponible en el Editor de Bloques de WordPress<\/figcaption><\/figure>\n<h3>M\u00e9todo 3: Usando HTML<\/h3>\n<p>Hacer que un enlace sea clicable con HTML funciona de la misma manera, independientemente de la interfaz de tu editor.<\/p>\n<p>Puedes editar HTML con:<\/p>\n<p><strong>El panel Texto del Editor cl\u00e1sico de 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=\"size-full wp-image-138641\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/11\/classic-editor-text-panel.jpeg\" alt=\"clicking the text tab\" width=\"940\" height=\"456\"><figcaption id=\"caption-attachment-138641\" class=\"wp-caption-text\">El panel Texto del Editor cl\u00e1sico de WordPress<\/figcaption><\/figure>\n<p><strong>El Editor de C\u00f3digo en el Editor de Bloques de 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=\"size-full wp-image-138642\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/11\/code-editor.jpeg\" alt=\"clicking the code button\" width=\"957\" height=\"556\"><figcaption id=\"caption-attachment-138642\" class=\"wp-caption-text\">El Editor de C\u00f3digo en el Editor de Bloques de WordPress<\/figcaption><\/figure>\n<p><strong>Un editor HTML\/Texto en tu dispositivo<\/strong><\/p>\n<p>Los <a href=\"https:\/\/kinsta.com\/es\/blog\/mejores-editores-texto\/\">editores de texto como Atom, Sublime Text y Coda<\/a> proporcionan la interfaz necesaria para escribir y editar HTML, especialmente para enlaces clicables. Tambi\u00e9n es posible <a href=\"https:\/\/kinsta.com\/es\/blog\/editores-markdown\/\">utilizar 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=\"size-full wp-image-131360\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/The-Atom-text-editor.jpg\" alt=\"black text editor with opened tabs with some code inside\" width=\"1230\" height=\"750\"><figcaption id=\"caption-attachment-131360\" class=\"wp-caption-text\">El editor de texto Atom<\/figcaption><\/figure>\n<p>Despu\u00e9s de trabajar con el editor de texto, puedes:<\/p>\n<ul>\n<li>Subir tus archivos para publicarlos en Internet, <a href=\"https:\/\/kinsta.com\/es\/blog\/ftp-vs-sftp\/\">mediante FTP o SFTP<\/a>. <a href=\"https:\/\/kinsta.com\/es\/blog\/como-usar-filezilla\/\">Recomendamos utilizar FileZilla<\/a> para un proceso m\u00e1s fluido.<\/li>\n<li><a href=\"https:\/\/kinsta.com\/es\/blog\/subir-archivos-de-carga-masiva-ftp\/\">Subir archivos HTML de forma masiva<\/a> al <a href=\"https:\/\/kinsta.com\/es\/blog\/archivos-wordpress\/\">directorio de archivos de WordPress<\/a>.<\/li>\n<li><a href=\"https:\/\/kinsta.com\/es\/blog\/mejores-clientes-ftp\/\">Utilizar uno de los muchos otros clientes FTP<\/a> para subir archivos HTML a WordPress.<\/li>\n<\/ul>\n<p>Cuando encuentres un editor de texto &#8211; y sepas c\u00f3mo vas a subir el HTML a WordPress &#8211; pasa a los pasos siguientes para hacer un enlace clicable con HTML.<\/p>\n<p>Este formato se utiliza para hiperv\u00ednculos b\u00e1sicos en HTML:<\/p>\n<pre><code class=\"language-html\">&lt;a href=\"https:\/\/www.example.com\"&gt;Link Text&lt;\/a&gt;<\/code><\/pre>\n<div class=\"mceTemp\">\n<dl id=\"attach&lt;span id=\" class=\"textannotation selected\">\n<dt class=\"wp-caption-dt\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-131361\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Basic-HTML-link-format.jpg\" alt=\"tex editor in WordPress with code for a link\" width=\"937\" height=\"299\"><\/dt>\n<dd class=\"wp-caption-dd\">Formato b\u00e1sico de enlace HTML<\/dd>\n<\/dl>\n<\/div>\n<p>Notas:<\/p>\n<ol>\n<li>Sustituye \u00abhttps:\/\/www.example.com\u00bb por la URL que desees.<\/li>\n<li>Sustituye \u00abTexto del enlace\u00bb por el texto del enlace que desees.<\/li>\n<\/ol>\n<p>Una vez que tengas listo el enlace, puedes publicar la entrada\/p\u00e1gina, o subir el HTML a tu sitio. Tambi\u00e9n es posible obtener una vista previa visual del enlace cambiando a la pesta\u00f1a <strong>Visual<\/strong> de WordPress.<\/p>\n<p>Una versi\u00f3n publicada de ese enlace HTML muestra el enlace subrayado y a veces en un color diferente. Si pasas el rat\u00f3n por encima de ese enlace, aparecer\u00e1 su destino en la parte inferior del 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\">Enlace en el frontend con la vista previa del navegador<\/figcaption><\/figure>\n<h3>M\u00e9todo 4: Utilizar cualquier Interfaz Gr\u00e1fica de Usuario (GUI)<\/h3>\n<p>Aunque no podemos cubrir todas las GUI imaginables que existen, aprender c\u00f3mo hacer que un enlace sea clicable en algo que no sea WordPress o HTML suele ser similar a lo que acabamos de cubrir.<\/p>\n<p>En general, cada GUI puede utilizar un nombre de bot\u00f3n o icono ligeramente diferente para crear un hiperv\u00ednculo.<\/p>\n<p><strong>Tu proceso general deber\u00eda ser el siguiente<\/strong><\/p>\n<ol>\n<li>Resalta el texto que quieras enlazar.<\/li>\n<li>Haz clic en el icono <strong>Enlace<\/strong> (puede tener un nombre diferente) del editor.<\/li>\n<li>Pega la URL deseada.<\/li>\n<li>Haz clic en el bot\u00f3n <strong>A\u00f1adir<\/strong> <strong>enlace<\/strong> (tambi\u00e9n puede tener un nombre diferente).<\/li>\n<\/ol>\n<p>Como ejemplo b\u00e1sico, un creador de tiendas online como Shopify te permite hacer clic en un enlace en cualquier p\u00e1gina o entrada, resaltando el texto y haciendo clic en el bot\u00f3n <strong>A\u00f1adir<\/strong>\u00a0<strong>enlace<\/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=\"size-full wp-image-131364\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Inserting-a-link-in-an-alternative-GUI.jpg\" alt=\"the Shopify user interface with text being linked\" width=\"958\" height=\"627\"><figcaption id=\"caption-attachment-131364\" class=\"wp-caption-text\">Insertar un enlace en una GUI alternativa<\/figcaption><\/figure>\n<p>Entonces pegar\u00edas la URL de destino y har\u00edas clic en el bot\u00f3n <strong>A\u00f1adir<\/strong><strong>\u00a0enlace<\/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=\"size-full wp-image-131365\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Paste-the-URL-and-click-Insert-Link.jpg\" alt=\"a link has been pasted, opened in a new window and inserted\" width=\"915\" height=\"522\"><figcaption id=\"caption-attachment-131365\" class=\"wp-caption-text\">Pega la URL y pulsa Insertar enlace<\/figcaption><\/figure>\n<p>Eso produce un enlace en el que se puede hacer clic.<\/p>\n<figure id=\"attachment_131366\" aria-describedby=\"caption-attachment-131366\" style=\"width: 920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-131366\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Clickable-link-in-another-GUI.jpg\" alt=\"the underlined link in the Shopify editor\" width=\"920\" height=\"592\"><figcaption id=\"caption-attachment-131366\" class=\"wp-caption-text\">Enlace clicable en otra GUI<\/figcaption><\/figure>\n<h2>C\u00f3mo Hacer que los Enlaces Se Abran en una Pesta\u00f1a Nueva<\/h2>\n<p>Como hemos comentado antes, WordPress y otras GUI ofrecen opciones adicionales de personalizaci\u00f3n para los enlaces clicables, como forzar que un enlace se abra en una pesta\u00f1a diferente.<\/p>\n<p>\u00bfC\u00f3mo puedes hacerlo? Echemos un vistazo.<\/p>\n<h3>Abrir el enlace en una pesta\u00f1a nueva con el editor cl\u00e1sico de WordPress<\/h3>\n<p>Una vez que tengas un enlace sobre el que se puede hacer clic en el Editor cl\u00e1sico de WordPress, elige el bot\u00f3n <strong>Opciones de enlace<\/strong>.<\/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=\"clicking the link options button\" width=\"1078\" height=\"558\"><figcaption id=\"caption-attachment-151506\" class=\"wp-caption-text\">Opciones de enlace<\/figcaption><\/figure>\n<p><img class=\"size-full wp-image-13&lt;span id=\">Marca la casilla <strong>Abrir enlace en una pesta\u00f1a nueva<\/strong>.<\/p>\n<p>A continuaci\u00f3n, haz clic en el bot\u00f3n <strong>Actualizar<\/strong>.<\/p>\n<figure id=\"attachment_131368\" aria-describedby=\"caption-attachment-131368\" style=\"width: 974px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-131368\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Open-link-in-new-tab.jpg\" alt=\"popup window with option to open link in new tab\" width=\"974\" height=\"788\"><figcaption id=\"caption-attachment-131368\" class=\"wp-caption-text\">Abrir enlace en pesta\u00f1a nueva<\/figcaption><\/figure>\n<h3>Abrir enlace en una pesta\u00f1a nueva utilizando el editor de bloques de WordPress<\/h3>\n<p>Suponiendo que ya hayas a\u00f1adido un enlace en el Editor de Bloques de WordPress, al hacer clic en el enlace se abrir\u00e1 una vista previa emergente del contenido de destino.<\/p>\n<p>El bot\u00f3n <strong>Editar<\/strong> proporciona acceso a m\u00e1s ajustes (incluida la opci\u00f3n <strong>Abrir en nueva<\/strong> <strong>pesta\u00f1a<\/strong>), pero es m\u00e1s f\u00e1cil activar el <strong>interruptor Abrir en nueva pesta\u00f1a &gt; justo en la parte inferior de la ventana emergente.<\/strong><\/p>\n<figure id=\"attachment_131369\" aria-describedby=\"caption-attachment-131369\" style=\"width: 902px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-131369\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Open-in-new-tab-switch.jpg\" alt=\"highlighted text with a switch to open in new tab\" width=\"902\" height=\"564\"><figcaption id=\"caption-attachment-131369\" class=\"wp-caption-text\">Interruptor Abrir en nueva pesta\u00f1a<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>El editor de bloques de WordPress a\u00f1ade autom\u00e1ticamente un atributo rel=\u00bbnoreferrer noopener\u00bb cuando activas el interruptor Abrir en pesta\u00f1a nueva, a\u00f1adiendo seguridad extra a tu enlace.<\/p>\n<\/aside>\n\n<h3><strong>Abrir enlace en nueva pesta\u00f1a con HTML<\/strong><\/h3>\n<p>En el editor de texto de WordPress, en el editor de c\u00f3digo de WordPress o en un editor HTML general, puedes utilizar el siguiente c\u00f3digo para hacer que tu enlace clicable se abra en una nueva pesta\u00f1a:<\/p>\n<pre><code class=\"language-html\"><span style=\"font-weight: 400\">&lt;a href=\"https:\/\/www.example.com\" target=\"_blank\" rel=\"noreferrer noopener\"&gt;Link Text&lt;\/a&gt;<\/span><\/code><\/pre>\n<ol>\n<li>Sustituye \u00abhttps:\/\/www.example.com\u00bb por la URL de destino que desees<\/li>\n<li>Sustituye \u00abLink Text\u00bb por el texto que quieras enlazar.<\/li>\n<li>El atributo <em>target=\u00bb_blank<\/em> \u00bb es el segmento de c\u00f3digo que realmente abre el enlace en la nueva pesta\u00f1a. Es la \u00fanica parte realmente necesaria para esa sencilla funci\u00f3n.<\/li>\n<li>Recomendamos encarecidamente a\u00f1adir los atributos y valores <em>rel=\u00bbnoreferrer noopener\u00bb<\/em> para bloquear los problemas de seguridad habituales al abrir enlaces en pesta\u00f1as nuevas. Sin embargo, es totalmente posible dejarlos fuera del c\u00f3digo y que el enlace se abra en una pesta\u00f1a nueva.<\/li>\n<\/ol>\n<p>Tras la publicaci\u00f3n, el enlace tiene exactamente el mismo aspecto; pero, al hacer clic, la URL de destino se abre en una pesta\u00f1a nueva.<\/p>\n<figure id=\"attachment_131370\" aria-describedby=\"caption-attachment-131370\" style=\"width: 937px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-131370\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/A-link-opening-its-target-in-a-new-tab.jpg\" alt=\"frontend web browser with a link that's opening in a new tab\" width=\"937\" height=\"372\"><figcaption id=\"caption-attachment-131370\" class=\"wp-caption-text\">Un enlace que abre su destino en una pesta\u00f1a nueva<\/figcaption><\/figure>\n<h2>C\u00f3mo A\u00f1adir nofollow a un Hiperv\u00ednculo<\/h2>\n<p>El valor HTML <em>nofollow<\/em> indica a los motores de b\u00fasqueda que ignoren un enlace en el que se puede hacer clic, e impide que el <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-seo\/\">cr\u00e9dito de los motores de b\u00fasqueda<\/a> (link juice) pase al sitio web de destino. El objetivo principal de <em>nofollow<\/em> es reducir los enlaces de spam, pero los creadores de contenido lo utilizan para enlaces de pago, comentarios, contenido generado por el usuario, incrustaciones o en cualquier momento en que prefieras que no se considere que respaldas un sitio al que enlazas.<\/p>\n<p>WordPress no tiene una forma integrada de a\u00f1adir un enlace <em>nofollow<\/em>, pero es posible mediante el c\u00f3digo HTML.<\/p>\n<p>El siguiente c\u00f3digo refleja un enlace b\u00e1sico con un valor <em>nofollow<\/em>:<\/p>\n<pre><code class=\"language-html\">&lt;<span id=\"urn:enhancement-901b2eec-50d9-4c67-83b6-ae549253ef5a\" class=\"syntax-all syntax-tag\">a<\/span> <span class=\"syntax-all syntax-entity\">href<\/span>=<span class=\"syntax-all syntax-string\">\"https:\/\/www.example.com\"<\/span> <span class=\"syntax-all syntax-entity\">rel<\/span>=<span class=\"syntax-all syntax-string\">\"nofollow\"<\/span>&gt;The Link Text.&lt;\/<span class=\"syntax-all syntax-tag\">a<\/span>&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=\"size-full wp-image-131371\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/HTML-link-code-with-nofollow.jpg\" alt=\"HTML code within the classic WordPress Text editor\" width=\"1162\" height=\"367\"><figcaption id=\"caption-attachment-131371\" class=\"wp-caption-text\">C\u00f3digo HTML de enlace con nofollow<\/figcaption><\/figure>\n<p>Lo que ves<\/p>\n<ol>\n<li>Sustituye el texto \u00abhttps:\/\/www.example.com\u00bb por la URL de destino que desees.<\/li>\n<li>Sustituye la parte \u00abThe Link Text\u00bb por el texto del enlace que desees.<\/li>\n<li>Utiliza el atributo y el valor <em>rel=\u00bbnofollow<\/em> \u00bb dentro del HTML del enlace.<\/li>\n<\/ol>\n<p>Cuando se publica, o en la vista Visual, un enlace <em>nofollow<\/em> no se ve diferente de un hiperv\u00ednculo est\u00e1ndar; sin embargo, la funcionalidad <em>nofollow<\/em> se guarda en el c\u00f3digo del 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=\"size-full wp-image-131372\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/A-nofollow-link-appears-no-different-on-the-frontend.jpg\" alt=\"a regular underlined link inside the text editor\" width=\"1165\" height=\"378\"><figcaption id=\"caption-attachment-131372\" class=\"wp-caption-text\">Un enlace nofollow no se ve diferente en el frontend<\/figcaption><\/figure>\n<h2>C\u00f3mo Enlazar con Contenido Existente<\/h2>\n<p>Enlazar a contenido existente es una funci\u00f3n exclusiva de WordPress, con la que puedes buscar entradas y p\u00e1ginas de blog creadas anteriormente directamente en el editor de WordPress. Esto elimina la necesidad de abrir sus URL en otra ventana del navegador para copiarlas y pegarlas en un enlace sobre el que se pueda hacer clic.<\/p>\n<h3>Enlazar a contenido existente en el editor cl\u00e1sico de WordPress<\/h3>\n<p>Crea un enlace resaltando el texto deseado y haciendo clic en el bot\u00f3n Insertar\/Editar enlace (enlace en cadena) en el editor. Esto revela un campo emergente, donde puedes hacer clic en el bot\u00f3n Opciones de enlace (icono de engranaje).<\/p>\n<figure id=\"attachment_131373\" aria-describedby=\"caption-attachment-131373\" style=\"width: 1270px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-131373\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Go-to-the-Link-Options-button.jpg\" alt=\"highlighted text and clicking the Link Options tab\" width=\"1270\" height=\"576\"><figcaption id=\"caption-attachment-131373\" class=\"wp-caption-text\">Ir al bot\u00f3n Opciones de enlace<\/figcaption><\/figure>\n<ol>\n<li>Ve a la secci\u00f3n llamada \u00abO enlazar a contenido existente\u00bb<\/li>\n<li>Escribe una palabra clave en la barra de b\u00fasqueda y, a continuaci\u00f3n, elige una p\u00e1gina o entrada existente de los resultados.<\/li>\n<li>Observa c\u00f3mo el enlace al contenido existente se coloca autom\u00e1ticamente en el campo URL.<\/li>\n<\/ol>\n<p>Aseg\u00farate de hacer clic en el bot\u00f3n A\u00f1adir enlace cuando hayas terminado.<\/p>\n<figure id=\"attachment_131374\" aria-describedby=\"caption-attachment-131374\" style=\"width: 1121px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-131374\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/The-process-of-finding-existing-content.jpg\" alt=\"popup window with search section\" width=\"1121\" height=\"839\"><figcaption id=\"caption-attachment-131374\" class=\"wp-caption-text\">El proceso de b\u00fasqueda de contenido existente<\/figcaption><\/figure>\n<p>Eso produce un enlace inmediato a otro contenido (tambi\u00e9n conocido como enlace interno) en el 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=\"size-full wp-image-131375\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/The-resulting-view-of-an-internal-link.jpg\" alt=\"the resulting link that's underlined in the classic editor\" width=\"1021\" height=\"450\"><figcaption id=\"caption-attachment-131375\" class=\"wp-caption-text\">La vista resultante de un enlace interno<\/figcaption><\/figure>\n<h3>Enlazar a contenido existente en el editor de bloques de WordPress<\/h3>\n<p>Resalta el texto\/imagen que quieras enlazar y haz clic en el bot\u00f3n Enlazar de la barra de herramientas emergente.<\/p>\n<figure id=\"attachment_131376\" aria-describedby=\"caption-attachment-131376\" style=\"width: 951px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-131376\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Click-the-Link-button.jpg\" alt=\"highlighted text in WordPress and the link button\" width=\"951\" height=\"316\"><figcaption id=\"caption-attachment-131376\" class=\"wp-caption-text\">Haz clic en el bot\u00f3n Enlazar<\/figcaption><\/figure>\n<p>El campo proporcionado tiene dos funciones: puedes pegar una URL o utilizarlo como barra de b\u00fasqueda. Por tanto, escribe cualquier palabra clave relacionada con alguno de tus contenidos existentes para que aparezcan resultados relacionados.<\/p>\n<p>Una vez que veas la p\u00e1gina o publicaci\u00f3n que deseas, haz clic en ella.<\/p>\n<figure id=\"attachment_131377\" aria-describedby=\"caption-attachment-131377\" style=\"width: 908px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-131377\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/Search-for-previous-content.jpg\" alt=\"typing in a keyword and seeing results for related content\" width=\"908\" height=\"442\"><figcaption id=\"caption-attachment-131377\" class=\"wp-caption-text\">Buscar contenido anterior<\/figcaption><\/figure>\n<p>Eso crea autom\u00e1ticamente un enlace al contenido existente en el Editor de Bloques de WordPress.<\/p>\n<h2>C\u00f3mo Hacer Enlaces Clicables de Tel\u00e9fono, SMS y Correo Electr\u00f3nico<\/h2>\n<p>Hay algunas formas de a\u00f1adir acciones especiales a los enlaces clicables cambiando la estructura est\u00e1ndar de la URL y enlazando a algo diferente, como por ejemplo<\/p>\n<ul>\n<li>Un n\u00famero de tel\u00e9fono que abra la aplicaci\u00f3n Tel\u00e9fono.<\/li>\n<li>Un n\u00famero de tel\u00e9fono que abra la aplicaci\u00f3n de mensajes de texto.<\/li>\n<li>Una direcci\u00f3n de correo electr\u00f3nico que abra autom\u00e1ticamente la aplicaci\u00f3n de correo electr\u00f3nico del usuario.<\/li>\n<\/ul>\n<h3>C\u00f3mo hacer un enlace telef\u00f3nico clicable<\/h3>\n<p>Un \u00abclic para llamar\u00bb o enlace telef\u00f3nico a\u00f1ade autom\u00e1ticamente un n\u00famero de tel\u00e9fono espec\u00edfico a la app Tel\u00e9fono del usuario, o incluso a una app que admita n\u00fameros de tel\u00e9fono, como Skype.<\/p>\n<p>En lugar de utilizar una URL, insertar\u00edas el c\u00f3digo <em>tel:<\/em> en el HTML, seguido de un n\u00famero de tel\u00e9fono, as\u00ed:<\/p>\n<pre><code class=\"language-html\">&lt;<span class=\"syntax-all syntax-tag\">a<\/span> <span class=\"syntax-all syntax-entity\">href<\/span>=<span class=\"syntax-all syntax-string\">\"tel:555-555-5555\"<\/span>&gt;Click To Call&lt;\/<span class=\"syntax-all syntax-tag\">a<\/span>&gt;<\/code><\/pre>\n<p>Notas:<\/p>\n<ol>\n<li>Sustituye el n\u00famero de tel\u00e9fono por el n\u00famero al que quieras que llamen los usuarios.<\/li>\n<li>Sustituye el texto \u00abHaz clic para llamar\u00bb por lo que quieras que muestre el texto del enlace.<\/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=\"pasting a telephone number into the URL field in WordPress\" width=\"903\" height=\"422\"><figcaption id=\"caption-attachment-131379\" class=\"wp-caption-text\">Un enlace tel: en el editor visual<\/figcaption><\/figure>\n<p>En editores visuales como WordPress Block y WordPress Classic, simplemente escribe tel: <em>555-555-5555<\/em> (con el n\u00famero de tel\u00e9fono deseado) en el campo URL para un enlace. Haz clic en Intro para que se genere autom\u00e1ticamente el enlace telef\u00f3nico por ti.<\/p>\n<p>Cuando alguien haga clic en ese enlace, se le enviar\u00e1 directamente a la aplicaci\u00f3n m\u00e1s relevante (la aplicaci\u00f3n de tel\u00e9fono en un smartphone) o ver\u00e1 un mensaje para abrir una aplicaci\u00f3n como 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=\"size-full wp-image-131380\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/The-tel-link-opens-in-Skype-or-other-phone-apps.jpg\" alt=\"browser window that's telling the user to open a phone app\" width=\"907\" height=\"272\"><figcaption id=\"caption-attachment-131380\" class=\"wp-caption-text\">El enlace tel: se abre en Skype o en otras aplicaciones de tel\u00e9fono<\/figcaption><\/figure>\n<h3><strong>C\u00f3mo crear un enlace SMS clicable<\/strong><\/h3>\n<p>Los enlaces SMS clicables funcionan de forma muy parecida a los enlaces telef\u00f3nicos, pero optan por abrir autom\u00e1ticamente las apps de mensajer\u00eda en lugar de las apps de llamadas.<\/p>\n<p>Para a\u00f1adir un enlace SMS, utiliza <em>sms: 555-555-5555<\/em> en lugar de una URL.<\/p>\n<pre><code class=\"language-html\">&lt;<span class=\"syntax-all syntax-tag\">a<\/span> <span class=\"syntax-all syntax-entity\">href<\/span>=<span class=\"syntax-all syntax-string\">\"sms:555-555-5555\"<\/span>&gt;Click To Text&lt;\/<span class=\"syntax-all syntax-tag\">a<\/span>&gt;<\/code><\/pre>\n<p>Notas:<\/p>\n<ol>\n<li>Sustituye \u00ab555-555-5555\u00bb por un n\u00famero de tel\u00e9fono diferente.<\/li>\n<li>Sustituye \u00abClick To Text\u00bb por el texto que quieras para el enlace.<\/li>\n<\/ol>\n<p>Tanto el editor cl\u00e1sico como el de bloqueo de WordPress admiten enlaces SMS cuando pones el valor <em>sms:555-555-5555<\/em> dentro del campo URL para los enlaces.<\/p>\n<p>Como se prometi\u00f3, los usuarios ven las aplicaciones de mensajer\u00eda al hacer clic en este tipo de enlaces.<\/p>\n<figure id=\"attachment_131382\" aria-describedby=\"caption-attachment-131382\" style=\"width: 928px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-131382\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/An-sms-link-opens-in-the-most-relevant-messaging-app.jpg\" alt=\"browser with notification to open the phone number in an SMS app\" width=\"928\" height=\"252\"><figcaption id=\"caption-attachment-131382\" class=\"wp-caption-text\">Un enlace sms: se abre en la app de mensajer\u00eda m\u00e1s relevante<\/figcaption><\/figure>\n<h3>C\u00f3mo hacer un enlace de correo electr\u00f3nico clicable<\/h3>\n<p>Al hacer clic, los hiperv\u00ednculos de correo electr\u00f3nico hacen que el dispositivo del usuario abra autom\u00e1ticamente su aplicaci\u00f3n de correo electr\u00f3nico m\u00e1s relevante, junto con una secci\u00f3n Redactar dirigida a una direcci\u00f3n de correo electr\u00f3nico espec\u00edfica.<\/p>\n<p>Para \u00e9ste, a\u00f1ade el c\u00f3digo <em>mailto:<\/em>, seguido de una direcci\u00f3n de correo electr\u00f3nico, donde normalmente pondr\u00edas una URL de destino.<\/p>\n<pre><code class=\"language-html\">&lt;<span class=\"syntax-all syntax-tag\">a<\/span> <span class=\"syntax-all syntax-entity\">href<\/span>=<span class=\"syntax-all syntax-string\">\"mailto:mail@example.com\"<\/span>&gt;Click To Email&lt;\/<span class=\"syntax-all syntax-tag\">a<\/span>&gt;<\/code><\/pre>\n<p>Notas:<\/p>\n<ol>\n<li>Sustituye la direcci\u00f3n de correo electr\u00f3nico \u00abmail@example.com\u00bb por la direcci\u00f3n de correo electr\u00f3nico de destino que desees.<\/li>\n<li>Sustituye el texto \u00abClick To Email\u00bb por lo que quieras que muestre el texto del enlace.<\/li>\n<\/ol>\n<p>Si utilizas los editores cl\u00e1sicos o en bloque de WordPress, simplemente escribe el valor <em>mailto:mail@example.com<\/em> en el campo URL cuando crees un enlace.<\/p>\n<div class=\"mceTemp\"><strong><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-131383 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/A-mailto-link-in-a-visual-WordPress-editor.jpg\" alt=\"A mailto: link in a visual WordPress editor\" width=\"908\" height=\"360\"><\/strong><\/div>\n<p>Despu\u00e9s de publicar el enlace, los usuarios que hagan clic en \u00e9l ser\u00e1n redirigidos a su aplicaci\u00f3n de correo, con la direcci\u00f3n de correo electr\u00f3nico que hayas especificado incluida en el campo Para:.<\/p>\n<figure id=\"attachment_131384\" aria-describedby=\"caption-attachment-131384\" style=\"width: 970px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-131384\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/mailto-link.jpeg\" alt=\"email client with the email address added to the To field\" width=\"970\" height=\"392\"><figcaption id=\"caption-attachment-131384\" class=\"wp-caption-text\">Los enlaces Mailto: abren las apps de correo electr\u00f3nico con la direcci\u00f3n de correo especificada incluida<\/figcaption><\/figure>\n\n<h2><strong>Resumen<\/strong><\/h2>\n<p>A\u00f1adir enlaces en los que se pueda hacer clic (tambi\u00e9n conocidos como hiperv\u00ednculos, o simplemente enlaces) puede mejorar la interactividad de tu sitio web, llevar a la gente a m\u00e1s contenido y hacer referencia a informaci\u00f3n importante de otros lugares de Internet. Por ello, aprender a hacer un enlace clicable es una de las lecciones fundamentales del dise\u00f1o de sitios web y la creaci\u00f3n de contenidos.<\/p>\n<p>Despu\u00e9s de leer este art\u00edculo, deber\u00edas ser capaz de identificar el aspecto de un enlace clicable y saber exactamente c\u00f3mo hacer uno, ya sea para a\u00f1adir un enlace a texto o a im\u00e1genes. Tambi\u00e9n es bueno saber que existen varios m\u00e9todos para hacer que un enlace sea clicable, como a trav\u00e9s del Editor Cl\u00e1sico de WordPress, el Editor de Bloques, HTML o cualquier interfaz gr\u00e1fica de usuario disponible.<\/p>\n<p>Y, por supuesto, te animamos a que explores opciones de enlaces clicables m\u00e1s avanzadas, como enlaces para n\u00fameros de tel\u00e9fono, direcciones de correo electr\u00f3nico y aquellos con etiquetas nofollow.<\/p>\n<p>Si a\u00fan tienes dudas sobre c\u00f3mo hacer que un enlace sea clicable, comparte tus preguntas e inquietudes en los comentarios a continuaci\u00f3n.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Los enlaces online sientan las bases de la interactividad sencilla en l\u00ednea, ya sea enviando a los usuarios a p\u00e1ginas web, documentos descargables u otras aplicaciones. &#8230;<\/p>\n","protected":false},"author":199,"featured_media":66148,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1356,1334],"class_list":["post-66147","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-consejos-wordpress","topic-diseno-web"],"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>C\u00f3mo Hacer que un Enlace Sea Clicable - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Aprende c\u00f3mo hacer clicable un enlace en varias situaciones: descubre el uso en el editor cl\u00e1sico de WordPress, editor de bloques y enlaces especiales.\" \/>\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\/es\/blog\/como-hacer-que-enlace-sea-clicable\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo Hacer que un Enlace Sea Clicable\" \/>\n<meta property=\"og:description\" content=\"Aprende c\u00f3mo hacer clicable un enlace en varias situaciones: descubre el uso en el editor cl\u00e1sico de WordPress, editor de bloques y enlaces especiales.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/como-hacer-que-enlace-sea-clicable\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-22T13:50:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-17T12:56:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/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=\"Aprende c\u00f3mo hacer clicable un enlace en varias situaciones: descubre el uso en el editor cl\u00e1sico de WordPress, editor de bloques y enlaces especiales.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/how-to-make-a-link-clickable.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeremy Holcombe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"40 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/como-hacer-que-enlace-sea-clicable\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/como-hacer-que-enlace-sea-clicable\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"C\u00f3mo Hacer que un Enlace Sea Clicable\",\"datePublished\":\"2023-05-22T13:50:50+00:00\",\"dateModified\":\"2025-01-17T12:56:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/como-hacer-que-enlace-sea-clicable\/\"},\"wordCount\":6392,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/como-hacer-que-enlace-sea-clicable\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/how-to-make-a-link-clickable.jpg\",\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/como-hacer-que-enlace-sea-clicable\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/como-hacer-que-enlace-sea-clicable\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/como-hacer-que-enlace-sea-clicable\/\",\"name\":\"C\u00f3mo Hacer que un Enlace Sea Clicable - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/como-hacer-que-enlace-sea-clicable\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/como-hacer-que-enlace-sea-clicable\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/how-to-make-a-link-clickable.jpg\",\"datePublished\":\"2023-05-22T13:50:50+00:00\",\"dateModified\":\"2025-01-17T12:56:14+00:00\",\"description\":\"Aprende c\u00f3mo hacer clicable un enlace en varias situaciones: descubre el uso en el editor cl\u00e1sico de WordPress, editor de bloques y enlaces especiales.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/como-hacer-que-enlace-sea-clicable\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/como-hacer-que-enlace-sea-clicable\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/como-hacer-que-enlace-sea-clicable\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/how-to-make-a-link-clickable.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/how-to-make-a-link-clickable.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/como-hacer-que-enlace-sea-clicable\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Consejos WordPress\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/consejos-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"C\u00f3mo Hacer que un Enlace Sea Clicable\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"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\/es\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\",\"name\":\"Jeremy Holcombe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/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\/es\/blog\/author\/jeremyholcombe\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"C\u00f3mo Hacer que un Enlace Sea Clicable - Kinsta\u00ae","description":"Aprende c\u00f3mo hacer clicable un enlace en varias situaciones: descubre el uso en el editor cl\u00e1sico de WordPress, editor de bloques y enlaces especiales.","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\/es\/blog\/como-hacer-que-enlace-sea-clicable\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo Hacer que un Enlace Sea Clicable","og_description":"Aprende c\u00f3mo hacer clicable un enlace en varias situaciones: descubre el uso en el editor cl\u00e1sico de WordPress, editor de bloques y enlaces especiales.","og_url":"https:\/\/kinsta.com\/es\/blog\/como-hacer-que-enlace-sea-clicable\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2023-05-22T13:50:50+00:00","article_modified_time":"2025-01-17T12:56:14+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/how-to-make-a-link-clickable.jpg","type":"image\/jpeg"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"Aprende c\u00f3mo hacer clicable un enlace en varias situaciones: descubre el uso en el editor cl\u00e1sico de WordPress, editor de bloques y enlaces especiales.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/how-to-make-a-link-clickable.jpg","twitter_creator":"@Kinsta_ES","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Jeremy Holcombe","Tiempo de lectura":"40 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/como-hacer-que-enlace-sea-clicable\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/como-hacer-que-enlace-sea-clicable\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"C\u00f3mo Hacer que un Enlace Sea Clicable","datePublished":"2023-05-22T13:50:50+00:00","dateModified":"2025-01-17T12:56:14+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/como-hacer-que-enlace-sea-clicable\/"},"wordCount":6392,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/como-hacer-que-enlace-sea-clicable\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/how-to-make-a-link-clickable.jpg","inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/como-hacer-que-enlace-sea-clicable\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/como-hacer-que-enlace-sea-clicable\/","url":"https:\/\/kinsta.com\/es\/blog\/como-hacer-que-enlace-sea-clicable\/","name":"C\u00f3mo Hacer que un Enlace Sea Clicable - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/como-hacer-que-enlace-sea-clicable\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/como-hacer-que-enlace-sea-clicable\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/how-to-make-a-link-clickable.jpg","datePublished":"2023-05-22T13:50:50+00:00","dateModified":"2025-01-17T12:56:14+00:00","description":"Aprende c\u00f3mo hacer clicable un enlace en varias situaciones: descubre el uso en el editor cl\u00e1sico de WordPress, editor de bloques y enlaces especiales.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/como-hacer-que-enlace-sea-clicable\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/como-hacer-que-enlace-sea-clicable\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/como-hacer-que-enlace-sea-clicable\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/how-to-make-a-link-clickable.jpg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/how-to-make-a-link-clickable.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/como-hacer-que-enlace-sea-clicable\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Consejos WordPress","item":"https:\/\/kinsta.com\/es\/secciones\/consejos-wordpress\/"},{"@type":"ListItem","position":3,"name":"C\u00f3mo Hacer que un Enlace Sea Clicable"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","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\/es\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21","name":"Jeremy Holcombe","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/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\/es\/blog\/author\/jeremyholcombe\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/66147","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=66147"}],"version-history":[{"count":15,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/66147\/revisions"}],"predecessor-version":[{"id":66218,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/66147\/revisions\/66218"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66147\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66147\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66147\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66147\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66147\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66147\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66147\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66147\/translations\/es"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66147\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/66148"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=66147"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=66147"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=66147"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}