Tecnología

Diarios de la nube Idea guardada 0 veces
Sé la primera persona en valorar esta idea Valorar

Cómo debe ser la estructura de un Blog para un correcto posicionamiento: SEO ON PAGE.

estructura de un Blog.


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.
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:
El Blog contiene una parte que todos podemos ver, su presentación (las imágenes, el título, sus entradas...) pero para que su visualización sea posible existe una parte no visible que la dibuja, el código fuente.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:<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:



El título de Diarios de la nube lleva un logo con la nube dibujada en un marco que a su derecha contiene las palabras "Diarios de la nube".

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" >
        <img expr:alt="data:title" expr:height="data:height" expr:id="data:widget.instanceId + &quot;_headerimg&quot;" expr:src="data:sourceUrl" expr:width="data:width" /></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 visualizarlo haz clic aquíLuego el código fuente del título es el estándar en Blogger pero indicando <H1> para la imagen del nombre del Blog en la página principal y sin <H1> en las entradas:
 <div id="header-wrap">
<div id="header-wrapper">
      <b:section class="header" id="header" maxwidgets="1" showaddelement="no">
        <b:widget id="Header1" locked="true" title="Diarios de la nube (cabecera)" type="Header">
          <b:includable id="main">
  <b:if cond="data:useImage">
    <b:if cond="data:imagePlacement == &quot;REPLACE&quot;">
      <!--Show just the image, no text-->
<b:if cond="data:blog.pageType == &quot;index&quot;">
      <div id="header-inner">
      <h1><a expr:href="data:blog.homepageUrl" >
        <img expr:alt="data:title" expr:height="data:height" expr:id="data:widget.instanceId + &quot;_headerimg&quot;" expr:src="data:sourceUrl" expr:width="data:width" /></a></h1>
      </div>
    <b:else/>
<div id="header-inner">
        <a expr:alt="data:title" expr:href="data:blog.homepageUrl" >
          <img expr:alt="data:title" expr:height="data:height" expr:id="data:widget.instanceId + &quot;_headerimg&quot;" expr:src="data:sourceUrl" expr:width="data:width" />
        </a>
      </div>
</b:if>
    <b:else/>
      <!--
      Show image as background to text. You can"t really calculate the width
      reliably in JS because margins are not taken into account by any of
      clientWidth, offsetWidth or scrollWidth, so we don"t force a minimum
      width if the user is using shrink to fit.
      This results in a margin-width"s worth of pixels being cropped. If the
      user is not using shrink to fit then we expand the header.
      -->
      <div expr: id="header-inner">
        <div class="titlewrapper" >
          <h1 class="title" >
            <b:include name="title"/>
          </h1>
        </div>
        <b:include name="description"/>
      </div>
    </b:if>
  <b:else/>
    <!--No header image -->
    <div id="header-inner">
      <div class="titlewrapper">
        <h1 class="title">
          <b:include name="title"/>
        </h1>
      </div>
      <b:include name="description"/>
    </div>
  </b:if>
</b:includable>El resultado en HTML será una correcta estructura de imagen con título en la página principal:
<h1>
<a href="http://www.diariosdelanube.com/" ><img alt="Diarios de la nube" height="42px; " id="Header1_headerimg" src="http://2.bp.blogspot.com/-owIJk39QmJ8/Usxzdef-eVI/AAAAAAAAKyo/md1iPkWpeQc/s1600/Logo_pruebas5.png" width="180px; "/></a></h1>
y en las entradas el <h1> sólo será el título de la entrada.

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 == &quot;index&quot;">
<title><data:blog.pageTitle/></title> 
<b:else/>
<title><data:blog.pageName/> ~ <data:blog.title/></title>
</b:if>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.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

<b:if cond="data:blog.pageType != &quot;item&quot;">

<b:if cond="data:post.title">

      <h2 class="post-title entry-title">

     <b:if cond="data:post.link">

       <a expr:href="data:post.link"><data:post.title/></a>

     <b:else/>

        <b:if cond="data:post.url">

          <a expr:href="data:post.url"><data:post.title/></a>

        <b:else/>

          <data:post.title/>

        </b:if>

     </b:if>

      </h2>

</b:if>

<b:else/>

      <h1 class="post-title entry-title">

     <b:if cond="data:post.link">

       <data:post.title/>

     <b:else/>

        <b:if cond="data:post.url">

          <data:post.title/>

        <b:else/>

          <data:post.title/>

        </b:if>

     </b:if>

      </h1>

</b:if>

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)

Datos estructurados


Esto es cómo se muestran los datos estructurados en el detalle de una entrada de Diarios de la nube (author y updated)

datos estructurados cabecera


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. 

Miguel García Sánchez - Colomer


Es necesario completar todo el marcado de autoría y conexiones a Google+ con los "gadgets" básicos para tu Blog y su conexión con esta red social: Conecta tu Blog con Google+.

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:
Herramienta de prueba de datos estructurados


Si continúas teniendo errores en los datos estructurados chequea los puntos del paso 4.

Fuente: este post proviene de Diarios de la nube, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Envía una notificación de una presunta infracción de derechos. También puedes hacerlo a través de nuestro formulario de contacto.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

SEO con imágenes

