Se entiende por SEO (Search Engine Optimization) el proceso de mejora de la visibilidad de un sitio web en los resultados de un buscador. Es decir, aquellos mecanismos que utilizamos para que nuestra web aparezca mejor posicionada que las demás en las páginas de resultados de los buscadores.

Hay todo un mundo detrás del SEO, donde la mayoría de las pautas son generales para todos los buscadores, pero donde también se pueden encontrar comportamientos y formas de hacer las cosas únicamente para favorecer los resultados en un buscador en concreto. En cualquier caso, en éste artículo solo nos vamos a centrar en 3 cosas muy concretas que nuestro querido Octopress no hace del todo bien, pero que bastan unos sencillos cambios para solucionarlo.

Éste artículo se basa en un post de Kornelije Sajler titulado Octopress SEO and Disabling the Blog Route, pero para los que no sepais inglés o querais entender un poco más acerca de lo que estamos hablando, intentaré explicarlo un poco más en profundidad.

Las 3 cosas que vamos a modificar para mejorar el SEO de nuestros blogs con Octopress son:

  • Meta tags
  • Duplicidad de contenido
  • Friendly URL's (o como se dice en español: las URLs semánticas)

Vamos a ver cada una de ellas un poco más despacio...

Meta tags

Las Metatags son unas etiquetas de HTML que contienen información para el navegador que estemos utilizando (o el programa que esté accediendo al documento en cuestión), es decir, no muestran ningun tipo de información al usuario que visualiza la página (se dice por tanto que son transparentes para el usuario).

Suelen ir en el encabezado del documento (entre los tags <head> y </head>) y contienen información como por ejemplo la codificación o juego de caracteres del documento (charset), el nombre del programa que lo ha generado (generator), la descripción o pequeño resumen del contenido del mismo (description), etc.

La mayoría de los buscadores leen éstas tags cuando acceden a las páginas web para indexarlas, y tienen en cuenta lo que en ellas se especifica a la hora de clasificarlas en sus índices de búsqueda.

A pesar de que algunas de ellas se crean correctamente en Octopress, hay 2 en concreto que son muy importantes y que NO se tienen en cuenta a dia de hoy, aunque esperemos que en un futuro no muy lejano Octopress las incluya. De hecho, ahora que lo pienso, cuando tenga un rato haré un fork del proyecto de Octopress en Github y enviaré un pull request para que lo incluyan en el código si sus desarrolladores lo consideran de utilidad... bendito Open Source!!)

Éstas dos metatags que no se incluyen actualmente en Octopress son keywords y description.

Metatag: keywords

En ésta Metatag se suelen indicar aquellas palabras de búsqueda que estan relacionadas con el contenido de la página a la que estamos accediendo. Por ejemplo, en una página web que hable sobre los hábitos reproductivos del calamar gigante (un tema apasionante), podríamos indicar como keyworks las siguientes: calamar, reproduccion, moluscos, costumbres sexuales, etc.

Con esto le estamos diciendo al buscador que si alguien busca alguna de esas palabras, debería aparecer nuestra página entre los primeros resultados, ya que su contenido está muy relacionado con esa posible búsqueda.

Pero no os hagais ilusiones con éste tema y penseis que vuestra página aparecerá en el primer resultado de búsqueda cuando alguien busque esas palabras, sino únicamente que se tomarán dichas palabras como un argumento más a la hora de mostrar vuestra página, pero hay muchas más cosas que influyen en la posición. Y dar gracias a Dios (o a los Dioses, mejor dicho) que ésto sea así, porque sino, todo el mundo pondría todas las palabras que se les ocurrieran con la esperanza de que buscaras lo que buscaras, su página saldría entre los resultados (aún recuerdo cuando empezó éste tema hace ya muchos años, la gracia que me hacía ver que todo el mundo ponía sexo, sex, games y demás Top Tens de las palabrás más buscadas entre las keywords de sus páginas, ya fueran sobre recetas de cocina, sobre críticas de películas o incluso webs corporativas de empresas de todo tipo, con la esperanza de que aparecieran siempre en los primeros resultados de los buscadores, jejeje).

Metatag: description

Ésta otra metatag se utiliza a modo de pequeño resumen, sumario o descripción sobre el contenido de la página web. En éste caso, no se suele utilizar para seleccionar en qué posición aparecerá nuestra página entre los resultados de una búsqueda, sino para que cuando finalmente aparezca nuestra página en ellos, sea éste texto que se muestre al usuario en lugar de cualquier otro texto irrelevante de cualquier parte de nuestra página (por ejemplo una trozo de la cabecera, del pié de página, del menu lateral o de cualquier otro contenido irrelevante para esa cuestión en este momento).

