Cargando



Maquetación con HTML5 para SEO con sentido semántico

Maquetar una página web es llevar el diseño gráfico a código html, css ubicando cada elemento correspondiente mediante código en la página web. En este tutorial aprenderás todas estas tecnicas y formas de maquetación utiles para mejorar el SEO en tu web con contenido semántico.



dic 08 2014 19:04
Profesional
Muchos diseñadores utilizan html o xhtml separando o agrupando los elementos en capas con div. El problema es que si tenemos 50 div cada uno separado con su clase definiendo la estructura de la página web, esto tendrá sentido para el diseñador o programador pero no para los buscadores ya que no pueden distinguir que es cada clase si es una cabecera, sección, articulo, pie de pagina, etc.

Ventaja HTML5 Vs XHTML
Html5 ofrece una ventaja muy importante respecto de xhtml tradicional y es que poseer etiquetas para definir una estructura semántica.

Denominamos html semántico a aquel código html donde la estructura tengo sentido para los buscadores y por lo tanto sirva para posicionamiento seo. Se trata de que cada buscador pueda entender que es cada parte de una pagina web aun quitándole todo el contenido.

El XHTML no posee etiquetas que permitan definir grupos o bloques de elementos con sentido semántico.

HTML5 resuelve este problema ofreciendo elementos y etiquetas que nos permiten definir la semántica de la pagina web, algunas de ellas son headeR,footer, nav,hgroup,section y article, entre otras.


A continuación definiremos las mas importantes en sentido semántico:
  • header : define el bloque de la cabecera de la página web y encerrar el contenido de la cabecera.
  • nav : define un bloque que representa un menú, por lo tanto los buscadores al encontrar esta etiqueta saben que es la estructura de navegación.
  • hgroup: define y agrupa títulos y así darle distintas importancia a cada titulo.
  • section y article: Los anteriores elementos que definen capas div> y se cambian por las etiquetas section y article, que tienen un sentido más semántico al definir secciones y artículos dentro de las secciones.
  • aside : define y agrupa elementos de tipo tangencial de la pagina web. Es decir contenido que no es el principal como por ejemplo las columnas laterales o Sidebar de la web
  • footer : define y agrupa elementos en el pie de pagina de la web.

Utilizando capas xhtml div en HTML5 semántico para SEO



La utilización de HTML5 no implica que se deje de utiliza XHTML, siguen siendo muy buenas para organizar la estructura y agrupar elementos de la pagina web o invocar de Jquery, recordemos que HTML5 sirve para darle sentido semántico pero dento del bloque se puede seguir utilizando cualquier otra etiqueta XHTML. Veamos un ejemplo a continuacion

 <div id="cabecera">
	    <header>
		    <hgroup>
			    <h1>Titulo de la web</h1>
			    <h2>Subtitulo</h2>
		    </hgroup>
		    <div id="logo">logo de la web</div>
	    </header>
</div>


Podemos ver que con las capas se ha definido la estructura y dentro se definió la cabecera header y un hgroup para agrupar los títulos, además de una capa que contiene el logo.

Así las capas XHTML nos permiten definir la estructura de página web para tener una mejor organización para el programador, entonces XHTML nos sirve para definir bloques con sentido para la estructura y HTML5 nos permite crear bloques con sentido para los buscadores y el SEO. Como se utiliza la etiqueta section en HTML5 para SEO.

Utilizar la etiqueta section es muy similar a utilizar una capa div, con la diferencia que section aporta el sentido semántico y todos los elementos encerrados en section están relacionados con la semántica de la web. Es importante No utilizar section para agrupar elementos en un bloque cualquiera porque necesitemos tener agrupado elementos sin sentido para asignarle estilos CSS o algún efecto de programación.

Si el motivo de crear un bloque es para aplicarle CSS o utilizarlo desde código con algún script, entonces sera mejor no utilizar HTML5, ya que el bloque no tiene un contenido semántico. En este caso deberemos crear un bloque con la capa div de xhtml. Como se ve en el ejemplo anterior, el logo no tiene sentido utilizar HTML5 ya que se utiliza CSS para mostrar la imagen.