Las imágenes que utilizas en tu Blog, en tu web, no son sólo un reclamo o un añadido decorativo para tus contenido. Pueden servir a los buscadores web para comprender mejor la información que proporci ...

Etiquetas: generalseo

Recomendamos

¡No te pierdas nuestra selección diaria!

Suscríbete y recibirás en tu correo nuestras mejores ideas

Suscríbete ahora

Relacionado

general desarrollo web html5 ...

Dia #3 – Estructura básica de html5

Estructura básica Aunque gran parte de la atención que se tiene sobre HTML5 gira en torno a las nuevas API, y sus 30 nuevos elementos con la nueva semántica que se puede utilizar en tradicionales páginas estáticas, también en las franja de controles de formularios. Vamos a tocar un poco el tema de lo básico como veníamos tratando hasta ahora, Vamos a ver un poco la estructura básica y algunas mejo ...

Sin categoría

10 Páginas que debe tener un blog bien hecho

Cuando se habla de blogs, uno piensa, sobre todo, en la parte de los contenidos dinámicos que se publican periódicamente, los “posts”, que son los protagonistas y la esencia de cualquier blog. Imagen de Shutterstock - ©g-stockstudio Pero para tener una buena estructura de un blog se debe incluir también otro tipo de elementos e información, una información estática (poco variable en el tiempo) que ...

tecnología

TIPS DE BLOGGER: COMO CAMBIAR LA ESTRUCTURA DE TU BLOG// BUSCAR Y EDITAR PLANTILLAS. - tijeras rosa blog -

¡Hola! en el post de hoy le damos la bienvenida a una nueva sección en el blog: tecnología y aunque este post se refiere un poco más a la creación de contenido, quise incluirlo en esta sección. Poco a poco les enseñare a crear blogs de calidad y utilizar las herramientas y recursos que la plataforma les da. Bien, en este primer post les enseñare como cambiar la estructura de su blog en base a plan ...

avanzado BLOG redes sociales ...

Botones para imprimir, enviar por correo y compartir por Whastapp tus entradas

Dicen que si no estás en las redes sociales no existes y en cierto modo es así, si el posicionamiento web no es tu punto fuerte, crear una comunidad activa y participativa siendo activa en tus redes sociales puede hacer crecer tu blog. Aunque Google es Google. Esta semana he estado de cambios en el diseño del blog, me he centrado en simplificarlo al máximo y hacerlo todo más sencillo. Si te fijas, ...

general desde0

Cómo poner un menú en Blogger sin tener experiencia en informática o programación

El menú en un blog sirve para organizar los contenidos que éste contiene en categorías que se le puedan mostrar al usuario para que navegue por ellas sin dificultad. La ventaja de utilizar un menú es que a parte de facilitar el acceso a tu información, la estructuras y ordenas de una manera lógica. Esta guía te explica paso a paso con todo lujo de detalles cómo poner un menú de una manera sencilla ...

desde0

Cómo crear un menú con submenús en Blogger sin tener experiencia en informática o programación

Crear un menú en cualquier Blog es algo fundamental para organizar nuestros contenidos de manera que podamos presentarlos a nuestros usuarios de una manera estructurada y sencilla. Hemos tratado con anterioridad cómo crear un menú sencillo en Blogger sin tener ninguna experiencia en programación, con simples opciones que agrupan entradas bajo las etiquetas de tu Blog y que se puede poner con suma ...

general social

Cómo poner botones para redes sociales al final de tus entradas

Muchos Bloggers prefieren añadir botones para redes sociales al pie de sus entradas para que los usuarios puedan compartir el contenido que ha sido de su agrado. Vamos a aprender a colocar en el pie de entradas botones para compartir en Facebook, Twitter y Google+ nuestras creaciones.¿Qué son los botones para las redes sociales en un Blog?: Los componentes oficiales o no oficiales de las distinta ...

avanzado BLOG blogging ...

Cómo instalar un slider de imágenes en blogger

Esta semana he recibido un correo con esta duda: ¿Cómo instalar un slider de imágenes debajo del cabecero en blogger? Y no es la primera vez que me preguntan por el mismo tema. Este tipo de correos no puedo contestarlos uno a uno, prefiero anotar las dudas y cuándo se repiten mucho, desarrollar un tutorial en el blog, para que pueda verlo todo el mundo. Si me conoces un poco, ya sabes que no soy m ...

general

Crea una barra de menús que quede siempre fija en la parte superior de tu Blog.

La creación de un menú fijo para la parte superior del Blog es una popción a tener en cuenta dependiendo del tipo de presentación y la plantilla que se está utilizando. Cuando tratamos Blogs que enumeran gran cantidad de entradas y estas hacen qe haya que desplazarse verticalmente por los contenidos, el usuario puede quedar desprovisto de elementos de navegación hasta que llega a la parte inferior ...

internet blog intermedio ...

Cómo poner la fecha debajo del título en Blogger

Si has visitado mi página de Cursos para Bloggers puede que te hayas fijado en la posición de la fecha de las entadas del blog, centrada debajo del título. Me han llegado varios emails preguntándome una manera sencilla de mover la fecha en Blogger... Y bueno, no sé si será la más sencilla de todas, pero es la que he usado yo y puedo asegurarte que funciona.Mover la fecha debajo del título 1.- Abri ...