Es decir, si alguien ha buscado algo en un buscador, y éste va a mostrar nuestra página en los resultados de la búsqueda, éste podría ser el texto que le aparecería al usuario (junto con nuestra URL y demás), haciendo que sea mucho más legible y configurable para nosotros la forma en la que apareceremos en dicho buscador.

No obstante, aunque no sea tenido en cuenta el contenido de dicha metatag para mostrar nuestra web antes o después en la página de resultados, el mero hecho de que exista o no ésta metatag sí que será tenido en cuenta por la mayoría de los buscadores como un indicio de la calidad de nuestra web, y eso sí que afecta directamente a la posición en la que apareceremos en ellos.

Para solucionar éste tema de las metatags en nuestro blog de Octopress, necesitamos poder especificarlas cuando escribamos cada post, por lo que debemos modificar el código de Octopress para que el comando rake new_post nos genere el nuevo post con éstas 2 cabeceras para que nosotros podamos rellenarlas.

Editamos entonces el archivo Rakefile. En él, buscamos la tarea :new_post, y en la parte en la que se escriben las cabeceras de cada nuevo posts que escribimos añadimos 2 lineas con nuestras 2 cabeceras, quedando el código más o menos así:

open(filename, 'w') do |post|
    post.puts "---"
    post.puts "layout: post"
    post.puts "title: \"#{title.gsub(/&/,'&amp;')}\""
    post.puts "date: #{Time.now.strftime('%Y-%m-%d %H:%M:%S %z')}"
    post.puts "comments: true"
    post.puts "categories: "
    post.puts "keywords: "
    post.puts "description: "
    post.puts "---"
end

Ahora, cuando ejecutemos el comando de Octopress para crear un nuevo post (rake new_post), se nos creará en source/_posts/ un archivo más o menos así (donde aparte de escribir el post como siempre, podremos tambien especificar los valores de nuestras 2 nuevas cabeceras):

---
layout: post
title: "Hábitos reproductivos del calamar gigante"
date: 2014-06-24 23:02:38 +0200
comments: true
categories: 
keywords: calamar, reproduccion, moluscos, costumbres sexuales
description: Descripción detallada de los rituales de apareamiento de éste singular animal cuando encuentra una bella dama calamar en las profundidades marinas
---

Ahora ya podemos especificar éstas metatags en nuestros posts... pero aunque podamos especificarlas, ahora tenemos que decirle a Octopress cómo y donde debe mostrarlas.

Para eso, editamos el archivo header.html del tema que estemos utilizando (por defecto se utiliza el theme classic) y justo después del código para añadir la metatag author, añadimos las nuestras (aprox. lineas 8 a 11) de forma que el archivo quede más o menos así:

<!DOCTYPE html>
<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
<!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]-->
<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
  <meta charset="utf-8">
  <title>{% if page.title %}{{ page.title }} - {% endif %}{{ site.title }}</title>
  <meta name="author" content="{{ site.author }}">
  {% capture description %}{% if page.description %}{{ page.description }}{% elsif site.description %}{{ site.description }}{%else%}{{ content | raw_content }}{% endif %}{% endcapture %}
  <meta name="description" content="{{ description | strip_html | condense_spaces | truncate:150 }}">
  {% if page.keywords %}<meta name="keywords" content="{{ page.keywords }}">{%else%}<meta name="keywords" content="{{ site.keywords }}">{% endif %}

  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  {% capture canonical %}{{ site.url }}{% if site.permalink contains '.html' %}{{ page.url }}{% else %}{{ page.url | remove:'index.html' }}{% endif %}{% endcapture %}
  <link rel="canonical" href="{{ canonical }}">
  <link href="{{ root_url }}/favicon.ico" rel="icon">
  <link href="{{ root_url }}/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
  <script src="{{ root_url }}/javascripts/jquery-1.11.1.min.js" type="text/javascript"></script>
  <script src="{{ root_url }}/javascripts/modernizr-2.0.js"></script>
  <script src="{{ root_url }}/javascripts/ender.js"></script>
  <script src="{{ root_url }}/javascripts/octopress.js" type="text/javascript"></script>
  <link href="{{ site.subscribe_rss }}" rel="alternate" title="{{site.title}}" type="application/atom+xml">
  {% include custom/head.html %}
  {% include google_analytics.html %}
</head>

Y listo, con eso ya tendremos nuestras nuevas metatags descriptiony keywords, y a partir de ahora cada vez que escribamos un nuevo post en nuestro Octopress podremos especificarlas al igual que especificamos la fecha, título o cualquier otra configuración del post.

Duplicidad de contenido

La mayoría de los buscadores se lleva muy mal con aquellas webs que ponen el mismo contenido en diferentes páginas. Ésto es así en Octopress o en cualquier web del mundo, es algo universal...

