- Desde
- 29 Dic 2012
- Mensajes
- 98
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.
Dentro del head agregaremos lo siguiente:
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
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.
Ahora vienen las metas para indexar el contenido correctamente en Facebook:
Ahora unas cosas mas para indexar todo el contenido y agregar keys, que aunque ya casi no se utilizan pueden servir:
Por ultimo, los títulos:
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:
Eso es todo...
Actualizo:
Pido una disculpa a [MENTION=28190]ecoal95[/MENTION], los créditos son para el.
Fuente: Reemplazar el includable all-head-content en blogger | Emilio Cobos-CMC
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.
HTML:
<head>
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>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
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.
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:
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:
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:
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:
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]-->
HTML:
</head>Eso es todo...
Actualizo:
Pido una disculpa a [MENTION=28190]ecoal95[/MENTION], los créditos son para el.
Fuente: Reemplazar el includable all-head-content en blogger | Emilio Cobos-CMC
Última edición:
