nota automatica

miércoles, 11 de septiembre de 2013

SEO en la cabecera de blogger

Como se sabe el SEO es algo muy importante para posicionar tu blog en buscadores.

Y una de las primeras cosas para poder partir bien desde el inicio con tu blog es configurar correctamente el <head>.

Aquí te dejo paso a paso lo que debe contener tu blog:



*Todo lo que este entre codigo HTML es lo que se debe colocar.


Código HTML:
<head>
Dentro del head agregaremos lo siguiente:
Código HTML:
<!-- script redirección -->
 <script type='text/javascript'>
  //<![CDATA[
  (function(){
   var URL = document.URL,
    reg = /\.blogspot\.(com\...|..)\//
   if( URL.match( reg ) ){
    window.location = URL.replace( reg, ".blogspot.com\/ncr\/" )
   }
  })()
  // Fallback CSS para cuando no hay javascript
  document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
  //]]>
 </script>
Esto es importante si no tienes un dominio aún, si ya lo tienes no hace falta colocarlo pues su función es evitar la re-dirección por países (.ar, .co, etc.) dejandola en .com.

Lo siguiente son comentarios condicionales IE -> Permite usar CSS condicionalmente. La mejor forma de usarlos sería en el <html>, pero no se puede sin tranformar en entidades

Código HTML:
<!--[if IE 8]>
  <script type='text/javascript'>document.documentElement.className += ' ie8 lt-ie9'</script>
 <![endif]-->
 <!--[if IE 7]>
  <script type='text/javascript'>document.documentElement.className += ' ie7 lt-ie8 lt-ie9'</script>
 <![endif]-->
 <!--[if lt IE 7]>
  <script type='text/javascript'>document.documentElement.className += ' ie6 lt-ie7 lt-ie8 lt-ie9'</script>
 <![endif]-->
Ahora vamos a hacer que funcione correctamente en todos los navegadores:

*Importante que cambies donde dice "CODIGO" por el código que bing te otorgue.

Código HTML:
<!--Meta X-UA-Compatible -> Mejor experiencia para IE -->
 <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'/>
 
 <!-- meta viewport -> dispositivos móviles -->
 <meta content='width=device-width,initial-scale=1.0,maximum-scale=1.0' name='viewport'/>

 <!-- Para que indexe Bing [código proporcionado por él] -->
 <b:if cond='data:blog.url == data:blog.homepageUrl'>
  <meta content='[CODIGO]' name='msvalidate.01'/>
 </b:if>
Ahora vienen las metas para indexar el contenido correctamente en Facebook:

Código HTML:
<meta property='og:site_name' expr:content='data:blog.title'/>
 <meta property='og:type' content='blog'/>
 <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
 <b:if cond='data:blog.metaDescription'>
  <meta property='og:description' expr:content='data:blog.metaDescription'/>
 <b:else />
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
   <!-- Metas home -->
   <meta property='og:description' content='[AQUÍ COLOCA LA DESCRIPCIÓN DE TU BLOG]'/>
  <b:else />
   
   <meta name='description' property='og:description' expr:content='data:blog.pageName + ": " + data:blog.title'/>
  </b:if>
 </b:if>

 <!-- Imagen del post -->
 <b:if cond='data:blog.postImageThumbnailUrl'>
  <meta property='og:image' expr:content='data:blog.postImageThumbnailUrl' />
 </b:if>

Ahora unas cosas mas para indexar todo el contenido y agregar keys, que aunque ya casi no se utilizan pueden servir:

Código HTML:
<meta name='keywords' content='[palabras, clave, separadas, por, coma]'/>

 <!-- Indexación -->
 <b:if cond='data:blog.pageType == "archive"'>
  <!-- No queremos indexar en los archivos -->
  <meta content='noindex,nofollow' name='robots'/>
 <b:else />
  <b:if cond='data:blog.pageType == "error_page"'>
   <!-- Ni en las 404 -->
   <meta content='noindex,nofollow' name='robots'/>
  <b:else />
   <b:if cond='data:blog.pageType == "index"'>
    <b:if cond='data:blog.homepageUrl == data:blog.url'>
     <!-- En el home sí -->
     <meta content='index,follow' name='robots'/>
    <b:else/>
     <!--  Pero en el resto de las index no -->
     <meta content='noindex,nofollow' name='robots'/>
    </b:if>
   <b:else />
    <!-- En el resto (páginas y posts) sí -->
    <meta content='index,follow' name='robots'/>
   </b:if>
  </b:if>
 </b:if>

 <!-- Links rel=next y rel=prev -> Indexación también -->
 <b:if cond='data:blog.pageType == "item"'>
  <b:if cond='data:blog.newerPageUrl'>
   <link expr:href='data:blog.newerPageUrl' rel='next'/>
  </b:if>
  <b:if cond='data:blog.olderPageUrl'>
   <link expr:href='data:blog.olderPageUrl' rel='prev'/>
  </b:if>
 </b:if>

 <!-- Contenido -->
 <meta content='all' name='audience'/>
 <meta content='general' name='rating'/>
Por ultimo, los títulos:

Código HTML:
<b:if cond='data:blog.url != data:blog.homepageUrl'>
  <meta property='og:title' expr:content='data:blog.pageName + ": " + data:blog.title'/>
  <title><data:blog.pageName/>: <data:blog.title/></title>
 <b:else/>
  <meta property='og:title' expr:content='data:blog.pageTitle'/>
  <title><data:blog.pageTitle/></title>
 </b:if>

  <b:include data='blog' name='all-head-content'/>

Ya solo nos falta colocar lo último. La url canonica, favicon, descripción, imagen del post, feed y un script para la compatibilidad con HTML5:

Código HTML:
<!-- Meta content-type está obsoleta, usaremos charset -->
 <meta charset='utf-8' />
 <meta name='generator' content='blogger' />

 <!-- Link al favicon (es el personalizado) -->
 <b:if cond='data:blog.blogspotFaviconUrl'>
  <link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>
 </b:if>

 <!-- Link rel=canonical -->
 <link rel='canonical' expr:href='data:blog.canonicalUrl' />

 <!-- La descripción -->
 <b:if cond='data:blog.metaDescription'>
  <meta expr:content='data:blog.metaDescription' name='description' />
 </b:if>

 <!-- La imagen del post -->
 <b:if cond='data:blog.postImageThumbnailUrl'>
  <link rel='image_src' expr:href='data:blog.postImageThumbnailUrl' />
 </b:if>


 <!-- Link rel=me si existe -->
 <b:if cond='data:blog.meTag'>
  <data:blog.meTag />
 </b:if>

 <!-- Links del feed -->
 <b:if cond='data:blog.feedLinks'>
  <data:blog.feedLinks />
 </b:if>

 <!-- Compatibilidad con HTML5 sí, pero no para IE9, que es un buen navegador -->
 <!--[if lt IE 9]>
  <script src='http://html5shiv.googlecode.com/svn/trunk/html5.js'></script>
 <![endif]-->
Código HTML:
</head>


Eso es todo...
Imprimir artículo

No hay comentarios:

Publicar un comentario

Mil Trucos Blogger