Y cuando me refiero a duplicar el mismo contenido en diferentes páginas me refiero a que para un buscador, la web www.pornohardware.com es diferente a la web pornohardware.com (aunque realmente sean la misma, pero una con www delante y la otra no).

Por ese motivo hay que configurar nuestro servidor web para que únicamente se utilice un dominio (el que nosotros queramos, da igual uno u otro, pero hay que decidirse por uno de ellos).

Cómo elegir entre uno y otro depende del caso... aunque yo recomiendo SIN www delante (aparte de las preferencias personales, hace mucho tiempo leí un artículo sobre éste tema que me terminó de convencer de las ventajas de NO usar www en los dominios, pero por más que lo he intentado buscar ahora no lo encuentro, por lo tanto podéis creerme y tomar mi palabra como la verdad absoluta (cosa que deberíais, por cierto xDDD) o bien buscarlo vosotros mismos y ponerlo en los comentarios de éste artículo si lo encontrais).

Sea cual sea vuestra elección, debeis hacerla... y una vez hecha, configurar vuestro servidor web y vuestro entorno Octopress para que cuando se acceda al otro dominio se les redirija al que vosotros habeis elegido. De esa forma, los buscadores no verán 2 páginas iguales y os penalizarán por ello, sino que accedan a la que accedan, se les redirigirá siempre a la misma.

La forma de hacer ésto en Octopress es muy sencilla. Únicamente hemos de instalar la gema de Ruby llamada rack-rewrite:

$ sudo gem install rack-rewrite

Lo instalo como root (con sudo) para que la gema esté disponible para todos los usuarios del servidor, no solo para el mio.

Una vez instalada, editamos el archivo Gemfile de nuestro Octopress, y añadimos la gema que acabamos de instalar (linea 19):

source "https://rubygems.org "

group :development do
    gem 'rake', '~> 10.3.2'
    gem 'jekyll', '~> 0.12'
    gem 'rdiscount', '~> 2.0.7'
    gem 'pygments.rb', '~> 0.3.4'
    gem 'RedCloth', '~> 4.2.9'
    gem 'haml', '~> 3.1.7'
    gem 'compass', '~> 0.12.2'
    gem 'sass', '~> 3.2'
    gem 'sass-globbing', '~> 1.0.0'
    gem 'rubypants', '~> 0.2.0'
    gem 'rb-fsevent', '~> 0.9'
    gem 'stringex', '~> 1.4.0'
    gem 'liquid', '~> 2.3.0'
    gem 'directory_watcher', '1.4.1'
    gem 'nokogiri', '~> 1.6.2'
    gem 'rack-rewrite'
end

gem 'sinatra', '~> 1.4.2'

Cuando hacemos un rake preview y levantamos nuestro entorno de Octopress para probar los cambios antes de subirlos a producción, se levanta un servidor web (llamado Sinatra) para que podamos acceder a dicha previsualización de nuestra web. Es en ese servidor web donde debemos especificar que se haga la redireccion al dominio que hayamos elegido, y la forma correcta de hacer eso es enviando la cabecera HTTP 301, que significa contenido movido a otra dirección de forma permanente.

Para hacer eso, editamos el archivo config.ru de nuestro Octopress y añadimos éstas lineas:

require 'bundler/setup'
require 'sinatra/base'
require 'rack-rewrite'

# The project root directory
$root = ::File.dirname(__FILE__)

ENV['RACK_ENV'] ||= 'development'
ENV['SITE_URL'] ||= 'pornohardware.com'
use Rack::Rewrite do
    r301 %r{.*}, "http://#{ENV['SITE_URL']}$&", :if => Proc.new { |rack_env|
        ENV['RACK_ENV'] == 'production' && rack_env['SERVER_NAME'] != ENV['SITE_URL']
    }
    r301 %r{^(.+)/$}, '$1'
end

class SinatraStaticServer < Sinatra::Base

    get(/.+/) do
        send_sinatra_file(request.path) {404}
    end

    not_found do
        send_file(File.join(File.dirname(__FILE__), 'public', '404.html'), {:status => 404})
    end

    def send_sinatra_file(path, &missing_file_block)
        file_path = File.join(File.dirname(__FILE__), 'public',  path)
        file_path = File.join(file_path, 'index.html') unless file_path =~ /\.[a-z]+$/i
        File.exist?(file_path) ? send_file(file_path) : missing_file_block.call
    end

end

run SinatraStaticServer

Y con eso quedaría vuestro Sinatra configurado para la redirección, pero como lo más normal es que en producción utiliceis otro tipo de servidores web como por ejemplo Apache o Nginx, ahora vamos a configurar dichos servidores para hacer también esa redirección.

Apache

En Apache la mejor forma de hacer ésta redirección es mediante el módulo mod_rewrite.

