SEO de contenidos: ¿qué es el código fuente y cómo se puede editar en WordPress?

Fuente: Flaticon

El código fuente es el nombre que recibe un archivo de texto que contiene la información que un navegador necesita para poder mostrar una página web. También es una información que utilizan otros programas, como spiders o robots de Internet, entre ellos los que trabajan buscando información para Google.

En un mundo ideal, un redactor de contenidos no debería preocuparse ni por saber qué es el código fuente ni por cómo editarlo en un CMS (Content Management System) como WordPress. Pero observen lo de ideal.

Los CMS como WordPress nacieron, entre otras cosas, para proporcionar capacidad de publicar en la web a personas sin conocimientos técnicos, pero en realidad saber algunas cosas sobre el llamado lenguaje HTML, es decir, sobre una parte muy importante  del código fuente, es enormemente beneficioso.

Si me permiten un símil: para conducir un turismo no es necesario ser ingeniero, pero casi cualquier nivel de conocimientos de mecánica del automóvil mejorará la conducción (y la hará más segura). 

Por razones similares casi cualquier conocimiento del código fuente y de su componente principal, el lenguaje HTML, mejorará la redacción y el SEO de contenidos.

Representación de un fragmento de código fuente. Fuente: Pixabay

PRIMERA PARTE
¿Qué es el código fuente?


El así llamado código fuente es un fichero de texto con el contenido de una página web y las instrucciones para su interpretación y adaptación a una pantalla, ya sea la de un ordenador o la de un teléfono móvil.

Una vez interpretado por un navegador, deviene en lo que conocemos como página web. De algún modo se podría decir que la página que muestra el navegador es una construcción virtual, creada para los seres humanos, mientras que la página real es el código fuente que procesan los ordenadores.

Las dos capturas siguientes intentan ilustra esta idea. La primera captura es de una página web tal como la vemos en un navegador convencional, y la segunda es  la misma página, pero vista como código fuente:

Página en vista normal (interpretada por un navegador convencional)

Una página web de un medio de comunicación, mostrando en este caso una noticia.

Código fuente de la página anterior

El mismo documento de la captura anterior, pero visto ahora como código fuente, es decir en este caso, sin interpretar. Hemos señalado con una flecha el título de la noticia. Como podemos ver, es el mismo contenido.

Podemos poder ver el código fuente de una página utilizando el mismo navegador con el que la vemos en la forma “normal”. Para ello, podemos usar dos vías:

  • En un navegador como Chrome o Firefox (u otros): poniendo el cursor sobre algún lugar sin enlaces de la página, utilizando el botón derecho del ratón (Windows) y seleccionando la opción Ver código fuente de la página:
Las funciones que podemos activar en una página web desde un navegador con el uso del botón derecho del ratón (con Windows)
  • Con la opción Inspeccionar que podemos encontrar en el mismo menú del ratón, o en el menú del navegador buscando la opción de Herramientas para desarrolladores, en cuyo caso ofrece una visión dividida en dos la página, con el resultado “normal” en la izquierda y una visión adaptada del código fuente en la derecha:
Otra forma de ver el código fuente, de manera interactiva, es con la opción Inspeccionar del botón derecho del ratón en el navegador (en este caso Chrome) o la opción Herramientas de desarrolladores del menú general

La función Inspección del menú de Firefox

La función de inspección en el caso del navegador Mozilla Firefox. Se accede desde Desarrollador Web > Inspector en el hamburguer menu de la barra superior (derecha)

Visto, aunque sea a mil metros de altura, qué es el código fuente, nos corresponde examinar el lenguaje HTML, que es su constituyente más importante para un redactor de contenidos para la web.

¿Qué es HTML?

El lenguaje HTML es una de las partes más importantes del código fuente, primero porque es imprescindible (sin HTML no hay página web), y segundo porque es la más interesante para un redactor, y por tanto la que más afecta al SEO de contenidos.