Capa DIV o Sección
Una forma de pensar cual es la relevancia de cada bloque para determinar si es una capa div o una sección, si soy el visitante de la página web ¿Me aporta información útil este bloque? Si la respuesta es afirmativa será una sección y sino una capa.


Cómo se utiliza la etiqueta article en HTML5 para SEO



Cuando utilizamos el elemento article estamos definiendo un bloque que tiene sentido semántico y contenido que los buscadores pueden rastrear. La etiqueta article no necesariamente refiere a una nota de texto, puede ser un producto, imágenes o un formulario.

Vemos un ejemplo sencillo de una página web y su código en HTML5:

<header>
    <h1>Autos Online</h1>
</header>
<article>
    <header>
	    <h3>Honda Civic</h3>
    </header>
    <img src=image/honda-civic.jpg width="318" height="237" />
    <p>Descripci&oacute;n Honda Civic </p>
</article>
<article>
    <header>
	    <h3>Toyota VIO</h3>
    </header>
    <img src=image/toyota.jpg width="300" height="200" />
    <p> Descripci&oacute;n Toyota VIOS </p>
</article>



El resultado será la siguiente web sin diseño de momento pero apreciamos los bloques definidos.

html5SEO.jpg


Como dentro de article podemos poner capas o párrafos u otros elementos xhtml en algunos casos el contenido de la web podría tener solo un article y en el caso de que la página tenga listados o catálogos como el caso anterior de Autos Online podremos tener un article por cada producto mostrado y también su propia cabecera para dar mas relevancia a los títulos.

A los elementos HTML5 también podemos aplicarle estilos css, veamos un ejemplo sencillo para un blog online con HTML5 y CSS3.

html5SEO2.jpg


<style>
    #cabecera {
	    padding: 20px;
	    background: #ff9900;
	    background-size: 50%;
    }
    #blog {
	    padding: 44px;
	    background: #f8f8f8;
	    background-size: 50%;
	    border-radius: 22px;
    }

    .comentario {
	    margin-top: 10px;
	    padding: 44px;
	    background: #99CC00;
	    width: 600px;
	    border-radius: 22px;
    }
</style>

<header id="cabecera">
    <h1>Blog Online</h1>
</header>
<section id="blog">
    <article class="comentario">
	    <header>
		    <h2>Titulo 1</h2>
		    <p>Posteado <time datetime="06 de Diciembre de 2014">06 de Diciembre de 2014</time> por  <a href="#">Sergio</a> - <a href="#">3 comentarios</a></p>
	    </header>
	    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio...</p>
    </article>
    <article class="comentario">
	    <header>
		    <h2>Titulo 2</h2>
		    <p>Posteado <time datetime="01 de Diciembre de 2014">01 de Diciembre de 2014</time> por  <a href="#">Sergio</a> - <a href="#">20 comentarios</a></p>
	    </header>
	    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio...</p>
    </article>
</section>


Esto demuestra que no solo son elementos semánticos sino que también pueden ser parte del diseño y estructura de la página web.

Cómo se utiliza la etiqueta aside en HTML5 para SEO



Este elemento sirve para definir un bloque secundario dentro de la estructura de la pagina web, es contenido o datos que queramos mostrar al visitante pero no es un contenido principal.

Podemos asociar la etiqueta aside con las columnas laterales o comúnmente conocidas como Sidebar que tendrán como contenido menú de navegación secundaria, enlaces a otras páginas web, formularios de login. También podemos crear un aside dentro de un article esto significa que lo que esta dentro de aside es un complemento del contenido de article pero no forma parte directa de ese contenido, por ejemplo si tenemos un articulo sobre algún ventas y en un aside publicamos estadísticas.

Para finalizar recordar el objetivo de Maquetar:

¿Qué es Maquetar una pagina web?
Maquetar una página web es llevar el diseño gráfico a código html, css ubicando cada elemento correspondiente mediante código en la página web.

¿Te ayudó este Tutorial?


2 Comentarios


Julio Arroyo
dic 08 2014 19:12
Muy bien explicado el concepto de Maquetación, conozco más de un developer que preguntaba sobre este área. Muy bien presentado y explicado. Gracias Sergio.

Cesar Ortiz
dic 08 2014 22:05
Muy buen tutorial sobre Maquetación para mejorar el SEO de tu web. Muy útil, y demandado si señor. thanks!
No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X