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.
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)
Código fuente de la página anterior
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:
- 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:
La función Inspección del menú de Firefox
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:
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
El mismo documento abierto con el bloc de notas
El mismo documento abierto con un navegador
La misma página vista con la función inspección activada (navegador Firefox)
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:
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:
| Etiqueta | Explicación |
| h1 … h6 | Sirven 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. |
| title | Es 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. |
| description | La 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. |
| a | Es 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 |
| title | Tí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
Etiquetas h2, …, h6
Código fuente con la pestaña HTML
Enlaces: etiqueta a
Enlaces: el resultado en código fuente
Metadatos para el snippet: título SEO y metadescription
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
- Qué es el HTML5 y su impacto en el periodismo
- SEO de contenidos para periodistas: metadatos, navegación y taxonomías
Sitios útiles
Icon made by Freepik from www.flaticon.com
