En el contenido de hoy vamos a ver cómo crear enlaces ancla con html en WordPress para mejorar la navegación dentro de un contenido o incluso para enlazar otras páginas en puntos concretos dentro de su contenido.
En el vídeo aprenderás nociones básicas de html (muy básicas, que no te asuste probar) que espero te abran el apetito de más, pero sobre todo veremos cómo hacer la vida más sencilla a nuestro lector.
Además, Google ve con muy buenos ojos este tipo de enlazado interno, así que estarás mejorando también tu SEO.
A modo de ejemplo, te pongo aquí un enlace al código que necesitas para crear un enlace ancla con html y también a la conclusión del contenido de hoy. ¡A que mola!
Fácil ¿no? Ahora, como siempre, vamos a dar algo más de información complementaria para tener un concepto general del asunto.
Contenido mencionado en el vídeo:
Código para crear enlaces ancla con html en WordPress
En el vídeo ya lo hemos visto con un caso práctico y diferentes posibilidades. Pero, para los que estéis buscando directamente el código para crear enlaces ancla os lo dejo por aquí.
Los enlaces ancla constan de dos partes. La palabra o texto que enlaza y el punto destino donde te lleva ese enlazado.
Código para crear un enlace ancla
Lo primero que haremos es crear el enlace para que al pincharlo nos lleve a ese punto concreto. Utilizaremos éste sencillo código html para ello.
<a href="#enlace"> Texto del enlace </a>Código para crear el id del enlace ancla
Los ids tienen que ir siempre dentro de la etiqueta html del elemento destino del enlace. Si éste elemento no tiene una etiqueta html, deberemos crearla. En el vídeo ya te he explicado cómo se envuelve un elemento en una etiqueta html. Aquí te pongo dos ejemplos:
Si vamos a enlazar a un heading, el código quedaría así:
<h2 id="enlace">Este sería el heading de destino</h2>Si vamos a enlazar un elemento que no esté envuelto por una etiqueta html, tendremos que envolverlo nosotros mismos por ejemplo con un <span> y quedaría tal que así:
<span id="enlace">palabra enlazada</span>Ya ves. No tiene ningún misterio crear tus propios enlaces ancla. Pero si lo prefieres hay opciones donde no tienes que crear tú el código. No son tan versátiles como hacerlo manualmente pero te pueden valer.
Plugins para crear tablas de contenido con enlaces ancla
Como de te decía, si puede suponer un problema para tí, o no quieres perder tiempo creando tus propios enlaces ancla con hml, siempre puedes tirar de plugins. De los que he probado, a continuación te pongo los que más me gustan. Eso sí, son exclusivamente para crear tablas de contenidos como las que puedes ver en wikipedia para que te hagas una idea.
Table of content plus
Échale un ojo a su página de plugin. Es el más usado de este tipo y funciona de forma espectacular. Yo mismo lo tengo instalado en este blog. Lo peor es que tiene muchas opciones que seguramente no te hagan falta.
Entre sus opciones podrían destacar, que puedes elegir en qué contenidos aparezcan automáticamente las tablas o si lo prefieres insertarlas con un shortcode allá donde te hagan falta.
Crear enlaces ancla con este plugin es de lo más sencillo y práctico. Te va a encantar.
Veremos a fondo este plugin en un futuro videotip.
f(x)TOC
Una alternativa más nueva, pero que me encanta por su simplicidad de opciones y uso. Lo estoy usando en otro proyecto donde tenía incompatibilidades con Table of Content plus. Y la verdad es que me gusta más. Va al grano y por medio de css se puede personalizar muy fácilmente.
La gran diferencia (hay muchas) es que con f(x)TOC no puedes hacer aparecer las tablas de contenidos automáticamente. Funciona siempre a través de la inserción de un shortcode. Lo cual para mí es ideal puesto que el otro plugin también lo utilizo siempre a través del shortcode.
Conclusión
Cómo ves, crear enlaces ancla con html o con los plugins es muy sencillo y merece mucho la pena para que los usuarios puedan navegar más fácilmente dentro de tus contenidos, especialmente si son largos. O como hemos visto, para enlazar a una página en un punto concreto.
Además, como comentábamos, Google entiende que estos enlaces benefician al usuario a la par de organizar el contenido para su propia comprensión en puntos clave a los que se puede acceder directamente. Esto va a ayudar a mejorar tu SEO.
Así que mata dos pájaros de un tiro y comienza a usar enlaces ancla con html o con los plugins en tus contenidos.
Y por último, si crees que lo merece porque puede ayudar a alguien más, simplemente comparte este contenido en tus redes. ¡muuchas gracias! 🙂
