Temido por muchos diseñadores de páginas web, el SEO a menudo parece ser un dolor de cabeza que se debe dejar a los programadores o analistas de marketing, pero no hay razón para quedarse al margen. En este rápido tutorial, crearemos una plantilla HTML simple mientras establecemos algunas de las mejores prácticas que pueden influir en el SEO de su sitio desde la palabra ir.

---

Introducción

La optimización de motores de búsqueda o SEO es la forma en que configura su sitio para que los motores de búsqueda lo califiquen más e influye en cómo se muestra la información en los resultados de búsqueda. Se acabaron los días en que comprar Google Adwords era la mejor manera de aparecer en la parte superior de una consulta de búsqueda, especialmente porque muchos anunciantes no son relevantes para los resultados de búsqueda, lo que ha llevado a los usuarios a desconfiar cada vez más de los enlaces patrocinados. Adwords se recuperará, pero hay formas de influir en su motor de búsqueda actual.

En primer lugar, debemos comprender que los rastreadores de los motores de búsqueda, especialmente la araña de Google, leen la fuente de su página haciendo suposiciones de acuerdo con el contenido y el marcado. La jerarquía lógica de HTML es crucial para determinar la importancia del contenido, pero los rumores en Internet nos indican que Google también está empezando a basar sus resultados en su presencia social y en su página. Así es, puedes olvidarte de Facebook y Twitter como simples herramientas de juego, podrían ayudar a hacer o deshacer tu sitio web..

Jumping spider de Rundstedt B. Rovillos, en Flickr

---

Paso 1: Estructura HTML básica

Comencemos observando un marcado HTML fundamental:

Esta estructura sigue los estándares establecidos para que los navegadores sepan qué hacer con su página. En la parte superior de nuestro código, establecemos qué tipo de documento es y en qué idioma está escrito. Entre nuestros En las etiquetas informamos al navegador que estamos usando el conjunto de caracteres utf-8 estándar. Luego tenemos el título de nuestro sitio y hemos agregado una declaración condicional para cargar HTML5 shiv que compensa los problemas de compatibilidad con IE 9. Las etiquetas, por supuesto, establecen dónde va a aparecer el contenido de nuestra página..

¿Es fácil y directo? Pero en verdad ya hemos dejado de lado información importante..

---

Paso 2: Agregar etiquetas meta

Regresemos al principio de nuestro código y agreguemos la siguiente línea de código justo después de la apertura etiqueta:

Esta línea le dice a los motores de búsqueda qué mostrar en los resultados de búsqueda justo debajo del título de su página. En este caso, los resultados en Google podrían presentarse como tales:

Nota: Un punto que es muy importante y que a menudo se pasa por alto es que debe adaptar tanto la título y etiquetas meta de cada página dentro de su sitio específicamente al contenido de cada página. Para el título puede ser tan simple como .

El código dentro de nuestro etiquetas ahora se ve como sigue:

Nota: Para obtener información sobre por qué hemos olvidado incluir meta palabras clave, consulte la discusión en los comentarios..

---

Paso 3: Enlace a nuestro CSS y JS

Comunes en casi todas las páginas web son enlaces a archivos CSS y código o bibliotecas de Javascript. Si vamos a seguir las sugerencias de codificación de Google, deberíamos intentar mantener nuestras consultas externas (solicitudes HTTP) al mínimo, así que intente mantener los activos de CSS y Javascript en un solo archivo, si es posible. Agreguemos solicitudes genéricas para nuestros archivos externos a nuestra plantilla..

Primero, enlazaremos a nuestra hoja de estilo externa agregando el siguiente código justo antes de etiqueta de cierre

A continuación, hacemos lo mismo para nuestro archivo Javascript agregando la siguiente línea:

Añadimos el javascript al final de nuestra página, justo antes del Etiqueta de cierre para que nuestro código termine como sigue:

¿Por qué agregamos la consulta de Javascript al final de la página? Dos razones:

• Al hacerlo, el contenido de la página se carga directamente, en lugar de esperar a que se procese Javascript.
• También ayuda a los motores de búsqueda a leer el contenido de su página. ¿Por qué? Bueno, si pensamos de manera lógica, el rastreador comienza en la parte superior de la página y ejecuta su código. Si se agrega el Javascript en la parte superior de la página, el motor de búsqueda recorre el Javascript antes de llegar al contenido de su página. Es lógico que queramos que el motor de búsqueda vaya directamente a nuestro contenido para una indexación más efectiva. Cualquier Javascript referenciado, tanto externo como interno, debe agregarse al final de su página.

Otra regla a tener en cuenta es que si tiene más de un archivo CSS o Javascript, siempre siga las reglas de la jerarquía y coloque primero el archivo más importante, agregando el resto consecutivamente. Después de todo, no puedes usar una función de Javascript increíble que usa la biblioteca jQuery, si no llamas primero a la biblioteca jQuery.

---

Paso 4: terminando nuestra plantilla

Casi hemos terminado con nuestra plantilla, pero podríamos agregar algo de contenido. Con la introducción de HTML5, hacer que su sitio sea amigable con SEO se ha vuelto mucho más fácil; La semántica adecuada da a los motores de búsqueda instrucciones muy específicas sobre qué encontrar y dónde encontrarlo. Agreguemos algunos elementos comunes que probablemente usaremos en la mayoría de los sitios que diseñamos.

Justo debajo de la etiqueta y antes de etiqueta, vamos a agregar las siguientes líneas de código:

  
Nombre del Sitio Web
   
 
 
Encabezado del artículo
 
Un texto simple para ayudarnos a lo largo de
 Lee mas?  
 
  

Nuestro código debería aparecer ahora como sigue:

            
Nombre del Sitio Web
   
 
 
Encabezado del artículo
 
Un texto simple para ayudarnos a lo largo de
 Lee mas?  
 
     

Donde una vez habríamos usado div contenedores, ahora hemos implementado un marcado más descriptivo. los ,