Guía SEO para desarrolladores web

Lo que el programador debería saber y aplicar sobre SEO a la hora de desarrollar una Web

 

Entrada publicada originalmente el 24.04.2013 y actualizada en 09.01.2017 a consecuencia de un trabajo que me encargaron.

El por qué de esta «Guía SEO para programadores»

Siempre que sea posible, una web debería programarse para ser SEO friendly desde el principio

Cuando una web que ya existe, y se ha diseñado de tal manera que plantea problemas para su indexación en buscadores, la optimización puede convertirse en una tarea costosa, y solucionarlo puede costar la misma cantidad de horas y recursos que  hacerlo desde cero.

 

Guía de contenido para el programador SEO

Describo primero las características y funcionalidades que debería tener una web, luego las características del contenido en para las páginas. Y por último muy brevemente la arquitectura de la información y estructura de urls recomendada.

 

1 – Características generales de una web

• WPO
• Misma URL = Mismo contenido
• Evitar contenido duplicado de páginas similares con link rel=»canonical»
• Evitar el contenido con y sin WWW
• URLs amigables y optimizadas
• Enlaces internos limpios y rastreables
• El buscador interno de la web con “noindex”
• Las páginas que no existen tienen que servir un código 404
• Sitemap.xml

 

2 – Características para cada página

• Contenido único
• Los 3 elemento más importantes a cuidar
• Elementos que cada página deberá contener y su gestión
• Organizar la información, estructurar con marcado semántico
• Etiqueta título de la página <title>
• Etiqueta meta «description»
• Encabezado <h1>
• Otros encabezado <h2> <h3> <h4>
• Resto del contenido y longitud

 

3 – Arquitectura de la información

Próximamente más…

 

 

---

 

 

 

La regla más importante

Lo que es bueno para el usuario será bueno para el SEO

Tener este concepto siempre presente, la experiencia que el usuario tiene mientras navega por la web, repercute directa e indirectamente en el posicionamiento de la misma.

 

 

1 – Características generales de una web

WPO

La velocidad de carga influye directamente en la experiencia del usuario y por ende, tiene un impacto en el ranking de los resultados de búsqueda.

Esto se llama Web Performance Optimization, y merece un capítulo aparte. Hay un manual del genial Javier Casares de lectura obligatoria:  www.javiercasares.com/wpo/Guia-WPO.pdf

Las recomendaciones más sencillas a seguir serían las siguientes:

• Reducir cantidad de ficheros que se cargan, reduciendo peticiones HTTP
• Unificando .CSS y .JS, combinando varios CSS o JS en uno
• Reducir cantidad de imágenes, combinando imágenes o iconos en CSS Sprites
• Minimizar CSS y JS, comprimiendo el código suprimiendo los espacios en blanco
• Optimización de las imágenes
• Utilizar caches (según servidor)
• Configurar el tiempo de vida (caché) de las DNS (TTL)
• Cuidar la calidad del hosting donde se aloja la web

Si pasáis una página de la web a esta herramienta www.webpagetest.org te indicará que mejorar y cómo hacerlo, analiza muy bien el gráfico de carga para reducir la cantidad de archivos, y aumentar la simultaneidad de carga de los mismos.

Mira en Search Console en la pestaña de «Rastreo» -> «Estadísticas de rastreo» el tiempo de descarga de una página (en milisegundos), si tu web baja de los 200 milisegundos la cantidad de páginas rastreadas al día aumentará (Crawl budget). Tiene lógica por que si el robot de Google consume menos recursos (servidores) en descargar cada página de tu web, con los mismos recursos puede descargar más páginas.

Este gráfico fue obtenido en mayo 2014 con la migración de una web de WordPress (no optimizado) a mi propio gestor de contenidos (optimizado) pasa de una media de 1000 a una media de 400 milisegundos.

Además está demostrado mejorar la velocidad de carga aumentar la consecución de objetivos (ventas, registros, etc). Todo lo que mejore la experiencia del usuario mejorará el SEO.

 

 

 

Misma URL = Mismo contenido

Cada contenido tiene que tener una URL única y cada URL tiene que tener un contenido, eso es lo que el usuario y el buscador esperan.

Una misma url debe llevarnos al mismo contenido único, evitar la generación de páginas (urls) basadas en cookies o parámetros. Evitar generar urls diferentes para el mismo contenido, o misma url para contenidos diferentes. Esto suele pasar con el uso de cookies para mostrar opciones como los idiomas (ver apartado «Enlaces limpios y rastreables»).

 

 

 

Evitar contenido duplicado de páginas similares con link rel=»canonical»

Si dentro de tu web hay contenido muy similares con URLs diferentes esto será entendido por el buscador como contenido duplicado, utiliza link rel=»canonical» desde una de ellas hacia la otra, para que los motores de búsqueda sepan cual URL es la que debe indexar.

 

 

 

Evitar el contenido con y sin WWW

La web debe enseñarse sólo con una versión y redireccionar la otra, para evitar duplicidad de contenido, y más malas prácticas webs que se pueden indexar con www el mismo contenido sin las www.

