La correcta estructura de un Blog asegura una correcta experiencia de usuario del mismo y facilita su correcta indexación en los motores de búsqueda. A priori lo que puede parecer trivial se torna en vital para el correcto funcionamiento del mismo.
Analicemos punto por punto cada aspecto que debemos tener en cuenta a la hora de configurar la correcta estructura de nuestro Blog.
¿Qué se considera estructura de un Blog?
Las entradas y su contenido son el "alma" del Blog, sin ello carece de sentido su existencia y se convierte en contenido digital inerte que subsiste en la red sin rumbo ni destino. Pero estas entradas a las que tanto tiempo dedicamos necesitan de una buena base para que los usuarios puedan leerlas confortablemente y los buscadores puedan acceder a ellas: eso es la estructura del Blog, esa base.
La estructura de un Blog es la base sobre la que se construye y distribuye todo su contenido. En ella existen dos partes fundamentales: una visible compuesta por los componentes que conforman su presentación y otra invisible que sirve para que los sistemas que acceden al mismo sean capaces de analizar y extraer correctamente su información.
¿Qué es el SEO on Page?
El SEO es el conjunto de técnicas que se aplican sobre un sitio web para que este sea indexado y correctamente rastreado por los motores de búsqueda, con el fin de mejorar o llegar a obtener un mejor posicionamiento.El SEO ON PAGE determina los estándares que una página web debe cumplir para ser correctamente rastreada, indexada y presentada en los motores de búsqueda.
Sin una estructura correcta que apoye un buen SEO ON PAGE, las posibilidades de que un motor de búsqueda se decante por un resultado bien optimizado antes que por otro no optimizado son mayores. Es por ello que una buena optimización para motores de búsqueda de la estructura de una web y las páginas que la componen puede facilitar su posicionamiento.
¿Cuál es la parte visible y la no visible de un Blog?
Es importante no confundir la presentación con la estructura. La presentación se construye sobre la estructura pero no es la estructura. A continuación iré exponiendo cuál debe ser una estructura apropiada:
1) La estructura de un Blog comienza desde su <HEAD>, aprende cómo debe estar formado.
Si bien hemos visto en más de una ocasión cómo se conforma el código fuente de una plantilla Blogger, es básico y suficiente para entender la estructura no visible de un Blog que a parte de que en ella es donde indicamos cómo se colocan sus componentes, también podemos informar a los buscadores de qué contenido tenemos, quién es el autor, el idioma, qué palabras clave lo conforman... todo ese apartado lo informamos por medio de las meta etiquetas.
Éstas proporcionan información a los diversos programas informáticos que acceden al contenido de nuestro Blog o bien para añadirlo al índice de un buscador o para analizar datos estadísticos con cualquier finalidad.
Para aplicar las mínimas meta etiquetas con las que debe contar tu Blog ejecuta esta guía paso a paso para ser capaz de informar a los sistemas informáticos que rastreen tu web de quién es el autor, el idioma, la descripción de tu Blog y sus palabras clave: las meta etiquetas básicas en un Blog.
Fundamentalmente son las explicadas en la guía sobre la meta etiquetas básicas en un Blog con los identificadores de verificación de propiedad de herramientas de webmaster de varios buscadores.
La idea es que los sistemas que analicen tu Blog tengan los datos suficientes para reconocer su propiedad, idioma y de qué temática se trata.
2) Marcado de dominio canónico y URL canónica:
El dominio canónico sirve para informar a cualquier sistema que analice tu Blog de cuál es tu URL principal. Al igual que las metae eitquetas es parte del código no visible de la estructura de tu Blog.
Normalmente un Blog o una página web puede utilizar más de una URL. Por ejemplo, en Diarios de la nube hay dos URLs http://diariosdelanube.com y http://www.diariosdelanube.com.
La existencia de dos URLs que referencian al mismo contenido produce duplicidades que afectan a los motores de búsqueda que suelen tratar negativamente.
Para evitar este problema se utiliza la URL canónica, la URL que consolida en una única dirección toda tu información. En las herramientas para webmaster de Google existe la posibilidad de indicar la URL de dominio preferida pero además, puedes indicarlo directamente en tu código utilizando esta línea antes de que se cierre la sección </HEAD> de tu Blog pero SÓLO SI NO ES BLOGGER (si es Blogger fíjate en las instrucciones que vienen a continuación):
<link href='http://www.TU_URL_PREFERIDA.com/' rel='canonical'/>
La URL canónica en Blogger
En Blogger el marcado de URL es automático, No es necesario que marques la URL canónica. Observa en el código fuente de tu página principal, una vez se dibuja en el navegador, que en su interior aparece la línea con el nombre de tu web y rel='canonical'.
Luego verifica que la URL canónica en el interior de las entradas de tu Blog indica toda la dirección de la página de tu entrada:
Es importante que el marcado de URL canónico sea el de la página principal en la dirección de tu Blog y el de las entradas dentro del detalle de las entradas de tu Blog.
Marcado de dominio preferido en Google webmaster Tools:
Adicionalmente en las herramientas para webmaster de Google se puede indicar el dominio favorito (la dirección principal de tu web). De esta manera se evitan duplicidades cuando se rastrean las direcciones.
Para más detalles a este respecto no dudes en pasarte por la guía Cómo evitar contenido duplicado en una web.
3) El título <H1> cuando se trabaja con una imagen.
Algo tan obvio pero que debe contemplarse en la estructura de cualquier Blog. El título tiene una parte visible: en la que podemos ver cómo se llama nuestro Blog y otra invisible: el código fuente que conforma el título.
La parte visible del título:
Por supuesto, no es necesario poner un Logo ni nada por el estilo al lado del título, pero si es necesario que exista el título y coincida al máximo con la dirección de tu Blog.
La parte no visible del título:
En la parte no visible tenemos que distinguir dos zonas: la página principal y las entradas. El título se debe marcar con la etiqueta <H1>, ésta SÓLO debe estar una vez en cada página del Blog.
Se puede utilizar para indicar el título del Blog en la página principal y en el detalle de las entradas para que sea <H1> el título de la entrada.
El marcado con H1,facilita al buscador tener conocimiento del título que debe mostrar en el resultado de una búsqueda.
En líneas generales, para concederle la relevancia adecuada a cada título, intenta marcar siempre así tu código:
Página principal:
- Título del blog con <h1>
- Lista de entradas con <h2>
Entradas del Blog:
- Título del blog con <h2>
- Título de la entrada <h1>
Marcado de un título en Blogger que utiliza una imagen en lugar de texto:
Como utilizo un logo para "crear marca" (branding), me veo obligado a utilizar una imagen. La estructura que recomiendo en este caso es:<h1><a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block;padding-left:0px;padding-top:0px;'/></a></h1>
Se puede apreciar como se indica <h1> y acto seguido va el href <a expr:href= donde a continuación le sigue la imagen <img expr:alt='data:title'. Es de vital importancia en una imagen utilizar el alt porque semánticamente los robots rastreadores de los buscadores le concederán mayor importancia al atributo alt incluso que al <h1>.
En Diarios de la nube utilizo el siguiente código para alternar entre el título del Blog o de una entrada y que éste siempre sea <h1> asegurándome de que sólo exista un <h1> por página:
Para implementar este ejemplo, localiza dentro de la plantilla el texto "<h1>" asociado a la imagen (verás que a su lado aparece el img expr:alt).
Para visualizarlo haz clic aquí
Indica bien el marcado de título de página en el navegador
De esta manera, compartirás en redes sociales y mostrarás adecuadamente en los resultados de búsqueda de los buscadores y en los restreadores el título de tu Blog o entradas según corresponda:<b:if cond='data:blog.pageType == "index"'>Este código indica explícitamente que en la página principal el título sea el nombre del Blog pero en las entradas sea el nombre de la entrada seguido de ~ y el nombre de tu Blog.
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> ~ <data:blog.title/></title>
</b:if>
Este if condicional lo puedes poner justo antes de la etiqueta <head>.
3) Marcado del título en la página principal del Blog y en el detalle de las entrada de un Blog con <H1>. El resto de literales y títulos del Blog <H2>, <H3>, <H4>...
Los literales que conforman las opciones de menú o los títulos de los Gadgets que se muestran a lo largo de todo el Blog no pueden tener marcado <h1> para que en primer lugar se puedan distinguir del título del Blog y en segundo lugar los buscadores puedan identificarlos como "Subencabezados" (<h2>) o "Encabezados secundarios" (<h3>).
Imagina que tienes un Blog que se llama "Blog de pruebas" y tiene varias entradas y literales de menú en su interior, deberás marcar cada título con la etiqueta apropiada:
- Título del Blog <h1> Blog de pruebas </h1>
- Menú del Blog <h3> opción 1 </h3> <h3> opción 2 </h3>...
- Lista de Títulos de una entrada <h2> Entrada del Blog de pruebas 1 </h2>
- Lista de Títulos de una entrada <h2> Entrada del Blog de pruebas 2 </h2>...
En la página principal: La idea es que como se explica en el paso 2), sólo el título del Blog esté marcado como <h1>, los títulos de las entradas como <h2> y el resto de literales según orden de importancia desde <h3> hasta el <hn> que requieras.
En el detalle de las entradas: Dentro de las entradas es quizás más importante que los títulos de la entrada aumenten su relevancia poniéndose en <h1>. De esta manera el buscador concederá mayor relevancia al título de la entrada y la información que contiene la misma que al nombre del Blog, consiguiendo mayores posibilidades de que ésta aparezca en los resultados de búsqueda con mayor facilidad.
En Diarios de la nube, para alternar el uso de <h2> en portada y <h1> en el detalle de una entrada de los títulos utilizo el siguiente código.
Haz clic aquí para verlo
4) Presentación de datos estructurados al usuario y al buscador:
Debes tener en cuenta que el buscador cuando analiza la información de tu Blog tiene en cuenta a parte de los detalles de estructura que estamos revisando en este articulo, los datos estructurados de tu Blog.
Los datos estructurados permiten a los buscadores como Google obtener información de una web que obedece a estructuras de información prefijadas dentro de la misma, para luego mostrarlos en los resultados de las búsquedas.
La utilización de los datos estructurados implica un ligero cambio en la presentación, ya que estos datos tienen una estructura clara e identificable que debe ser siempre visible.
Esto es cómo se muestran los datos estructurados en la portada de Diarios de la nube (author y updated)
Esto es cómo se muestran los datos estructurados en el detalle de una entrada de Diarios de la nube (author y updated)
El marcado de datos estructurados es vital para indicar al buscador quién es el autor de un determinado contenido en Internet y dónde y cómo está actualizando o escribiendo ese contenido. Para conseguir un buen marcado de autor te recomiendo que ejecutes la guía la autoría en Google paso a paso donde además podrás realizar y completar satisfactoriamente la guía para datos estructurados.
5) Marcado de editor:
En el paso 1) con meta etiquetas y en el 4) con las primeras marcas de datos estructurados, hemos indicado a los buscadores y robots rastreadores de la autoría de nuestra web y sus contenidos.
Todos los gadgets informados en la guía son importantes, pero asegúrate de que pones en tu Blog el de tipo "Insignia".
Este Gadget te ayudará especialmente con el marcaje de datos estructurados de usuario. No dudes en comprobar si realizaste todo el marcado de datos estructurados correctamente:
La configuración del aspecto del gadget insignia puede modificarse para presentarlo horizontal, verticalmente y con o sin imagen del perfil Google+.
Comprueba en la prueba de datos estructurados que no aparecen resultados escritos en rojo:
Si continúas teniendo errores en los datos estructurados chequea los puntos del paso 4.
Perfecto Miguel!!! Luego intentó poner el H1 en mi blog :) q tengo una imagen
ResponderEliminarSaludos y espero las siguientes entregas
Genial, a lo largo de estos días termino la entrada al completo. Aplicando la estructura correcta el Blog es más usable y se rastreará mejor. A ver si resulta de interés. Muchas gracias por el tuyo!!!
EliminarMuy bueno, Miguel!
ResponderEliminarHola Ana,
Eliminarmuchas gracias. Fíjate que junto a la autoría y el SEO considero esta entrada vital para un Blog. A ver qué tal aceptación tiene. Un saludo y muchas gracias por tu apoyo.
Me puedes explicar como se hace un post colaborativo. Muchas gracias
ResponderEliminarjajaja, hola Catina, a ver si puedo ayudarte porque yo tampoco he hecho muchos. La idea creo que es decir en la comunidad google+ que tienen montada a tal efecto que se desea hacer un post colaborativo sobre un tema determinado (por ejemplo, postres con nata). Entonces la gente te pasa enlaces de sus postres con nata y tú montas un post con ello. Es algo así, pero te recomiendo preguntarlo en la comunidad de facilisimo que es donde se hacen.
EliminarUn saludo!!!
Y donde se supone que pongo el título H1, en qué parte del código de la página?
ResponderEliminarHola Rissos, en Blogger es casi todo automático y prácticamente no hay que tocar nada. ¿Has comprobado que sólo aparece H1 una vez por página?.
EliminarUn saludo,
Genial post Miguel como siempre. Tengo que cambiar cosas que no estoy haciendo bien. Pero ya que me pongo a cambiar, quiero cambiar todo lo que esté haciendo mal y tengo una duda. Mi blog se llama: "blogisthenewMUST" y el título de todas mis entradas es: "The new MUST is...XXX" y lo que cambio es la parte final donde pongo "XXX" pero el principio es siempre el mismo. Supongo que esto no está bien ¿no?
ResponderEliminarEs que antes de descubrirte leí por ahí lo que pude sobre SEO, y ahora ya no sé cuanto hay de verdad o de leyenda urbana. Por un lado si hago esto amplío la la longitud del título, pero por otro lado entonces todos los títulos serían iguales y será más díficil encontrarme ¿no?. Pero si te soy sincera es así como me gusta el título de las entradas. Aunque si a nivel de SEO me perjudica tendré que ser menos creativa...
Gracias otra vez!!
Encantado como siempre de ayudar. Mira en esta misma guía el código que pone bajo el texto "Indica bien el marcado de título de página en el navegador". Esos "if" sirven para que puedas establecer lo que necesitas. Haz siempre copias de seguridad...
EliminarUn abrazo!
Hola Miguel,
ResponderEliminarcreo que no me he explicado bien....
Si lo he entendido, los "if" sirven para que en las entradas, aparezca primero el título de la entrada seguido del nombre de mi blog.
Pero no me refiero a eso. Mira el nombre de mi blog es: www.blogisthenewmust.com. Y los títulos de mis post son (te pongo 3 ejemplos de post reales):
- The new MUST is...cuida tu pelo en otoño
- The new MUST is...camisetas con mensaje
- The new MUST is...limpieza facial
Es decir, que todos los títulos empiezan con el nombre de mi blog. Y lo que cambia es la segunda parte del título. Me parece más original. Pero ahora la pregunta es...es malo a nivel de SEO?
¿Debería poner los títulos de los post, sólo con la última parte?
Es que por un lado, cuanto más corto sea el título será mejor, y entonces debería quitar la primera parte, pero igual no...no lo sé. No sé que es más adecuado a nivel de SEO.
Espero haberme explicado.
Gracias Miguel! Besitos.
Hola,
Eliminarno hay ningún problema en poner así los títulos, pero con los if que te he mostrado verás que sale por un lado el nombre del Blog y acto seguido el título, haz lo que poner bajo el título "Indica bien el marcado de título de página en el navegador".
En los títulos si repites algo, mejor que sean tus palabras clave pero procura que lo del nombre del Blog salga como te he puesto en el punto anterior.
Cualquier cosa pregunta.
Un saludo!!!
yo tambien uso una imagen como titulo para mi blog, y cuando busco la etiqueta H1 en mi plantilla me aparecen 3 que son estas:
ResponderEliminarH1 class='title' style='background: transparent; border-width: 0px'>
H1
H1 class='title' style='background: transparent; border-width: 0px'>
H1
H1 class='title'>
H1
no se si esta bien y si no lo esta en que parte de la plantilla tengo que poner el H1 para la imagen?
Hola Máximo,
Eliminarmi consejo es que sigas las instrucciones de la guía que van justo bajo el título "Marcado de un título en Blogger que utiliza una imagen en lugar de texto". Ahí te aclaran que el atributo ALT en una imagen tiene mayor prioridad que el H1. Por ello, casi mejor que utilices el atributo ALT.
Luego, si te sientes con fuerzas y haciendo copia de seguridad, sigue el resto de instrucciones que aclaran en ese mismo punto para hacer que H1 sólo salga una vez en la página principal y una sóla vez por entrada (no debe salir varias veecs).
En tu plantilla el H1 se utilizará en muchos sitios, si es Blogger no tienes porqué hacer grandes cambios porque suele estar todo bien configurado. Como mucho, comprueba el atributo ALT.
Un saludo!
Hola, he intentado alternar el uso de <h2 para el titulo del blog y <h1 para los titulos de las entradas con el código que pusiste y me da error. Lo puse en <head, es correcto?
ResponderEliminarEs necesario tener paginas en blogger para poder aplicar ese codigo? Si no es asi donde deberia poner el codigo. Un saludo.
Hola Rubén,
Eliminaresa parte del código va dentro del body. Es localizar dónde estás más o menos poniéndolo para añadir mi forma de hacerlo.
Un saludo!
Hola Miguel,
ResponderEliminarretomando este tema para aplicar lo que dices me surgen mil dudas. Intento ir por partes:
- Marcado de un título en Blogger que utiliza una imagen en lugar de texto. Yo también tengo una imagen como logo. Pero no tengo título. Es decir, tengo la imagen y en la propia imagen como texto he puesto he añadido el título. Por tanto, al cargar la imagen tengo marcada la opción "en lugar del título y descripción". Entonces, aplica lo que dices aquí?
- Con respecto al atributo alt de la imagen de la cabecera del blog...me sale la misma línea que a tí:
"img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId ..."
así que supongo que está bien, pero...¿si quisiera añadir otro alt...como lo haría? Me explico, yo cuando voy estoy escribiendo un post en el editor de blogger, cuando añado una imagen sobre el botón derecho me da opción a añadir propiedades, pero la imagen de la cabecera, al no estar en ningún post...no sé como hacerlo. He pensado cargarla en un post de prueba, añadir atributos y luego subirla como cabecera de nuevo con los atributos ya añadidos pero no sé si me los coge y además supongo que hay una manera más fácil de hacerlo...
- Con respecto a las etiquetas h1, h2...hasta he pensado que mientras tengo tiempo a hacer todas las modificaciones que indicas, que las podría añadir a mano...pero el tema es que el título del post, no aparece en el editor de entradas de blogger. Es decir, si mientras escribo una nueva entrada le doy a "html" me aparece toda la entrada y aquí puedo modificar las etiquetas a h1 h2...pero no me aparece el título de la entrada como tal y por tanto, ni sé que etiqueta le está dando, ni puedo modifcarla...
- En cuanto a la parte de los condicionales que te preguntaba en el comentario anterior, esa parte de código...¿dónde la pongo? Es que he estado buscando en mi plantilla y tengo varias apariciones de "" así que no sé donde colocarlo...o lo coloco en todas las apariciones?
Si me puedes responder a esto te lo agradecería. La parte de datos estructurados, la dejo para cuando haya solucionado todo esto.
Muchas gracias otra vez Miguel y mil besos.
Hola Raquel:
Eliminar- Para la imagen como título aplica todo lo que aparece en la guía bajo el título "3) El título <H1 cuando se trabaja con una imagen."
- El ALT sale al insertar imagen en Blogger. Hay una cajita pequeña donde aparece la descripción que se desea insertar.
- H1 no se puede meter en el editor de entradas. Para solucionar ese tema haz la parte de la guía que se titula: "3) Marcado del título en la página principal del Blog y en el detalle de las entrada de un Blog con <H1. El resto de literales y títulos del Blog <H2, <H3, <H4..."
- Los condicionales ponlos en la plantilla directamente, dentro del body será donde encuentres algunas cosas, otras en el head. Es cuestión de colocar el código donde corresponde. Para dudas con los condicionales tienes esta guía: http://www.diariosdelanube.com/2014/09/como-utilizar-condiciones-en-blogger.html
Un saludo!
Buen post. Sobre todo lo de la imagen con h1 y el alt. No todo el mundo lo sabe.
ResponderEliminar¡Gracias Félix!, es cierto que mucha gente no sabe lo del alt y es fundamental cuando se trabaja con imágenes para título del blog tipo logo. Un saludo amigo!
EliminarHola Miguel, después de intertarlo mil veces, soy incapaz de dejar en la página principal el título del blog (imagen), como h1 y las entradas con el salto de linea en h2. Si lo he conseguido con cada entrada individual, poniendo título de la entrada en h1 y la imagen del blog en h2. Es como está de momento también en la página de inicio.
ResponderEliminarAl tener el ALT la imagen del título, creo que no está demasiado mal, .. pero el problema es sólo puedo poner una entrada en la página de inicio porque si no, se repetiría el h1 de cada una de ellas ..
Algo se me escapa .., tienes idea de que estoy haciendo mal .. ??
Un saludo y gracias !!
El punto 3) de esta guía trata el tema del título con H1. De todas maneras si es una imagen con ALT, eso es lo que más prioridad tiene.
ResponderEliminarCon respecto al resto de la plantilla, haz copia de seguridad y métete dentro de la plantilla busca con CONTROL +F los <h2, <h1, y cámbialos a <h1 o <h2 según corresponda. Mira también los pasos 2 y 3.
Un saludo,