Se dice que HTML es un lenguaje porque se compone de una serie de etiquetas que son equivalentes a palabras y unas reglas de uso que son equivalentes a una gramática.

Las etiquetas son letras o una palabra, enmarcadas por unos ángulos (o símbolos de mayor que y menor que), como en <h1>. Estas etiquetas rodean o “marcan” un determinado contenido y establecen de este modo: (1)  la clase de contenido que es (titular, párrafo, enlace, etc.)  y (2) cómo debe tratarlo el navegador al mostrar la página, aunque esto último lo hace en colaboración con otro lenguaje, denominado CSS, que aquí no trataremos.

Veamos el siguiente fragmento de código fuente:

Fragmento de código fuente con tres etiquetas HTML diferentes: body (contenido de la página), h1 (título principal) y p (párrafo).

En la captura precedente, creada con un editor especializado de código fuente (aunque se puede crear con una aplicación tan simple como el bloc de notas) vemos el caso de tres etiquetas muy importantes:

  • En la línea 9: la etiqueta <body> que indica al navegador que aquí comienza el contenido de la página para mostrar en pantalla.
  • En la línea 11: la etiqueta <h1> que marca que todo lo que está entre esa etiqueta y el cierre de la misma </h1> es un título de primer nivel.
  • En la línea 13: la etiqueta <p> que marca un párrafo.
  • También vemos en cada caso la marca de cierre de las etiquetas correspondientes: </body>, </h1>, </p>; es decir donde acaba su alcance.

Por su parte, las siglas HTML corresponden a la expresión HyperText Markup Language, y siguiendo cada una de las letras que forman las siglas vamos a considerar el significado de este término:

La H de HyperText se debe a que este lenguaje proporciona también un medio para enlazar páginas entre ellas, aunque estén situadas en ordenadores ubicados cada uno de ellos en una punta distinta del planeta, todo ello en unión con otro protocolo, el HTTP.

La T de HyperText es porque se supone que el origen y el destino del enlace se hace entre fragmentos de texto. Actualmente, ya no es así. El origen puede ser una imagen y el destino igual. Todas las posibilidades están actualmente permitidas, como es sabido (texto-imagen, imagen-texto, etc).

La M de Markup se debe a que proporciona una serie de etiquetas (es el nombre técnico) con las que se puede marcar y de este modo estructurar el contenido de la página. Las dos más universales son la etiqueta p, por paragraph, que permite marcar un texto como un párrafo y el grupo conocido como hx, por heading, y de la que hay 6 variedades, de la h1 a la h6, que sirve para marcar títulos y subtítulos (el h1 marca el título principal, h2 subtítulo y así sucesivamente). De estas, en el SEO de contenidos se consideran especialmente importantes las dos primeras, por tanto, h1 y h2.

La L es de Language y corresponde al hecho de que todo esto junto: las etiquetas (alrededor de un centenar) más las reglas para utilizarlas se supone que constituyen un lenguaje; artificial y limitado, pero todo un lenguaje.

Aquí se puede consultar un listado de las etiquetas HTML.

Estructura de un documento HTML

Un documento HTML (recordemos que un documento HTML es en realidad una página web) se compone de una serie de cajas virtuales. Primero hay una caja contenedora, html, y dentro de ella, otras dos: head y body. En la caja head encontraremos metadatos (lo veremos después) y en la caja body el contenido para los usuarios. Ambas cajas, head y body están dentro de otra más grande, la caja html que lo contiene todo.

En las siguientes capturas veremos, primero el código fuente completo de un documento HTML, por tanto, de una página web, muy sencillo. Veremos, o eso espero, con claridad esta estructura de cajas, porque veremos que la primera y última etiqueta (descontada la pseudoetiqueta inicial de la línea 1) es html, y dentro las otras dos, head y body.