Debeis editar vuestro archivo de configuración del servidor web (su nombre y ubicación varía segun la distribución de Linux que esteis usando, pero normalmente está en /etc/apache2 si usais Debian o derivados de ella, o en /etc/httpd si usais Redhat/CentOS o derivados de ellas) y añadir éstas lineas:

RewriteEngine On
RewriteCond %{HTTP_HOST} ^www\.pornohardware\.com$ [NC,OR]
RewriteRule ^\/(.*)$ https://pornohardware.com/$1 [R=301,L]

Recargais el servicio de Apache para que lea de nuevo dicha configuración, y listo. En Debian:

$ sudo /etc/init.d/apache2 reload

Y en Redhat/CentOS:

$ sudo /etc/init.d/httpd graceful

Nginx

En Nginx la redirección es muy parecida, únicamente editamos el archivo de configuración de Nxginx y añadimos éstas lineas:

server {
    server_name www.pornohardware.com;
    return 301 $scheme://pornohardware.com$request_uri;
}

Recargamos Nginx, y listo... sea cual sea el servidor web que estemos utilizando, a partir de ese momento, cualquier petición que recibamos en nuestro servidor web y que vaya dirigida a la dirección http://www.pornohardware.com será respondida con una cabecera HTTP 301 y redirigida a la URL https://pornohardware.com.

URLs semánticas (friendly URL's)

Octopress ya incorpora éste tipo de URL's semánticas desde el principio, pero por defecto añade /blog a dicha URL... y eso no solo no es nada semántico sino que además es innecesario, por lo que parece buena idea quitarlo.

Por defecto, las direcciónes de los artículos de Octopress se crean utilizando la fecha de creación y el título del post. Es decir, algo como http://dominio.com/blog/año/mes/dia/titulo-del-post, y nosotros lo vamos a dejar en http://dominio.com/año/mes/dia/titulo-del-post.

Editamos el archivo _config.yml y cambiamos éstas 2 lineas:

permalink: /blog/:year/:month/:day/:title/
category_dir: blog/categories

por éstas otras:

permalink: /:year/:month/:day/:title/
category_dir: categories

Y regeneramos de nuevo la web con:

$ rake generate

Ahora todas las URL's deberían aparecer correctamente sin /blog en ellas.

Hay muchísimas más cosas que podemos y debemos hacer para aumentar nuestra posición en los buscadores, así como muchas otras cosas que no debemos hacer por el mismo motivo. Ésto era solo un pequeño tip para mi recién estrenado Octopress, así que si quereis profundizar en el tema os recomiendo que busqueis un poco en Internet, ya que hay una cantidad brutal de literatura sobre éste tema.

El mundo del SEO es cada vez más grande, y siempre me ha dado la impresión de que se autoalimenta... como si fuera el propio SEO el que creara continuamente nuevas formas de necesitarse a si mismo, lo cual no me parece forzosamente malo excepto cuando se nos obliga a hacer determinadas cosas únicamente para cumplir con los designios de los grandes buscadores, los cuales por mucho que digan que toman el SEO en cuenta, realmente hacen lo que les da la gana con quienes les da la gana para favorecer al que paga y perjudicar al que no... y ésto por desgracia lo tengo más que comprobado.

Hoy en dia todo mi afán por mejorar el SEO se centra únicamente en mejorar la posición de mis webs en Bing, DuckDuckGo e incluso en Yahoo (si es que aún hay alguien que lo usa, jejeje) porque a los CERDOS de Google hace ya tiempo que dejé de hacerles caso, harto de dedicar tiempo, esfuerzo y dinero para que de un dia para otro decidan banearte, retirarte 2 puntos de Pagerank o cancelar una cuenta de Adsense (que llevaba utilizando cerca de 8 años) por publicar en una web un post hablando de un disco de Shakira donde aparecía la foto de la portada del disco, alegando que dicha portada contenía una foto de una chica con "posturas sugerentes", lo cual segun sus normas está prohibido, pero que sin embargo las webs de Fnac, El Corte Ingles o cualquier otra gran tienda de discos sí que pueden publicar y seguir disfrutando de su cuenta de Google aunque tengan ese mismo disco con esa misma portada en sus webs, y cien mil más).

Es más, puedes buscar POLLAS Y CHOCHOS en Google y obtendrás millones de resultados (con imágenes pornográficas absolutamente explícitas, e incluso alojadas físicamente en sus servidores), y al parecer eso no está en contra de sus normas, pero la portada del disco de Shakira en mi web si...

El tema de la censura y el doble/triple/etc rasero por el que se rige Google a la hora de aplicar sus normas mejor lo dejo para otro post... que solo de pensarlo me cabreo aún más con esa panda de dictadores y mentirosos, y no es plan...

Que disfruten de su Octopress!

Alaaaaaaaaaaaaaaaaaaaaaaaaaa

Referencias