Optimización de Motores de Busqueda para Dummies
Introducción
Por @Dorex89
El posicionamiento en buscadores, posicionamiento web u Optimizador de motores de búsqueda (SEO por sus siglas en inglés, de Search Engine Optimizer) es el proceso de mejorar la visibilidad de un sitio web en los diferentes buscadores, como Google, Yahoo! o Bing de manera orgánica, es decir sin pagarle dinero al buscador para tener acceso a una posición destacada en los resultados. (Wikipedia se lleva el primer lugar en los agradecimientos de la tesis).
Olvidemos aquel momento en que debíamos pagar para aparecer en la parte superior de las búsquedas, ese sistema aunque era muy sencillo se destruyo a si mismo en el momento en que las búsquedas se tergiversaban al arrojar resultados que nada tenían que ver con lo que necesitábamos. Es obvio que volverán a surgir, porque Google domina tu vida, pero mientras tanto, hay maneras de lograrlo utilizando la vieja escuela.
¿Que debemos saber?
En primer lugar, tenemos que entender que los rastreadores de motores de búsqueda, especialmente ESE que domina tu vida, pero no se mencionara ningún nombre para no evidenciarlo, son capaces de leer todos los elementos lógicos de tu pagina, todo eso es información antigua. Sin embargo, los buscadores también están empezando a basar el posicionamiento en la web en base a los resultados de su presencia social y nombramientos en general. Así que, para lograr un buen SEO es necesario implementar al mismo tiempo una buena estrategia de Social Marketing Optimization, tómenlo o déjenlo, eso puede hacerte alguien, o nadie, en internet.
Paso 1: Fijar nuestra estructura de HTML básica.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>Garabatos Yuqueros</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
</body>
</html>
Esta estructura establece los estándares que le dirán al buscador que hacer exactamente con tu pagina. Al principio del código establecemos que clase de documento es y en que lenguaje está escrito. Entre los tags de <head></head> le informamos al buscador que utilizaremos un conjunto estándar conocido como utf-8. Luego, tenemos el titulo de nuestra página web y hemos agregado un código que nos ayudara con el bug de compatibilidad de internet Explorer para cargar HTML5. Los tags de <body></body> son los que establecen y estructuran el contenido a aparecer en nuestra página. Sencillo y fácil, pero es conveniente buscar información ya que simplemente pasamos por lo básico.
Paso 2: Añadir los Meta Tags.
Volvemos al principio de nuestro código y por debajo del tag <head> escribimos el siguiente código:
<meta name=”description” content=”Garabatos Yuqueros y como encontrarlos” />Esta línea le dice al motor de búsqueda que mostrar en los resultados justo debajo del titulo de la pagina web. This line tells search engines what to display on the search results right below your page title.
Un punto muy importante y que a veces es olvidado, es que tanto como el titulo y los meta tags de cada una de las páginas del sitio web a optimizarse deben ser especificas, es decir, cada pagina del sitio posee su propio título y meta tags. Ahora el código luce de la siguiente manera:
<head>
<meta name=”description” content=” Garabatos Yuqueros y como encontrarlos ” />
<meta charset=utf-8>
<title>Garabatos Yuqueros</title>
<!—[if IE]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]—>
</head>
Con respecto a los meta-keywords, no van a tratarse en este tutorial para no perder el foco del mismo.
Paso 3: Enlazando nuestro CSS y nuestro JS.
Es común encontrar en el código de la mayoría de las páginas webs enlaces a nuestro CSS y a nuestro JS. Sin embargo, si vamos a seguir los consejos del sabio Google, deberíamos tratar de mantener nuestras consultas externas (solicitudes de HTTP, tipo Jquery) al mínimo, con el fin de mantener nuestro CSS y JS a un archivo cada uno si es posible. Continuando con el tutorial, añadimos las solicitudes externas a nuestro código. Primero, enlazamos a nuestra stylesheet externa añadiendo el siguiente código, justo antes del tag </head>:
<link rel="stylesheet" href="css/stylesheet.css">Luego, hacemos lo mismo para nuestro archivo de Javascript de la siguiente manera:
<script src="js/ejemplo.js"></script>Añadimos el javascript al final de nuestra pagina, justo antes del tag </body> para que nuestro codigo quede de la siguiente manera:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta name=”description” content=” Garabatos Yuqueros y como encontrarlos ” />
<meta charset=utf-8>
<title>Garabatos Yuqueros</title>
<!—[if IE]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]—>
</head>
<body>
<script src=”js/ejemplo.js”></script>
</body>
</html>
Porque añadir el Jquery al final de la pagina?:
- Hace que la pagina cargue más rápido, ya que no debemos esperar a procesar todo el Javascript.
- Ayuda a los motores de búsqueda a leer el contenido de la pagina. Esto ya que, el mecanismo del buscador empieza a leer el código desde el principio hasta el final, si el JS es añadido al principio de la pagina, el motor de búsqueda pricesa todo el JS antes de alcanzar el contenido de tu pagina. Está demás decir que queremos que el motor de busqueda vaya directo al contenido para obtener un mejor posicionamiento. Todo JS, interno o externo, al que se le haga referencia debería ir al final de la pagina. CSS O JS, sigue las reglas de jerarquia y coloca los archives mas importantes al principio, y añade los otros consecutivamente.
Paso 4: Toques Finales.
Ya casi terminamos, pero tenemos que agregarle el contenido (si, porque de hacerlo en una pagina real, esta debe tener contenido D=). Nosotros hemos utilizado HTML5, ya que es prácticamente la cosa más sencilla y hermosa del mundo, y nos ayuda a hacer la pagina aun más amigable a los buscadores, pero cabe destacar que sin importar la técnica que estés utilizando, trata de utilizar una semántica apropiada y sencilla, a modo que los motores de busqueda puedan interpretar las instrucciones rapidamente. En este momento para “rellenar” el contenido de nuestro <body> vamos a utilizar lo básico de html5. Si no quieren ver esto, pasen al siguiente paso, si no saben cuales son los elementos básicos de html5 sigan aqui, y completen el codigo para que quede de esta manera:
<!DOCTYPE html> <html lang=”en”> <head> <meta name=”description” content=” Garabatos Yuqueros y como encontrarlos ” />
<meta charset=utf-8>
<title>Garabatos Yuqueros</title>
<!—[if IE]> <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]—>
</head>
<body>
<header>
<h1><a ref="#">Garabatos Yuqueros</a></h1>
<nav>
<ul>
<li><a ref="#">Casita</a></li>
<li><a ref="#">Photoshop</a></li>
<li><a ref="#">Illustrator</a></li>
<li><a ref="#">Tecnoyucas</a></li>
</ul>
<nav>
<section>
<article>
<h2>Aqui va el titulo de un post</h2>
<p>Quien quiere ser millonario? D=
dgsfshf
sgsgsd
sgsdgsdgsdg
sdgsdg</p>
<a href="#">Si le das click aqui lees mas...</a>
</article>
</section>
<aside>
<h3>Recursos</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<p>Aqui va un comentario inteligente</p>
</aside>
<footer>
<p>Tecnoyucas 2011 - All Rights Reserved</p>
</footer>
<script src="js/ejemplo.js"></script>
</body>
</html>
Para saber un poco mas sobre como usarlos y donde ubicar los elementos de HTML5 (en ingles) visiten la pagina de los Doctores del HTML5, vale la pena. Y bueno, ya tenemos una plantillita super básica y simple que será fácil de procesar por cualquier motor de búsqueda.
Paso 5: Sitemaps y Robots
Para finalizar con nuestro SEO, solo necesitamos dos cositas más. Nuestros Sitemaps, y nuestros Robots. Estos van a ubicarse en nuestro archivo ROOT, y van a ayudar a los motores de búsqueda en todo lo relativo a navegación y clasificación de los directorios de nuestra página web.
A saber:
El Sitemap.xml es simplemente un archivo resumen de archives y carpetas que puedes (y deberias) colocar en orden de importancia. Basicamente, le estamos haciendo la mitad del trabajo a los motores de búsqueda (lo que hace la gente por ser popular D=). Para entender un poco más lo que digo bájense el archivo de ejemplo que está más abajo en este post. De todas máneras, para tener más conocimiento acerca de los sitemaps, les recomiendo leerse este post:
¿Qué es y para que sirve un Sitemap?
De todas maneras, para que vean un ejemplo de como luce un Sitemap, les dejo este codigo, cabe destacar que encontraran uno así por cada archivo o carpeta de su site:
<url>
<loc>http://www.yuquitadeejemplo.com/</loc>
<lastmod>2011-10-01</lastmod>
<changefreq>daily</changefreq>
<priority>1.0</priority>
</url>
Existen miles y millones de herramientas online para hacer los sitemap automáticamente, pero es mejor prevenir que lamentar, así que a aprender a hacerlo para verificar que cuando usemos las herramientas, no haya errores.
Por ultimo, creamos un archivo robot.txt simple. Este existe con la finalidad de crear las condiciones en las cuales los robots de los buscadores existen. Por ejemplo, si quieres decirle al motor de búsqueda que ignore X archivo o carpeta, el robot.txt tendría el código siguiente:
User-agent: *
Disallow: /category/design.html
De todas maneras, esto en realidad no es tan necesario, y Google nos brinda una forma mejor para descartar paginas.
Paso 6: Registrar el Sitio.
Este paso se hara unicamente cuando el sitio este subido al server y activo. Y lo unico que debemos hacer es registrarlo en el Google Webmaster Tools, y seguir las instrucciones paso a paso, que vamos es muy sencillo, ellos generalmente se explican muy bien xD. No debemos olvidar decirle al motor de busqueda, Google o cualquier otro (existen otros?), donde encontrar exactamente nuestros Sitemaps y Robots, para que la cosa funcione!.
Bueno, that’s all! Espero les sirva de algo!
De todas formas, my dear and beloved partner @Felixcm88 estará haciendo un tutorial de SEO más adelante, en el que descubrirán técnicas más avanzadas para el posicionamiento y optimización en cuanto a motores de busqueda.
Por ultimo, les dejo el link para la descarga de archivos de Ejemplo y Practica
Besos, Dore
-
yucazos ha publicado esto