Este documento, tal como lo vemos en la primera captura que sigue, lo hemos creado con un editor especializado para que coloree el código y enumere las filas, pero lo podríamos haber creado con el bloc de notas. Lo único que deberíamos hacer es darle un nombre de archivo que tenga una extensión htm, o html, como en: loquesea.html. Es lo que muestra la segunda captura.

Después, lo veremos  tal como queda cuando abrimos el mismo documento con un navegador, para que veamos la relación entre las etiquetas del HTML y el resultado en el navegador.

Después, volveremos a ver, de nuevo,  el mismo documento con la función Inspección que une en una misma pantalla la página web y una versión interactiva del código fuente.  Las tres capturas que ilustran lo anterior:

Documento HTML completo

Una página web completa, muy simple, pero completa a todos los efectos técnicos. Obsérvese en la línea 6 la meta etiqueta description, que sirve para incluir un resumen de la página. Este resumen es utilizado por los buscadores.

El mismo documento abierto con el bloc de notas

El código fuente es un archivo de texto plano, como los que permite crear el humilde bloc de notas de cualquier sistema operativo (en este caso, el de Windows)

El mismo documento abierto con un navegador

La página web anterior abierta esta vez con el navegador Mozilla Firefox. Marcamos con flechas el resultado de interpretar el código fuente: el título SEO (title), el título principal (h1), los párrafos (p) y el enlace (a)

La misma página vista con la función inspección activada (navegador Firefox)

Con la función Inspección activada del navegador Firefox vemos a la vez el documento como página web y como código fuente. Las flechas indican la función activada y las etiquetas.

Por cierto, la versión actual del lenguaje HTML es la 5, razón por la que tiene el imaginativo nombre de HTML5.

Etiquetas estructurales y de metadatos

Para entender la relación entre el SEO y las etiquetas HTML hay que considerar ahora que hay dos grandes clases de etiquetas: las que sirven para marcar el contenido, o etiquetas estructurales, como las que hemos visto, y etiquetas para proporcionar información a los buscadores, que se denominan metadatos.

La siguiente captura muestra parte de la página de resultados (SERP) de Google para la búsqueda utilizando la palabra clave periodismo inmersivo:

Parte de la página de resultados o SERP de Google para la búsqueda “periodismo inmersivo”. Cada bloque de información es un snippet o resumen de una página web que responde al criterio de búsqueda, por tanto, vemos aquí los snippets de tres páginas web.

Ya hemos visto etiquetas para estructurar contenido, como las h1 y p. En el caso de los metadatos, las dos más importantes son las que utilizan los buscadores para confeccionar el snipett o resumen de cada una de las páginas encontradas y son los siguientes:

  • etiqueta title, o título SEO
  • etiqueta meta description

Etiquetas HTML y SEO de contenidos

Las etiquetas que debemos conocer a efectos del SEO de contenidos son, al menos, las que mostramos en esta tabla:

EtiquetaExplicación
h1 … h6Sirven para marcar contenido como título o subtítulo. De este modo h1 es el título de primer nivel, h2 el subtítulo, h3 el sub-subtítulo, y así hasta 6 niveles. En SEO se utilizan h1, h2 y h3. Otros niveles adicionales no suelen considerarse. Se trata de etiquetas de estructura.
titleEs una etiqueta para indicar el llamado título SEO. No es el que aparece en el cuerpo de la página, sino en el snippet de los buscadores. Es por tanto, un metadato.
descriptionLa etiqueta en realidad se denomina meta, mientras que description es un atributo de esta etiqueta. Hay varias clases de etiquetas meta. La que se utiliza en las páginas de los buscadores es la etiqueta meta description. Sirve para mostrar un resumen del contenido de la página en el snippet de los buscadores. Es por tanto, un metadato.
aEs la a de anclaje, y sirve para crear enlaces entre páginas o entre secciones de una misma página. Es una etiqueta con una función única: establecer el inicio y el destino de los hipervinculos.

