He tenido esta publicación en borradores por un tiempo, principalmente como un contenedor para que yo deje bits para cuando tenga tiempo para expandirlo a un boletín adecuado.
Luego, mi buen amigo Jono Alderson publicó su excelente artículo sobre HTML semántico, y durante unas semanas, perdí la voluntad de completar la mía.
Pero, pensé que debería terminar mi versión de todos modos, ya que mi enfoque es ligeramente diferente y quizás un poco más práctico que el de Jono.
Definitivamente deberías leer el blog de Jono; Dice todo lo que quiero decir y más.
HTML semántico
Comencemos con una visión general rápida de lo que es Semantic HTML.
Como el lenguaje sobre el que se construye la web, HTML es un marcado que rodea el texto para proporcionarle estructura.
La etiqueta
alrededor de un bloque de contenido indica que es un párrafo de texto.
La etiqueta
en torno a una oración muestra que es el encabezado principal de la página.
La etiqueta
- indica el inicio de una lista ordenada (generalmente numerada).
- Párrafos: No use etiquetas
y para formatear el artículo en párrafos. Ha habido una etiqueta para eso mientras HTML haya existido, y es la etiqueta . Úsalo.
- Subvenciones: Use
/
/
etiquetas de subtítulo para dar la estructura de su página. Use subtítulos en un artículo para prefacionar secciones específicas de contenido en su artículo. Use subtítulos para los encabezados sobre los elementos estructurales de concreto, como los artículos recomendados.
- Imágenes: Siempre use la etiqueta
si desea mostrar una imagen que desea que Google también vea. Google lo recomienda explícitamente. - Enlaces: Al vincular a otra página, ya sea interna o externa, use la etiqueta con un valor «href» que contiene la URL de destino. Es el único tipo de enlace que Google definitivamente seguirá.
- Enlaces relacionales: La etiqueta le permite crear una relación entre la URL actual y otra URL. Esta puede ser una página canónica, una hoja de estilo, una versión de idioma alternativo de la página actual, etc.
- Liza: Las listas de balas deben usar la etiqueta
- , y las listas numeradas deben usar la etiqueta
- . Puede hacer que se vean como desee con CSS, pero use las etiquetas de la lista como base.
- Énfasis: Cuando desee resaltar una palabra o frase específica, hay etiquetas HTML semánticas que debe usar para eso: para cursivay para atrevido.
- El
y Existen etiquetas para separar los metadatos de la página (en la ) del contenido real (en ). Cada página HTML comienza con esos dos. Se puede usar para envolver alrededor de la sección de la cabeza de la página, donde se encuentran el logotipo, la navegación y otros elementos estilísticos. debe usarse para la navegación principal de su sitio. Mega Menús, menús de hamburguesas, enlaces de navegación principales, cualquier forma que tome su navegación, debe envolverlo en la etiqueta . - Puedes usar
Etiquetas para dividir su página en varias secciones. Una sección podría ser el artículo; Otro podría ser los comentarios a continuación del artículo. es la etiqueta que muestra dónde comienza el texto del artículo principal de la página (incluido el titular). Esta es una etiqueta muy valiosa para los editores de noticias. - Con
, Puede indicar bloques de contenido como una barra lateral de historias de tendencias, artículos recomendados o las últimas noticias. se usa para, lo adivinaste, el pie de página de la página web.
La etiqueta indica que cargará una imagen en la página web. Y así sucesivamente.
Se usó HTML semántico para codificar cada página web.
El contenido estaba rodeado de etiquetas específicas que indicaban para qué era cada bit de contenido, y luego se aplicó CSS para que se viera bien. No era perfecto de ninguna manera, pero funcionó.
También significaba que podía ver la fuente HTML sin procesar de una página web y ver qué estaba tratando de entregar la página y cómo. El HTML señaló la estructura y el significado de cada bit de contenido en la página. Podrías ver el propósito de la página simplemente mirando su código.
Luego, los editores de Wysiwyg y luego JavaScript Frameworks llegaron a la escena, y HTML quedó en segundo plano. En lugar de
y
El resultado final es la página web HTML que carece de estructura y no tiene significado, hasta que se renderiza por completo en el navegador y se pinta visualmente en una pantalla. Solo entonces el usuario (y un sistema de máquinas que intenta emular a un usuario) comprenderá cuál es el propósito de la página.
Es por eso que Google pasa por el esfuerzo de representar páginas como parte de su proceso de indexación (aunque realmente no quiere).
Sabemos que Google generalmente no tiene tiempo para renderizar un artículo de noticias antes de que necesite clasificarlo en las principales historias y en otros lugares. Por lo tanto, el HTML crudo es inmensamente importante para los editores de noticias.
Good HTML le permite a Google extraer sin esfuerzo el contenido de su artículo y clasificar su historia donde merece en el ecosistema de Google.
HTML semántico es un factor clave aquí. Esta es la razón por la cual SEOS como yo insiste en que el titular de un artículo está envuelto en la etiqueta de encabezado
, y que esta es la única instancia de
en una página de artículo.
El titular de H1 indica el titular principal de una página web. Se firma dónde comienza el artículo, para que Google pueda encontrar el contenido del artículo fácilmente.
¿Qué etiquetas HTML son semánticas?
Más allá de la etiqueta de encabezado
, hay muchos otros elementos HTML semánticos que puede implementar que permiten a Google extraer e indexar más fácilmente el contenido de su artículo.
En ningún orden en particular, los elementos que debe usar son:
Todas las etiquetas anteriores, con la excepción de , están destinadas al contenido de la página web, proporcionando estructura y significado al texto.
Hay etiquetas HTML semánticas adicionales que están destinadas a proporcionar estructura y significado al código de la página.
Estas etiquetas permiten a Google identificar diferentes elementos en la página, como la navegación frente a una barra lateral, y procesarlos en consecuencia.
Estas etiquetas semánticas estructurales ayudan a los motores de búsqueda a comprender el propósito y el valor de cada sección de HTML.
Permite a Google indexar rápidamente su contenido y procesar los diferentes elementos de sus páginas de manera adecuada.
Hay muchas más etiquetas HTML semánticas a su disposición, para diferentes fines. Lo más probable es que hay un elemento HTML para cada caso de uso imaginable.
En lugar de agrupar su código lleno de etiquetas
¿Cómo ayuda a AI?
Sabemos que los LLM como el chatgpt y la perplejidad rastrean la web abierta para los datos de capacitación, así como para consultas específicas de los usuarios que requieren contenido de la web.
Lo que algunos de ustedes no sepan es que los LLM no renderizan JavaScript cuando procesan páginas web.
Google es la excepción a la regla, ya que ha dedicado una gran cantidad de recursos a representar páginas web como parte de la indexación.
Debido a que Gemini de Google es el único LLM basado en el índice de Google, Gemini es el único LLM que usa contenido de páginas web completamente representadas.
Por lo tanto, si desea tener alguna posibilidad de presentarse como una fuente citada en ChatGPT o perplejidad, haría bien en asegurarse de que su contenido completo de página esté disponible en su HTML sin cerebro y sin servicio.
El uso de HTML semántico para estructurar su código y proporcionar significado también ayuda a estos LLM a identificar fácilmente su contenido central.
Es mucho más simple para ChatGPT analizar algunas docenas de etiquetas HTML semánticas en lugar de varios cientos (o incluso mil) etiquetas anidadas
Si la «red de agente» cobra vida (soy escéptico), el HTML semántico es probablemente un aspecto crucial del éxito.
Con etiquetas
Cuando usa HTML semántico para cosas como botones, enlaces y formularios, las posibilidades de que un agente de IA fallen en su tarea son mucho más bajas.
El significado inherente a las etiquetas HTML adecuadas le dirá al agente de IA a dónde ir y qué hacer.
¿Qué pasa con los datos estructurados?
Puede pensar que los datos estructurados han hecho obsoleto HTML semántico.
Después de todo, con datos estructurados, puede proporcionar a los sistemas de máquinas la información necesaria sobre el contenido y el propósito de una página en un formato simple legible por máquina.
Esto es cierto hasta cierto punto. Sin embargo, los datos estructurados nunca tuvieron la intención de reemplazar HTML semántico. Sirve un propósito completamente diferente.
Los datos estructurados tienen limitaciones que el HTML semántico no tiene.
Los datos estructurados no le dirán a una máquina qué botón agrega un producto a un carrito, qué subtítulo precede a un párrafo crítico de texto y en qué vincula el lector debe hacer clic para obtener más información.
Por supuesto, use datos estructurados para enriquecer sus páginas y ayudar a las máquinas a comprender su contenido. Pero también debe usar HTML semántico por las mismas razones.
Utilizados juntos, HTML semántico y datos estructurados son una combinación inmejorable.
Crear sitios web, no aplicaciones web
Podría ir a una diatriba de 2.500 palabras sobre por qué deberíamos construir sitios web en lugar de aplicaciones web y cómo la aplicación de la web es anatema para los principios sobre los cuales se fundó la red mundial, pero le ahorraré esa polémica particular.
Baste decir que las aplicaciones web para sitios web de entrega de contenido (como los sitios de noticias) son casi siempre inferiores a los sitios web simples de moda.
Y los sitios web se construyen, o deben ser, en HTML. Haga uso de todo lo que HTML tiene para ofrecer, y está evitando el 90% de las trampas técnicas de SEO en las que las aplicaciones web tienden a facilitarse.
Eso es todo para otra edición. Gracias por leer y suscribirse, ¡y te veré en el próximo!
Esta publicación fue publicada originalmente en SEO para Google News.
Imagen destacada: N Universo/Shutterstock
