Marcado semantico
Marcado semántico para mejorar su SEO
El lenguaje HTML es, como su nombre indica, un lenguaje TAG. Me parece esencial conocer el propósito de cada etiqueta, es decir, para qué se han creado y cómo se definen en las normas.
Tengan en cuenta que hablo de marcado semántico y no de semántica, que es un tema mucho más amplio y va mucho más allá de la web (y de mis habilidades).
El despliegue del marcado semántico tiene múltiples intereses, especialmente para la accesibilidad, el procesamiento, el análisis o la visualización de un documento. Dentro del enfoque de este artículo, nos limitaremos, por supuesto, al contexto de los motores de búsqueda, ¡ya que el marcado semántico ofrece ciertas oportunidades para su visibilidad!
Estructurar su documento y su contenido...
Para quedar más claros, tomemos algunos ejemplos concretos con varias etiquetas semánticas:
- Etiquetas h1, h2, h3, h4, h5 y h6: Etiquetas que enmarcan los títulos. H1 representa el título o los títulos más importantes, h6, el título o los títulos menos importantes
- p-tag: Etiqueta que encierra un párrafo
- ol tag: Lista ordenada
- blockquote tag: citación
Según el sentido de su contenido, habrá que usar los tags adecuados.
Tabla, div y etiqueta semántica
Una leyenda urbana dice que el uso del div tag es beneficioso para la referenciación natural de un sitio en detrimento del table tag. ¡Esto simplemente es erróneo! Al contrario, ya que la etiqueta de la tabla me parece que da más significado a los datos que la etiqueta div.
Relación entre el marcado semántico y los motores de búsqueda
Los motores de búsqueda analizan el código HTML antes de generar sus clasificaciones. El propósito es de entender el significado de un documento para clasificarlo adecuadamente y así proponer resultados relevantes a sus usuarios.
Los tags del lenguaje HTML son los aliados de los motores en su búsqueda de relevancia. Como hemos visto, cuando estas etiquetas se utilizan con cuidadosamente, permiten un análisis más fino de la estructura de un documento y facilitan la ponderación de la importancia de un elemento de información.
En cuanto a la optimización del posicionamiento de su sitio, será necesario por lo tanto que sus páginas:
- Estén relevantes en cuanto al tema en cual quieren posicionarse.
- Contengan las palabras clave que están buscando y que estén ubicadas en lugares importantes (semánticamente hablando) en su documento. Es decir que sus palabras clave estén enmarcadas por etiquetas que les dan importancia.
Ejemplo de marcado semántico
Aquí tienen un ejemplo del uso adecuado de las etiquetas h1, h2, h3, p, ul, ol y li.
<h1>Los elefantes del bosque</h1>
<p>En esta sección hablamos del tema menos conocido de los elefantes del bosque.</p>
<h2>El hábitat</h2>
<p>Los elefantes del bosque no viven en los árboles,sino que viven en medio de ellos.</p>
<h2>Alimentación</h2>
<p>Los elefantes del bosque no comen los mismos alimentos de noche o de día.</p>
<h3>Su alimentación de noche</h3>
<p>De noche, los elefantes del bosque comen los siguientes alimentos:</p>
<ul>
<li>Ratones</li>
<li>Serpientes</li>
<li> Arañas</li>
</ul>
<h3>Su alimentación de día</h3>
<p>De día, los elefantes del bosque comen otros alimentos. Aquí está la lista de alimentos en orden de preferencia: </p>
<ol>
<li>Hierba</li>
<li>Paja</li>
<li>Helecho</li>
</ol>
CSS y marcado semántico
El lenguaje CSS permite modificar la visualización de las etiquetas. Por esta razón, la elección de utilizar tal o cual etiqueta debe determinarse sobre todo en función de su significado y no de su visualización por defecto en el navegador.
Próximo : Escritura web
Anterior : Meta etiqueta