Una vez hemos visto la lista precedente de etiquetas y, más arriba, el ejemplo de tres snippets, podemos relacionar ahora el título y la descripción de los snippets con los metadatos correspondientes:

Etiqueta html 
en la página web
Parte correspondiente
del Snippet
titleTítulo
meta
description
Descripción de la página

SEGUNDA PARTE
¿Cómo se puede editar en WordPress?


Ahora que sabemos al menos algunas cosas sobre el código fuente y el lenguaje HTML, corresponde saber cómo lo podemos editar o manipular mediante un CMS como WordPress.

Para ello usaremos dos herramientas:

  • Etiquetas h1, … h6: podemos utilizar el editor de entradas, ya sea en modo visual, en la pestaña Visual o en modo HTML, en la pestaña HTML. Nosotros recomendamos además instalar el plugin TinyMCE Advanced que añade facilidades de edición tanto en modo visual como en modo HTML, así como el plugin HTML Editor Syntax Highlighter, que ayuda mucho a editar el código fuente por sus opciones de tipografía y de coloreado de las etiquetas.
  • Metadatos title y meta description: para lo cual necesitamos un plugin de SEO. Nosotros recomendamos SEO Yoast

En las siguientes capturas mostramos primero cómo podemos manipular el código fuente en el caso de las etiquetas h1 y h2. Después, mostraremos la manipulación de los metadatos con el pluguin SEO Yoast.

Etiqueta h1

El contenido señalado con la flecha, donde debemos añadir el título de la entrada, corresponde a la etiqueta h1.

Etiquetas h2, …, h6

Seleccionando una parte del documento que estamos editando y deplegando la opción correspondiente, podemos añadir cualquier nivel de título a una entrada.

Código fuente con la pestaña HTML

Vista y edición del código fuente en la pestaña HTML del editor de WordPress. Usamos dos plugins: TinyMCE Advanced y HTML Editor Syntax Highlighter

Enlaces: etiqueta a

Marcando una palabra o una frase, y haciendo clic en la opción del menú de edición correspondiente, una ventana emergente nos permite crear hiperenlaces. Vemos el destino del enlace, el texto marcado que actuará como el inicio del enlace, o anchor text, un título que se desplegará al pasar el cursor por el enlace y la instrucción de que se abra en una nueva ventana.

Enlaces: el resultado en código fuente

El enlace anterior, en forma de código fuente.

Metadatos para el snippet: título SEO y metadescription

Edición de los tres componentes del snippet: título SEO, URL (slug) y meta description con el plugin SEO Yoast

Conclusiones

Por la misma razón que conducimos mejor si tenemos algún conocimiento de mecánica, aunque no haga falta cursar una ingeniería, nos conviene conocer algo del código fuente y de su principal componente, el lenguaje HTML para redactar mejor nuestros contenidos para la web.

Hemos visto un pequeño grupo de etiquetas, tanto de tipo estructural como de tipo metadatos. Hemos considerado su significado y la manera de editarlas en WordPress, con el fin de tener el máximo control de los contenidos que creamos para publicar en nuestras entradas y páginas web. De este modo, tendremos también una mejor comprensión de estos aspectos tan importantes del SEO de contenidos.

Un profesional de la comunicación se beneficiará de manera directa y constante de conocer todo lo que le resulte posible del código fuente y del lenguaje HTML si por su contexto de trabajo necesita redactar contenidos utilizando alguna clase de CMS como WordPress.

En este último caso, es decir, cuando usamos un CMS son frecuentes las ocasiones en que debemos utilizar la pestaña HTML para depurar algún aspecto del contenido que, a veces, el CMS no es capaz de adaptar o de editar bien. De nuevo, casi cualquier nivel de conocimiento del código fuente, aunque sea tan básico como el que hemos presentado aquí, nos será beneficioso.


Entradas relacionadas

Sitios útiles


Icon made by Freepik from www.flaticon.com