Cómo crear enlaces internos en un blog

Hoy, y antes de continuar personalizando la barra de menú de mi blog, voy a tratar de añadir enlaces internos.

Me doy cuenta de que en la mayoría de las nuevas entradas que voy añadiendo al blog hago referencia a temas ya tratados. Por el momento estoy afrontando esta situación repitiendo de nuevo todo los pasos o comentarios ya hechos anteriormente, o indicar que se revise tal o cual entrada.

Si continúo mi blog con esta práctica se convertirá en algo imposible, dejando de ser útil y dificultando su lectura, navegación  y compresión. Todos buscamos información clara y fácil de conseguir y no vernos obligados a abandonar la página de nuestra consulta para ampliar o ver temas relacionados con ella.  Lo lógico en estos casos es que abandonemos el blog de forma inmediata.

La mayoría de los expertos recomiendan también los enlaces para posicionar mejor el blog (mejorar el SEO) porque aumentan el tiempo de permanencia de un lector en cada entrada o artículo que se publica y mejoran el ranking de palabras clave a posicionar.

Por lo tanto parece evidente la necesidad de enlaces internos y a esto me voy a poner ahora mismo. Lo correcto es hacerlo desde el mismo comienzo del blog. Como lamentablemente no es mi caso tendré que revisar cada entrada y actualizarla con los enlaces que correspondan.

¿Cómo podemos incluir un enlace interno en nuestro blog? En principio no parece complicado.

Podemos usar enlaces que dirigen a una entrada, enlaces que dirigen a una parte concreta dentro de la misma entrada y enlaces que dirigen a una parte concreta de otra entrada.

Voy a ver las tres posibilidades.

Enlace interno a una entrada del blog

Lo primero es seleccionar el texto que vamos a utilizar de enlace (se denomina anchor text). 

Por ejemplo, en la entrada "Personalizar menú páginas (horizontal) en el blog_Fondo" hago referencia a la copia de seguridad de la que hablé en una entrada anterior con el nombre "Personalizar menú páginas (horizontal) en el blog_Disposición y letra". En esta entrada creé una etiqueta nueva con el nombre "Copia de seguridad"

¿qué hice yo ? algo nada recomendable y es indicar (consultar "Copia de seguridad" de este blog)

"...Como tengo que modificar el código HTML de la plantilla antes de nada hago una copia de seguridad del blog (consultar "Copia de seguridad" de este blog)"

 Debo corregir este error así que modifico la frase y escribo,

"...Como tengo que modificar el código HTML de la plantilla antes de nada hago una copia de seguridad del blog"

Ahora selecciono copia de seguridad con el botón derecho del ratón,

y a continuación selecciono "Enlace" de la barra de herramientas que está situada sobre la ventana donde estoy escribiendo la entrada al blog.

Se abre la siguiente ventana en la que tengo que introducir la dirección de la entrada a la que nos dirigirá el enlace que estoy creando y, antes de Aceptar y salir, pruebo si funciona correctamente el enlace haciendo clic en "Prueba este enlace". Todo es correcto por lo tanto acepto y salgo.

La URL la podemos obtener accediendo a la entrada de destino del enlace. En mi caso hago clic en la etiqueta "Copia de seguridad del blog". Una vez abierta copio la URL con el botón derecho del ratón.

A continuación regreso a la ventana "Editar enlace", hago clic en cualquier punto del recuadro destinado a la dirección web, y la pego.

El resultado es el siguiente,

el enlace está ya creado y tiene otro color (el texto de los enlaces en la plantilla de mi blog están configurados en color azul pero podemos modificarlo en el menú Plantilla-Personalizar-Avanzado-Enlaces). Como podemos ver en la siguiente imagen, podemos modificar el color del enlace, el color del enlace una vez visitado para indicar al lector que ya lo ha visto, y el color del enlace cuando se coloca el ratón sobre él (esto ayuda a distinguir un enlace de un simple texto resaltado).

Si se hace clic sobre el enlace se abre otra ventana del navegador con el contenido de la página destino.
Se puede abrir el enlace en la misma ventana si en el cuadro de "Editar enlace" no se marca la opción "abrir este enlace en una ventana nueva".

Enlace interno anclado a una parte concreta dentro de una misma entrada del blog

Como en algunas ocasiones una entrada puede tratar sobre varios contenidos que están relacionados entre sí  y puede llegar a ser algo extensa, lo más aconsejable es incluir un enlace que apunte hacia esa parte concreta de la entrada para evitarnos revisarla al completo.

Este tipo de enlace anclado a un determinado punto es algo más complejo porque debemos editar el código HTML de la entrada de origen en la que se inserta un enlace y el de la entrada de destino que es hacia donde nos dirige el enlace.

Ejemplo

Voy a probar este enlace informando que en esta misma entrada se ha tratado el tema enlace interno a una entrada del blog

Si hago clic sobre la frase marcada en azul que he establecido como "anchor text"  (es el texto que usamos en el enlace y que le da nombre, en este ejemplo es enlace interno a una entrada del blog) la página se trasladará al punto exacto que hemos marcado.

¿Cómo lo he hecho?

Entro en la edición de HTML de esta entrada y busco con CTRL + F la frase "voy a probar este enlace informando que".

Me encuentro con estas líneas de código HTML.

<u>Ejemplo</u><br />
<br />
Voy a probar este enlace informando que en esta misma entrada se ha tratado el tema "enlace interno a una entrada del blog"<br />
<br />

Y añado (marcado en rojo) lo siguiente,

<br />
<u>Ejemplo</u><br />
<br />
Voy a probar este enlace informando que en esta misma entrada se ha tratado el tema <a href="#anclaenlaceinterno">enlace interno a una entrada del blog</a><br />
<br />

A esa parte de la página a la que apuntará el enlace le asigno un identificador, para eso utilizo almohadilla #nombre. En mi caso he puesto #anclaenlaceinterno


El siguiente paso es localizar el código HTML del título del tema (al principio de esta entrada) enlace interno a una entrada del blog que es el punto de destino del enlace.

El código que encuentro es,

<h3>
<u>Enlace interno a una entrada del blog</u></h3>

Y añado (marcado en rojo),

<a name="anclaenlaceinterno"></a>

<h3>

<u>Enlace interno a una entrada del blog</u></h3>

Añado la línea justo antes de la etiqueta <h3> de subencabezado para que el enlace dirija la página hacia la línea en la que se encuentra este título (enlace interno a una entrada del blog). Tengo que usar el nombre del identificador del punto de origen pero sin la almohadilla. En este ejemplo es anclaenlaceinterno.

Enlace interno anclado a una parte concreta de otra entrada del blog

Es igual que en el ejemplo anterior pero ahora tenemos que añadir la URL de la entrada a la que se dirige el enlace.

<br />
<u>Ejemplo</u><br />
<br />
Voy a probar este enlace informando que en esta misma entrada se ha tratado el tema <a href="URL de la otra entrada#anclaenlaceinterno">enlace interno a una entrada del blog</a><br />
<br />

Hoy he aprendido a añadir enlaces internos. Ahora me toca revisar todas las entradas que ya tengo publicadas para añadir los enlaces que son necesarios y faltan :(