La vinculación a recursos externos en las publicaciones y páginas de su sitio web puede parecer un conflicto con sus esfuerzos de optimización de motores de búsqueda. Si desea que los lectores permanezcan en su sitio, no tiene sentido señalarles a otros, ¿o tal vez sí?
La vinculación a sitios web y blogs externos de alta calidad es realmente importante para el SEO de su sitio web y para sus lectores. Primero, es una parte importante de cualquier estrategia de construcción de enlaces. Cuando se vincula a otros sitios de manera coherente y estratégica, es probable que uno de estos propietarios le devuelva el dinero. Estos vínculos de retroceso son cruciales para sus esfuerzos de SEO, ya que son uno de los factores de clasificación más importantes para los principales motores de búsqueda. Por ejemplo, Google clasifica los backlinks entre los ocho factores más importantes.
Los enlaces a recursos externos de alta calidad también son importantes para su estrategia de contenido. No puede cubrir todos los aspectos de un tema en una sola publicación, y no debe intentarlo. En cambio, puede aprovechar la gran cantidad de información disponible en Internet al incluir enlaces externos en su contenido. Esto ayudará a brindar a los lectores la mayor cantidad de información posible que, en última instancia, les brindará una mejor experiencia en su sitio.
Sólo hay una trampa potencial. Si no configura estos enlaces para que se abran en una nueva pestaña o ventana, los lectores serán redirigidos a un sitio o blog externo y es posible que no regresen al suyo. A medida que los lectores pasan menos tiempo en su sitio, su tasa de rebote aumentará, lo que puede afectar negativamente su clasificación en los motores de búsqueda.
Una solución simple es configurar estos enlaces para que se abran en una nueva pestaña o ventana. De esta manera, proporciona a sus lectores recursos adicionales sin distraerlos de la publicación o página que están leyendo.
En esta publicación, cubriremos las diferentes formas de implementar esta función, independientemente del CMS que tenga:
Cómo abrir enlaces en una nueva pestaña o ventana usando HTML
Si está utilizando código para construir su sitio web, o no le importa editar el código creado por el editor WYSIWYG, una forma de asegurarse de que sus enlaces se abran en una nueva pestaña o ventana es ir directamente al código HTML.
A continuación se muestra el código HTML para abrir en una nueva pestaña:
<a href="https://www.hubspot.com/" target="_blank" rel="noopener">Visit HubSpot!</a> Notará el atributo familiar «href» que le dice al navegador a dónde ir. La diferencia es que el atributo «objetivo» se incluye y se establece en «_blank». El atributo «_blank» le dice al navegador que abra el enlace en una nueva ventana o pestaña.
La desventaja de este enfoque es que hay muchos casos de uso en los que los editores web quieren usar la menor cantidad de código posible. Por lo tanto, discutiremos formas de abrir enlaces en una nueva pestaña para muchos CMS populares.
Cómo abrir enlaces en una nueva pestaña en HubSpot
los CMS de HubSpot tiene una manera fácil de establecer enlaces para abrir en una nueva pestaña. Simplemente haga clic en la opción Insertar enlace en la barra de herramientas. Aparecerá una nueva ventana con la opción de marcar la casilla «Abrir este enlace en una nueva ventana».
Al seleccionar este selector, se agregará automáticamente «_blank» en el backend sin la molestia de codificar.
Cómo abrir enlaces externos en una nueva pestaña en WordPress
Con WordPress, tienes varias opciones para lograr este objetivo. Veremos cómo configurar manualmente los enlaces externos para que se abran en una nueva pestaña o ventana en WordPress. A continuación, analizaremos cómo puede usar un código o complemento para automatizar el proceso. Veamos estos diferentes métodos a continuación.
Establecer enlaces manualmente para que se abran en una nueva pestaña (para WordPress)
Puede configurar fácilmente enlaces externos para que se abran en una nueva pestaña en WordPress. En el editor clásico, simplemente inserte un enlace y haga clic en Opciones de enlace para abrir una ventana emergente de enlace de inserción avanzada. Luego marque la casilla «Abrir enlace en una pestaña nueva».
El proceso es casi idéntico en el Editor Gutenberg. solo haces clic Configuración de enlaces y habilite el control deslizante «Abrir en una nueva pestaña».
En ambos editores, el proceso es fácil. El problema es que no escala bien. Puede crear grandes cantidades de contenido y olvidar un enlace aquí o allá. O bien, puede ejecutar un sitio de varios autores y tener problemas para integrar esta mejor práctica en los flujos de trabajo de escritores y autónomos. En ambos casos, se beneficiará de una solución automatizada para configurar enlaces externos para que se abran en una nueva pestaña o ventana.
Veamos cómo puede usar el código para configurar automáticamente los enlaces externos para que se abran en una nueva pestaña o ventana.
Descarga automática de enlaces para abrir en una nueva pestaña (para WordPress)
Puede agregar un fragmento de código al archivo footer.php de su tema para abrir automáticamente enlaces externos en su sitio en una nueva ventana. solo ve a Apariencia > Editor en el tablero de WordPress. Luego haga clic en el archivo footer.php para abrirlo. Desplácese hacia abajo hasta que vea el cuerpo de cierre y las etiquetas HTML.
Copie y pegue el siguiente código delante del cuerpo y las etiquetas de cierre HTML.
<script type="text/javascript">
//<![CDATA
jQuery(document).ready(function($) {
$('a').each(function() {
var a = new RegExp("https://blog.hubspot.com/" + window.location.host + "https://blog.hubspot.com/");
if (!a.test(this.href)) {
$(this).click(function(event) {
event.preventDefault();
event.stopPropagation();
window.open(this.href, '_blank');
});
}
});
});
//]]>
</script>
Después de guardar sus cambios, todos los enlaces externos en sus publicaciones y páginas publicadas se abrirán en una nueva pestaña. Este código también funcionará para nuevas publicaciones y páginas.
Sin embargo, este código no funciona para enlaces internos o enlaces en comentarios o widgets de texto. Si desea que todos los enlaces en cualquier sitio se abran en nuevas pestañas, puede usar un complemento.
Complementos de WordPress para abrir automáticamente enlaces externos en una nueva ventana
Los complementos son la opción más rápida y flexible para configurar enlaces para que se abran en una nueva pestaña o ventana. Veamos las dos opciones a continuación.
Enlaces externos en una nueva ventana/pestaña
Enlaces externos en una nueva ventana/pestaña by WebFactory Ltd es un complemento gratuito de WordPress que configura automáticamente todos los enlaces externos para que se abran en una nueva ventana. Comienza a funcionar tan pronto como se instala y activa.
Hay una página de configuración para activar o desactivar funciones para enlaces específicos si desea tener más control.
Enlaces externos – nofollow, noopener y nueva ventana
Para tener más control sobre la configuración de los enlaces, puede usar Enlaces externos – nofollow, noopener y nueva ventana. Este es otro complemento gratuito de WebFactory Ltd.
Después de instalar y activar este complemento, puede configurar diferentes opciones para enlaces externos e internos en su panel de WordPress. Puede mostrar un icono después de los enlaces externos para indicar a los lectores qué enlaces conducen a otros sitios web. En una publicación publicada puede verse así.
También puede configurar automáticamente todos los enlaces externos en su sitio como «nofollow». Esta etiqueta le dice a los motores de búsqueda que no usen estos enlaces y que los asocien con la clasificación de su sitio. Esto se recomienda para los sitios más nuevos que pueden no recibir muchos enlaces entrantes. ¿Por qué? Porque las páginas que están vinculadas con más frecuencia de lo que se muestran son vistas menos favorable para los motores de búsqueda.
Cómo abrir enlaces en una nueva pestaña en Netlify
Netlify CMS usa el editor Markdown para agregar enlaces a sitios web.
Desafortunadamente, a los usuarios no se les pide que elijan comportarse para el atributo «objetivo» en una ventana emergente o en el editor Markdown. A continuación, tiene dos opciones si desea agregar funcionalidad:
- Configure todos los enlaces para que se abran automáticamente en una nueva pestaña a través de CSS.
- Escriba HTML en Markdown y configure ese HTML para renderizar.
Configurar todos los enlaces para que se abran automáticamente en una nueva pestaña
Este es el código que usará para establecer el atributo de destino de todos los enlaces en «_blank» como la función predeterminada:
{ name: body, label: Body, widget: markdown, options: { linkAttrs: { target: _blank, rel: noreferrer noopener } } Esto se agregará al CSS de su sitio web.
La desventaja de esto es que esta configuración se aplica a todos los enlaces, lo que puede no coincidir con el tipo de comportamiento esperado en su sitio.
Escribir HTML en el entorno de Markdown
Este es el código que usará para representar todo el HTML:
markdownit: { html: true, }, La ventaja es que puede establecer qué enlaces se abren en una nueva pestaña. La desventaja es que tiene que escribir código HTML cada vez, y debe tener cuidado de incluir HTML que no desea representar.
Siguiendo este tutorial, puede configurar de forma manual o automática enlaces externos para que se abran en una nueva pestaña o ventana para cualquier CMS que tenga. Esto ayudará a reducir la tasa de rebote de su sitio web y brindará una mejor experiencia de usuario.
Nota del editor: esta publicación se publicó originalmente en noviembre de 2019 y se actualizó para que esté completa.
