Personalizar títulos en Blogger

2webfacil — Wed, 29 Jul 2009 03:19:30 +0000

El título de una página es muy importante pues indica de manera directa el contenido de nuestro web, además es mostrado por los buscadores en los resultados de las búsquedas por lo cual es necesario tener títulos adecuados en nuestras páginas.

Sintaxis del título en una Página
El titulo en una página se encuentra encerrado entre los tags los cuales se ubican entre los tags <head> de nuestro HTML, entonces la sintaxis sería de la forma: <div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1 </pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><title>Titulo de tu Web</title></pre></td></tr></table></div> Observaciones Es recomendable tener títulos diferentes por cada página, de esta manera los buscadores las reconocerán como páginas diferentes. Este es un error común por lo cual los buscadores solo devuelven un resultado para nuestra página obviando loas demás paginas. Otro punto a tener en cuenta es no dejar paginas con titulo vacío o con los títulos por defecto como “Untitled Page 1″, esta muy improbable que los usuarios nos encuentren mediante los buscadores. Personalizando los títulos en Blogger Lo que haremos es cambiar los títulos concatenando el nombre de la página con el titulo del blog para las páginas internas y dejando intacto el titulo de la página principal. Entonces buscamos el titulo por defecto de nuestro blog: <div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1 </pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><title><data:blog.pageTitle/></title></pre></td></tr></table></div> Ahora lo reemplazamos por el siguiente código que cambiará los títulos para las páginas internas dejando intacto el titulo de la pagina principal. <div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1 2 3 4 5 </pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><b:if cond='data:blog.pageType == "index"'> <title><data:blog.pageTitle/></title> <b:else/> <title><data:blog.pageName/> - <data:blog.title/></title> </b:if></pre></td></tr></table></div> Este tip sencillo de implementar hará que todos los posts de nuestro blog sean indexados por los buscadores y por lo tanto obtener mayor cantidad de visitas. <a href="http://twitter.com/share?url=http%3A%2F%2F2webfacil.com%2Fpersonalizar-titulos-en-blogger%2F&lang=es&via=2webfacil&text=Personalizar títulos en Blogger" class="twitter-share-button">Tweet</a> Tags: <a href="http://2webfacil.com/tag/blog/" title="blog" rel="tag">blog</a>, <a href="http://2webfacil.com/tag/blogger/" title="Blogger" rel="tag">Blogger</a>, <a href="http://2webfacil.com/tag/codigo-fuente/" title="codigo fuente" rel="tag">codigo fuente</a>, <a href="http://2webfacil.com/tag/html/" title="HTML" rel="tag">HTML</a>, <a href="http://2webfacil.com/tag/seo/" title="SEO" rel="tag">SEO</a> </article> <article> <h1>Utilizar Metatags en Blogger</h1> 2webfacil — Tue, 28 Jul 2009 17:35:55 +0000 Como ya hemos comentado en <a href="http://2webfacil.com/como-utilizar-los-metatags/">Como utilizar los Metatags</a> los metatags son muy importantes para indicar a los buscadores el contenido de nuestra web. Veamos como agregar metatags en blogger de manera sencilla. Normalmente se deberían agregar un description y keywords por cada página de nuestro blog, pero solo agregaremos los metatags a la página principal de nuestro blog. En las páginas que no tengan metatags los buscadores generarán automáticamente el description basado en el texto de la página. Código para los Metatags en Blogger Entonces utilizando la sintaxis condicional en Blogger, tendríamos el siguiente código para mostrar los metatags en el home de nuestro blog. Este código debe ser colocado justo antes del tag </head>. <div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1 2 3 4 </pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><b:if cond='data:blog.pageType == "index"'> <meta name='keywords' content='keywords, separados, por, comas' /> <meta name='description' content='Descripcion del sitio web' /> </b:if></pre></td></tr></table></div> Ejemplo Practico Entonces para nuestro blog de ejemplo creado en Blogger tendríamos nuestros metatags personalizados con el siguiente código: <div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1 2 3 4 </pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><b:if cond='data:blog.pageType == "index"'> <meta name='keywords' content='tips, wordpress, blogger, twitter, html, css' /> <meta name='description' content='Tips, tutoriales, ejemplos y descargas para personalizar tu web.' /> </b:if></pre></td></tr></table></div> Sencillo pero les ayudará mucho a posicionar su blog en los buscadores. <a href="http://twitter.com/share?url=http%3A%2F%2F2webfacil.com%2Futilizar-metatags-en-blogger%2F&lang=es&via=2webfacil&text=Utilizar Metatags en Blogger" class="twitter-share-button">Tweet</a> Tags: <a href="http://2webfacil.com/tag/blog/" title="blog" rel="tag">blog</a>, <a href="http://2webfacil.com/tag/blogger/" title="Blogger" rel="tag">Blogger</a>, <a href="http://2webfacil.com/tag/metatags/" title="metatags" rel="tag">metatags</a>, <a href="http://2webfacil.com/tag/seo/" title="SEO" rel="tag">SEO</a>, <a href="http://2webfacil.com/tag/visitas/" title="visitas" rel="tag">visitas</a> </article> <article> <h1>Como utilizar los Metatags</h1> 2webfacil — Sat, 04 Jul 2009 06:15:52 +0000 Los metatags son elementos HTML que permiten indicarle a los buscadores ciertas instrucciones que deseamos. Esto es muy útil por ejemplo para indicarle a los buscadores el texto que queremos que indexe para nuestras páginas. Los metatags son colocados en el header del html es decir entre los tags <head> y </head> y tiene dos parámetros, el name y content del metatag. <div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1 </pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><metatag name="" content=""></pre></td></tr></table></div> Metatags y SEO Los metatags son muy importantes para para la Optimización para buscadores (SEO) por que mediante ellos podemos indicarles que contenido indexar y que mostrar como resultados de la búsqueda. <ul> <li>keywords: indica las palabras clave que contiene nuestro web. </li> <li>description: es el resumen del contenido de la pagina mostrada.</li> </ul> El meta description es utilizado por los buscadores para mostrarlo en los resultados de búsqueda, entonces si deseamos controlar que texto que se muestra en los resultados de la búsqueda podemos incluir y personalizar estos tags. <div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1 2 </pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><meta name="description" content="Resumen de tu web" /> <meta name="keywords" content="tags, separado, por, comas" /></pre></td></tr></table></div> Por ejemplo para este blog, hemos creado nuestros propios metatagas como se muestra en el siguiente código. <div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1 2 </pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><meta name="description" content="Tips, tutoriales, ejemplos y descargas para personalizar tu web" /> <meta name="keywords" content="blog, weblog, 2webfacil, blogger, general, html, wordpress" /></pre></td></tr></table></div> Con lo cual obtenemos el siguiente resultado al momento de buscar 2webfacil en <a href="http://www.google.com/search?q=2webfacil">Google</a> Respecto al description es recomendable colocar uno diferente por cada página de nuestro web para que los buscadores muestren un resumen de acuerdo a cada sección de nuestro web. <a href="http://twitter.com/share?url=http%3A%2F%2F2webfacil.com%2Fcomo-utilizar-los-metatags%2F&lang=es&via=2webfacil&text=Como utilizar los Metatags" class="twitter-share-button">Tweet</a> Tags: <a href="http://2webfacil.com/tag/blog/" title="blog" rel="tag">blog</a>, <a href="http://2webfacil.com/tag/blogger/" title="Blogger" rel="tag">Blogger</a>, <a href="http://2webfacil.com/tag/google/" title="Google" rel="tag">Google</a>, <a href="http://2webfacil.com/tag/metatags/" title="metatags" rel="tag">metatags</a>, <a href="http://2webfacil.com/tag/seo/" title="SEO" rel="tag">SEO</a>, <a href="http://2webfacil.com/tag/wordpress/" title="Wordpress" rel="tag">Wordpress</a> </article> <article> <h1>Posicionamiento en buscadores – SEO</h1> 2webfacil — Sat, 04 Jul 2009 05:58:57 +0000 El posicionamiento en buscadores o Search Engine Optimization (SEO) consiste en aplicar diversas técnicas para lograr que los buscadores sitúen una página web en las primeras posiciones de los resultados de búsqueda lo cual significa mayor cantidad de búsquedas para nuestro sitio web. La mayoría de buscadores tienen amplia documentación para ayudarnos a mejorar la ubicación de nuestros sitios web en los resultados de búsqueda. Recientemente Google ha puesto a disposición una <a href="http://www.google.com/webmasters/docs/search-engine-optimization-starter-guide.pdf">Guía SEO para principiantes</a>. Veamos que puntos recomiendan. Títulos de páginas únicos y concisos Los títulos de tus páginas deben ser únicos, cortos y concisos indicando el contenido del mismo, de esta forma los usuarios reconocerás fácilmente la información a la que accederán. Un error común es colocar los títulos de las páginas con lo cual aparecerá “Untitled” o “New Page 1“. <div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1 </pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><title>2WebFacil</title></pre></td></tr></table></div> Usar el metatag description El metatag description es utilizado para indicarle a los buscadores un resumen del contenido de la página que se esta visualizando, este contenido es utilizado como texto descriptivo en los resultados de búsqueda. Si no se encuentra el description el buscador generará automáticamente un pequeño resumen con las primeros párrafos que se encuentran en nuestro html. <div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1 </pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><meta name="description" content="Tips, tutoriales para personalizar tu web" /></pre></td></tr></table></div> Mejorar las estructura de los URLs Es recomendables que las URLs contengan las palabras clave de las páginas parte del título, esto hará que sea mas sencillo recordarlas y puede indicar la estructura de nuestros documentos. Por ejemplo es mejor crear una página llamada contacto.html para nuestra página de contáctenos que una llamada file3.html. Si estas utilizando algún lenguaje de servidor es recomendable no utilizar los IDs y utilizar los keywords, por ejemplos: <div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1 </pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;">http://tuweb.com/products.php?idcat=5&idprod=116</pre></td></tr></table></div> Es poco probable que el usuario pueda identificar a que producto accederá en lugar de ello se puede cambiar la estructura del html de la siguiente forma: <div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1 </pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;">http://tuweb.com/products/fruits/apples/</pre></td></tr></table></div> Es obvio que en el segundo enlace estas entrando a la sección productos, estas visualizando las manzanas de la categoría frutas. Crea tu sitio fácil de navegar Organiza tus archivos de forma lógica de manera que el usuario pueda detectar a que información esta accediendo, por ejemplo los productos puedes colocarlos dentro de una carpeta llamada productos y puedes crear una carpeta por cada producto que tienes. Ofrece contenido y servicios de calidad Si ofreces un sitio con contenido de calidad hará que los visitantes regresen nuevamente, esto ayuda a fidelizar a los usuarios, además si un usuario ha encontrado útil tu web de seguro lo recomendará y así conseguirás mas visitas. Para ello puedes escribir contenido fácil de leer, crea contenido único, ofrece productos y servicios exclusivos. Escribe correctamente los enlaces Los enlaces son utilizados para redireccionar a otras páginas, pero estos enlaces deben contener explicitamente el contenido al cual se accederá. Por ejemplo si tienes un enlace al listado de productos es recomendable colocar ‘Listado de Productos‘ en lugar de ‘Click aqui‘. <div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1 </pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;">...puede visitar nuestro <a href="productos.html">Listado de Productos</a></pre></td></tr></table></div> Utiliza los tags de texto adecuadamente Los tags para formatear texto (<h1>, <h2> … <h6>) aparte de dar el tamaño de los textos indica la estructura del contenido, un tag <h1> es como el titulo del texto, <h2> como si fuera el subtitulo y así sucesivamente. Esto ayudará a los buscadores a tener la estructura adecuada del contenido de nuestra página. Optimiza el contenido de las imágenes Si utilizas imágenes es recomendable agregarle la propiedad alt en donde se coloca el contenido de la imagen, por ejemplo si estas mostrando una imagen con la fachada de una casa el código que debes poner sería: <div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1 </pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><img src="photo.jpg" width="200" alt="Fachada Edificio San Andres" /></pre></td></tr></table></div> De esta forma los buscadores tendrán una referencia del contenido de la imagen, y en los buscadores de imagen pueden encontrarlas e incluso recibir visitas por este método. Utiliza el archivo robots.txt Este archivo le indica a los buscadores que contenidos deben o no deben indexar, de esta forma podemos restringir que se indexen los contenidos de la zona de usuarios registrados por ejemplo. Utilizar la propiedad rel=”nofollow” en los enlaces Esta propiedad le indica a los buscadores que no rastreen o indexen el enlace, esto es útil para prevenir que se rastreen paginas con contenido dudoso, por ejemplo es lo comentarios de los blogs los enlaces tiene la propiedad rel=”nofollow” para indicar que estos links no forman parte de contenido del blog y que no deben seguirse. también es útil para prevenir el spam. <div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1 </pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><a href="http://webspam.com" rel="nofollow">Comentario Spam</a></pre></td></tr></table></div> Utilizar Google Webmaster Tools <a href="www.google.com/webmasters/tools/?hl=es">Google Webmaster Tools</a> son un conjunto de herramientas gratuitas para facilitar el seguimiento de las páginas indexadas así como de errores y sugerencias para nuestras páginas. En resumen son tips sencillos y fáciles de implementar los cuales nos ayudarán a posicionarnos adecuadamente en los buscadores y de esta forma conseguir más visitas. <a href="http://twitter.com/share?url=http%3A%2F%2F2webfacil.com%2Fposicionamiento-en-buscadores-seo%2F&lang=es&via=2webfacil&text=Posicionamiento en buscadores - SEO" class="twitter-share-button">Tweet</a> Tags: <a href="http://2webfacil.com/tag/blog/" title="blog" rel="tag">blog</a>, <a href="http://2webfacil.com/tag/contacto/" title="contacto" rel="tag">contacto</a>, <a href="http://2webfacil.com/tag/google/" title="Google" rel="tag">Google</a>, <a href="http://2webfacil.com/tag/posicionamiento/" title="posicionamiento" rel="tag">posicionamiento</a>, <a href="http://2webfacil.com/tag/seo/" title="SEO" rel="tag">SEO</a>, <a href="http://2webfacil.com/tag/visitas/" title="visitas" rel="tag">visitas</a> </article> </main></body></html>

2WebFacil » SEO

Personalizar títulos en Blogger