Solución de redirección 301 en el archivo HTACCES:

En este ejemplo configuramos que las peticiones que lleguen con «www»sean redireccionadas al dominio sin  «www»

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_HOST} ^www\.loquesea\.es(.*)$
RewriteRule ^(.*)$ "http://loquesea.es/$1" [L,R=301]
</IfModule>

 

En este ejemplo vamos a configurar que las peticiones que lleguen sin «www»sean redireccionadas al dominio con «www».

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_HOST} ^loquesea\.es(.*)$
RewriteRule ^(.*)$ "http://www.loquesea.es/$1" [L,R=301]
</IfModule>

 

 

 

URLs amigables y optimizadas

Es verdad que la web tenga urls amigables es un factor positivo para SEO, pero si eso supone perder muchas horas de programación o una gran barrera en el desarrollo, hay que saber que no es el factor principal y que se puede mejorar el SEO con urls menos amigables. Como ejemplo de ello mirar una url de la web de El Mundo, su gestor no le permite personalizar con palabras descriptivas:  «http://www.elmundo.es/deportes/2016/12/28/5862fafaca47415f458b4625.html»

Listamos los factores que hacen “amigable” las urls a los robots de búsqueda:

• La longitud recomendada se entre 50 y 80, y nunca más de 100.
• No contienen caracteres extraños (espacios en blanco, acentos, comillas…).
• No contienen variables (No son URLs dinámicas).
• Contienen palabras clave relativas al contenido a posicionar de la página a la que se refiere las cuáles se separan mediante los caracteres guion (-).
• Deben de ser fáciles de entender y recordar por el usuario.
• Intentar eliminar las «Stop Words» ver listado: contadordecaracteres.info/stop-words-palabras-irrelevantes.html

 

 

 

Enlaces internos limpios y rastreables

Para facilitar el rastreo e indexación de la web, los enlaces entre las diferentes páginas tienen que ser limpios, es decir, no deben incluir ningún código interno en JavaScript, página intermedia o contador de visitas, o parámetros.

Ejemplo de un enlace:  <a href=”paginadestino”>Texto de enlace</a>

¿Pueden los buscadores encontrarte? Asegúrese de que su sitio es indexable

Asegurarse de que el buscador pueda rastree tu contenido: Navega por la web con JavaScript deshabilitado y asegurarse de que todos el contenido, los enlaces y las páginas son accesibles.

La estructura de enlaces internos con un flujo organizado de estos permite a los rastreadores de Google navegar más fácilmente por la web y llegar a las diferentes páginas a través de esos enlaces. Una página que no tiene enlaces internos apuntando hacia ella será más difícil de rastrear e indexar.

 

 

 

 

El buscador interno de la web con “noindex”

De cara a evitar contenidos duplicados, recomendamos que los resultados que de el buscador interno tengan la metaetiqueta “noindex” por defecto.

 

 

 

 

Las páginas que no existen tienen que devolver un código 404

Las páginas que no encuentre el navegador tienen que devolver en esa URL la cabecera http error 404. Evitar hacer redirecciones o usar cabecera 200.

Eso no significa que no podamos trabajar en una forma creativa y mostrar una página de error 404 al usuario que puede ser amigable y al mismo útil.

Excepción 301 contra los errores 404 de páginas ya indexadas si se han realizado cambios o migraciones: Mirar en la cuenta de Search Console en la sección de errores de rastreo, si se han realizado cambios o migraciones, lo más probable es que puede tener errores de 404 de páginas que existían y ahora ya no. Asegúrate de redirigir cualquier URL antigua a una vigente con un 301(redirección permanente) para traspasarle la autoridad.

 

 

 

 

Sitemap.xml

Un sitemap es un listado de las páginas que queremos que el buscador indexe, sirve entonces para facilitarle la tarea.  Ver más información en este artículo: sitemap.xml cómo es su estructura, para qué sirve y porqué utilizarlo

 

 

---

 

 

 

 

2 – Características para cada página

 

 

Contenido único

Cada página (url) deberá tener contenido único y diferente, esto aplica a todas y cada una de las páginas indexables como categorías o subcategoría, y no aplica a páginas de usuario, carrito de compra, etc.

 

 

 

 

Los 3 elemento más importantes a cuidar

A la hora de redactar la etiqueta título de la página <title> y la etiqueta meta «description«, recomiendo esta herramienta para comprobar que la extensión es la correcta: www.serpsimulator.de/en/

En cuanto a la redacción del contenido, los 3 elemento más importantes a cuidar son:

• Etiqueta título de la página <title>
• Etiqueta meta «description«
• Etiqueta <h1>

Es imprescindible que sean únicos para cada página, originales, descriptivos, y que respondan a las necesidades del usuario. Aprovechar los 3, no repetir las mismas palabras en cada uno, emplear variantes o sinónimos de las palabras claves asignadas a la página.

 

 

 

Elementos que cada página deberá contener y su gestión

Cada página deberá contar con estos elemento y el gestor de contenidos tendrá la funcionalidad de poder editarlos fácilmente:

• Etiqueta título de la página <title>
• Etiqueta meta «description»
• Etiquetas de encabezados <h1> <h2> <h3> <h4>
• Poder activar o desactivar la indexación de una página mediante la etiqueta “noindex”
• Poder aplicar la etiqueta Cannonical para páginas similares: link rel=»canonical»
• Atributo «alt» con contenidos alternativo a las imágenes
• Contenido con párrafos <p>

 

 

 

 

Organizar la información, estructurar con marcado semántico

Amigos programadores ¿habéis pensado al menos por un segundo por que el lenguaje HTML tiene tantas etiquetas diferentes?

Las diferentes etiquetas del lenguaje HTML permiten clasificar y ordenar jerárquicamente en diferentes niveles y estructuras al contenido, la utilización de las de las mismas, nos da la posibilidad de aplicar elementos como título <h1>, subtítulo <h2>, secciones <h3>, párrafos <p>, listas <ul>, etc.

Esto quiere decir que no significan lo mismo una etiqueta contenedor <div> que una etiqueta párrafo <p>, aunque con CSS le podemos dar el mismo aspecto. No confundir aspecto visual con valor semántico.

Utilizando las etiquetas <h1>, < h2> o < h3>,  se podrán establecer diferentes estructuras grados de importancia en títulos y secciones. Mientras que la etiqueta <p> hará las divisiones de párrafos necesarios en el texto, y se dará énfasis a las palabras a destacar del documento mediante el uso de etiquetas destinadas para esa finalidad <strong> o <em>.

 

 

 

A continuación describimos brevemente las características de cada uno:

 

Etiqueta título de la página <title>

Es lo que Google enseña en sus resultados de búsqueda como enlace y título de la página, longitud máxima de los 70 caracteres o 512 Pixels, que no contenga símbolos extraños que el buscador no reconozca.

Utilizar la palabra clave principal asignada a esa página, con un texto relevantes y acorde al contenido de la misma. Son pocos caracteres y hay que aprovecharlos todos condensando la información y eliminando florituras.

 

 

Etiqueta meta «description»

Al igual que el title, los buscadores suelen utilizar esta etiqueta en los resultados, con una longitud de 150 caracteres o 920 Pixels.

La descripción deberá ser un resumen descriptivo de la página que atraiga al usuario, siendo persuasivo e incitar al click.

Aprovecharemos para incluir términos secundarios asignados a esa página así como sinónimos.

 

 

Encabezado <h1>

La etiqueta H1 es el título visible de cada página, y en teoría debería utilizarse una sola vez en cada página, suele colocarse al comienzo de la misma y debería contener la palabra clave principal asignada a esa página.

Otros encabezado <h2> <h3> <h4>

Son subencabezados que ayudan a organizar y jerarquizar el contenido, aprovecharemos para incluir los términos secundarios asignados a esa página así como sinónimos.

 

 

 

Resto del contenido y longitud

Acerca de la extensión de texto, es un hecho probado que aquellas páginas que contienen más de 600 palabras tienen más relevancia y mejores posiciones en el ranking (siempre y cuando esté bien redactado y con criterio), hay que ser creativo e intentar generar contenido útil para el usuario. Utilizar la herramienta contadordecarteres.info .

Es importante que se intenten abarcar en la página todos los términos asignados a la misma, repasar las palabras claves asignadas e intentar incluir también sinónimos, utilizar para esto la web: www.wordreference.com/sinonimos/ .

¿Es tu contenido lo que el usuario quiere encontrar? Utiliza las palabras clave relevantes

Si conoces cuales son las principales palabras clave por las que la gente está realizando sus búsquedas en Google para tu sitio web,  puedes adaptar el contenido y la información en torno a esas palabras clave para enfatizar aún más su importancia.

¿Tiene demasiados anuncios que dificultan la lectura del contenido? Hace años que Goolge desaconseja el abuso en la utilización de anuncios. Y ha sugerido que si la publicidad molesta a la lectura del contenido, mostrando muchos anuncios por ejemplo en la cabecera de página y que el usuario tenga que hacer scroll, perjudica la experiencia del usuario.

Hace ya unos años que Google incluyen la capacidad de carga de JavaScript y CSS para navegar simulando ser un usuario para analizar el diseño y la usabilidad del sitio web. Lo que es bueno para el usuario será bueno para el SEO.

 

 

 

 

---

 

 

3 – Arquitectura de la información

 

 

La página principal debería actuar cómo el índice de un libro (por eso así se llama «index»), entonces deberíamos reflejar un resumen del contenido de nuestra web, con enlaces a todas las categorías y artículos importantes. Error común: Si tienes un blog, no muestres todo el contenido de los artículos en la página principal (index), entonces la propia página del artículo tendría el mismo contenido de la Index, muestra sólo un extracto del artículo en la página principal. Este es un error muy común en las plantillas por defecto de WordPress, en el que listan los artículos enteritos en la página index.

 

Si me he olvidado de algo o no estas de acuerdo con mis conclusiones, por favor dejar un comentario a continuación.