Este documento pretende establecer las pautas y normas a seguir en la optimización en posicionamiento, accesibilidad y usabilidad de los sitios webs que desarrollamos en Merkatu, buscando con ello marcar un punto diferencial importante entre nuestro trabajo y el de cualquier otra empresa, resaltando ante los clientes nuestro valor añadido como gestores integrales de su negocio.
Para conseguirlo, necesitamos conocer y aplicar en todos los pasos del proyecto (análisis de estructura, diseño, programación, carga de contenidos, marketing, comercialización…) las medidas que se indican en este documento.
La aplicación de estas pautas debe ser inmediata, pero progresiva, de manera que desde el primer momento vayamos integrando paulatinamente las medidas que nos correspondan a cada uno en el desarrollo del proyecto, con el objetivo final de que, a medio plazo, todas estén activas tanto en nuestros nuevos proyectos, como en aquellos anteriores a los que podamos aplicárselas.
El documento que incluye la tabla resume las acciones que habremos debido realizar en nuestro proyecto para que, cuando llegue el turno de la optimización para buscadores, comencemos del mejor punto de partida posible.
Según vayas completando las tareas indicadas, márcalas en la casilla ‘Estado’ o añade una nota indicando la situación en la que se encuentra dicha tarea, y llévala a la reunión de lanzamiento de Marketing.
Listado de Acciones:
Para conseguir que los documentos XHTML validen correctamente, es obligatorio que en su cabecera se especifiquen tanto el DOCTYPE como el espacio de nombres y el idioma.
Ejemplo para XHTML 1.0 transitorio, con idioma es-ES y código de caracteres UTF-8:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-ES " lang="es-ES"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
En Merkagest:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{item field=$idioma}" lang="{item field=$idioma}">
En Joomla:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language?>" lang="<?php echo $this->language?>">
Los metas, aunque ya no son tan eficaces a la hora de posicionar las páginas como hace unos años, debido sobre todo al mal uso que se hizo de ellos, aún siguen siendo tenidos en cuenta por varios buscadores, especialmente aquellos conocidos como directorios, cuya función es recopilar datos básicos de las páginas mediante sus robots y arañas.
Para indicar alguno de estos directorios y espacios de nombres, usaremos el atributo profile de la etiqueta head, o el rel de la etiqueta link.
Deberían ir en las plantillas de los proyectos (ya que son datos mayormente repetitivos) y en el orden que se indica a continuación:
Ejemplo:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-ES"> <head profile="http://dublincore.org/documents/dcq-html/ http://geotags.com/geo/"> <title>Título del sitio</title> <!-- Metaetiquetas --> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta name="language" content="es-ES" /> <meta http-equiv="window-target" content="_top" /> <meta name="robots" content="index,follow" /> <meta name="Author" content="Merkatu Interactiva S.L. © - www.merkatu.com - info@merkatu.com - Tel.: +34 945 267 772" /> <meta name="Rights" content="Merkatu Interactiva S.L. © - www.merkatu.com - info@merkatu.com - Tel.: +34 945 267 772" /> <meta name="Description" content="Descripción del sitio." /> <meta name="Keywords" content="palabras,clave,del sitio,+merkatu" /> <link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" /> <meta name="DC.title" content="Título del sitio" /> <meta name="DC.description" content="Descripción del sitio." /> <meta name="DC.subject" content="palabras,clave,del sitio,+merkatu" /> <meta name="DC.creator" content="Merkatu Interactiva S. L." /> <meta name="DC.format" content="text/html" /> <meta name="DC.language" content="es" /> <meta name="DC.rights" content="Merkatu Interactiva S.L. © - www.merkatu.com - info@merkatu.com - Tel.: +34 945 267 772" /> <meta name="DC.publisher.name" content="Merkatu Interactiva S.L." /> <meta name="DC.publisher.phone" content="+34 945 267 772" /> <meta name="DC.publisher.fax" content="+34 945 128 452" /> <meta name="DC.publisher.postal" content="Avenida de los Olmos 1 (D-II Of. 116), 01013, Vitoria-Gasteiz" /> <meta name="DC.publisher.email" content="info@merkatu.com" /> <link rel="schema.geo" href="http://geotags.com/geo" /> <meta name="ICBM" content="42.874064,-2.652306,507" /> <meta name="geo.position" content="42.874064;-2.652306;507" /> <meta name="geo.placename" content="Avenida de los Olmos 1, 01013, Vitoria-Gasteiz; España" /> <meta name="geo.region" content="ES-VI" /> <!-- Fin metaetiquetas -->
Sin embargo, debemos prever la posibilidad de que haya páginas especiales cuyas palabras clave y descripción sean específicas para mejorar su posicionamiento particular, por lo que, desde los gestores, habrá que permitir la generación dinámica de estos metas.
Algunos navegadores (Opera, pero en el futuro, todos) incluyen la capacidad de generar menús rápidos para moverse a través del sitio, mostrándolo como una barra de herramientas más.
Lo importante es que también son enlaces que siguen los robots de búsqueda en sus recorridos por los sitios.
Como esto puede provocar que el encabezado se nos sature de datos y enlaces, que podrían ralentizar la carga de las páginas, también deberemos tener en cuenta el orden en que se dispondrán los distintos componentes del encabezamiento:
La navegación auxiliar básica podría constar de los siguientes elementos:
Se ve mejor con un ejemplo:
<head>
<title>Título de la página</title>
<!-- Metas -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="language" content="es-ES" />
<!-- Enlaces de navegación auxiliar -->
<link rel="start" href="/index.html" title="Título del sitio" />
<link rel="contents" href="/Nombre_Empresa.html" hreflang="es" type="text/html" charset="iso-8859-1" dir="ltr" media="all" title="Resumen del sitio de Nombre_Empresa en dominio-empresa.com" />
<link rel="copyright" href="http://www.merkatu.com" title="Merkatu Interactiva S.L. © - www.merkatu.com - info@merkatu.com - Tel.: +34 945 267 772" />
<link rel="author" href="http://www.merkatu.com" title="Merkatu Interactiva S.L. © - www.merkatu.com - info@merkatu.com - Tel.: +34 945 267 772" />
<link rel="help" href="/contacto.php" />
<link href="?idioma=eu-ES" rel="alternate" title="Euskara" hreflang="eu" lang="eu" xml:lang="eu" />
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="/ Nombre_Empresa.ico" />
<!-- Enlaces a estilos -->
<link href="templates/css/template_es-ES.css" rel="stylesheet" type="text/css" />
<!-- Enlaces a JavaScripts -->
<script type="text/javascript" src="templates/js/swfobject.js"></script>
<!-- JavaScript no intrusivo -->
<script type="text/javascript"><!--//--><![CDATA[//><!—-
function misFunciones{
alert("Página cargada");
}
if (window.addEventListener)
window.addEventListener("load",misFunciones,false);
else if (window.attachEvent)
window.attachEvent("onload",misFunciones);
else
window.onload=misFunciones;
//--><!]]></script>
</head>
Para indicar a los robots de búsqueda que pueden buscar las imágenes incluidas desde Merkagest o Joomla, pero no en el resto de las carpetas del gestor, crearemos los filtros de carpetas en el archivo robots.txt situado en el raíz del sitio.
En el mismo archivo, mostraremos a los motores de búsqueda dónde están los mapas del sitio en XML; se lo indicaremos (por cada idioma), según se indica en el apartado correspondiente.
Si Google ya ha indexado un sitio, es posible que al actualizar el robots.txt las imágenes se indexen con lentitud, pudiendo tardar varias semanas en indexarlas todas.
Ejemplo para Merkagest:
#-------------------------------------------------------- User-agent: * Allow: /merkagest/biblioteca/ User-agent: * Disallow: /merkagest/ # URL mapa del sitio (al menos un mapa por cada idioma): Sitemap: http://www.dominio.com/mapa_del_sitio_dominio_es.xml.gz Sitemap: http://www.dominio.com/merkagest/biblioteca/docs/mapa_del_sitio_dominio_es.xml.gz Sitemap: http://www.dominio.com/mapa_del_sitio_dominio_en.xml.gz Sitemap: http://www.dominio.com/merkagest/biblioteca/docs/mapa_del_sitio_dominio_en.xml.gz Para Joomla, cambiaríamos sólo el filtro de buscadores por: User-agent: * Disallow: /administrator/ Disallow: /cache/ Disallow: /components/ Disallow: /images/ Disallow: /includes/ Disallow: /installation/ Disallow: /language/ Disallow: /libraries/ Disallow: /media/ Disallow: /modules/ Disallow: /plugins/ Disallow: /templates/ Disallow: /tmp/ Disallow: /xmlrpc/
Para un posicionamiento más eficaz, y dado que los buscadores prefieren los enlaces con palabras frente a los codificados, procuraremos que en la mayor parte del sitio que podamos, y específicamente en las zonas destacadas (familias, productos, etc.), las rutas sean amigables.
Desde Joomla existen un par de métodos disponibles, que habrá que verificar en cada caso particular.
En Merkagest, crearemos tantos ctipos como nos sea posible para lograr que el mayor número de páginas puedan transformarse en amigables.
Para facilitar y acelerar la revisión del sitio por los robots de búsqueda, varios de ellos se han asociado creando un esquema XML específico donde recoger todos los enlaces (tanto a páginas como a imágenes y vídeos) que queramos que sean indizadas.
Habrá que buscar un módulo o plugin de Joomla que lo genere, pero para Merkagest, se puede ver un ejemplo de su funcionamiento en: http://srv-web/gaytanshop/ http://srv-vitoria/pan-betti/
Para su correcto uso, se ha de pasar por las siguientes fases: 1. Definir los menús que queremos que se indexen (no incluye los nofollow); 2. Generar los mapas del sitio necesarios (al menos uno por idioma); 3. Verificar que su estructura es válida y que la ruta al XML está correcta en robots.txt. 4. Activarlo en el menú del sitio, los buscadores y en Google Webmaster Tools.
Como añadido para alimentar la interdependencia entre secciones y apartados de un miso sitio, así como entre los diversos sitios que accedan a intercambiar enlaces, crearemos tantos menús de posicionamiento como necesitemos, ubicándolos en modo texto al pie de las páginas.
Fundamentalmente serán de dos tipos: • Enlaces a ‘sitios amigos’: vínculos que intercambiamos con otros sitios externos al nuestro; • Enlaces a páginas específicas de posicionamiento (con contenidos optimizados para robots y nubes de enlaces) relacionadas con nuestro sitio.
El atributo rel situado en las etiquetas link, a, img, etc. permite que los navegadores y robots de búsqueda asocien metadatos a un vínculo concreto.
Actualmente se usan muy poco, pero hay algunos que ya son útiles y otros que lo serán en breve, por lo que haremos un breve repaso de los más destacados.
El atributo “nofollow” ofrece a los webmasters un modo de indicar a los motores de búsqueda “No seguir los enlaces de esta página” o “No seguir este enlace concreto”.
En un principio, este atributo aparecía en la metaetiqueta específica del encabezado de página y daba instrucciones a los motores de búsqueda para que no siguieran (es decir, no rastrearan) ningún enlace de salida de la misma.
Por ejemplo:
<meta name="robots" content="nofollow" />
Antes de que se utilizara el atributo rel=”nofollow”, evitar que los robots siguieran los enlaces individuales de una página implicaba un gran esfuerzo (por ejemplo, mediante el redireccionamiento del enlace a una URL que estuviera bloqueada en robots.txt). Por este motivo se creó el valor nofollow del atributo rel, que proporciona a los webmasters un control más preciso: en lugar de indicar a los motores de búsqueda y a los robots que no sigan ninguno de los enlaces de una página, permite especificar qué enlaces concretos bloquear.
Por ejemplo:
<a href="acceso.php" rel="nofollow">acceso zona privada</a> <a href="aviso_legal.php" rel="nofollow">Aviso legal</a>
En términos generales, Google no sigue estos enlaces, es decir, no transfiere PageRank ni texto de anclaje a través de ellos. Pero evita que incluya los enlaces especificados en el mapa general del sitio. No obstante, es posible que las páginas correspondientes aún aparezcan en el índice si otros sitios externos incluyen enlaces a dichas páginas sin utilizar nofollow o si las URL se envían a Google en un mapa XML.
Otros motores de búsqueda podrían utilizar el atributo de manera ligeramente distinta.
Su uso en Merkagest
En los enlaces de menú habrá que añadir un campo nuevo llamado 'rel' donde poder poner los atributos que se necesiten: nofollow, de redes sociales (me, friend, etc.) y demás.
Para ello, habrá que modificar los archivos: - api/apiformat.inc, - api/apidefines.inc, - maqueta/menuedit.php, y - posiciona/sitemap.php
Y, si es necesario, actualizar la tabla `tblcfgsubmenus` con la consulta:
ALTER TABLE `tblcfgsubmenus` ADD `subAtribRel2` VARCHAR(250) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT 'Atributo rel para los enlaces. Valores: nofollow, help, index, etc.';
Se puede ver un ejemplo de su funcionamiento en: http://srv-web/gaytanshop/ http://srv-vitoria/pan-betti/
Su uso en Joomla
Aún (2010-10-15) no está implementado, que yo sepa.
Posibles valores del atributo rel clasificados por categorías.
Valor Descripción
## Etiquetas con hipervínculo (link, a, area...) # Estructural alternate Una versión alternativa del documento (p. ej. página para imprimir, traducida o espejo). author Información sobre el autor del sitio. copyright Documento con información sobre los derechos de copia. icon Enlace al icono representativo del sitio. Si no se pone, buscará 'favicon.ico' en la raíz del sitio. En IE, hay que poner delante 'shortcut ' para indicar enlace a un icono distinto de 'favicon.ico'. license Enlace al contrato donde se recogen los derechos que existen sobre el documento actual. nofollow Indica a los motores de búsqueda "No seguir este enlace concreto" (Si está en un meta, "No seguir los enlaces de esta página"). schema.DC Esquema de datos Dublin Core. schema.geo Esquema de datos para geoposicionamiento. stylesheet Hoja de estilos externa para este documento. # Auxiliar de navegación (directamente en código) appendix Un apéndice al documento. bookmark Enlace a documento relacionado. chapter Un capítulo del documento. contents Índice (secuencial) de los documentos. glossary Glosario (definición) de palabras usadas en el documento. help Documento de ayuda. index Índice alfabético de los documentos. last Último documento de una serie. next Siguiente documento de una serie. prev Anterior documento de una serie. search Buscador para el conjunto de documentos. section Una sección del documento. sidebar Enlace a un documento que se pretende mostrar en la barra lateral del navegador. start Primer documento de una serie. subsection Una subsección del documento. tag Etiqueta referida al documento. ## XFN (funcionalidades extra) # Amistad (poner al menos uno) contact Contacto. Alguien al que sabes cómo contactar. A menudo simétrico. acquaintance Conocido/a. Alguien con quien has intercambiado saludos, si acaso, y no mucho más. Quizás una conversación corta o dos. A menudo simétrico. friend Amigo/a. Alguien con quien tienes relación de amistad. Un compatriota, camarada o amiguete que conoces. A menudo simétrico. # En vivo met Alguien que realmente has conocido en persona. Simétrico. # Profesional co-worker Compañero/a de trabajo o que trabaja en la misma empresa. Simétrico. Normalmente transitivo. colleague Colega. Alguien en el mismo campo de actividad o estudio. Simétrico. A menudo transitivo. # Geográfico (poner al menos uno) co-resident Paisano. Alguien con quien compartes la dirección de calle. Simétrico y transitivo. neighbor Vecino. Alguien que vive cerca, quizás en una calle o portal próximos. Simétrico. A menudo transitivo. # Familia (poner al menos uno) child Hijo/a. Progenitor/a, o alguien que ha adoptado a esa persona. Inverso de parent. parent Padre/madre. Inverso de child. sibling Hermano/a. Alguien con quien una persona comparte padre o madre. Simétrico. Normalmente transitivo. spouse Cónyuge. Alguien con quien está casado/a. Simétrico. No transitivo. kin Pariente. Alguien considerado parte de vuestra familia extendida. Simétrico y habitualmente transitivo. # Romántico muse Musa. Alguien que te inspira. Sin inverso. crush Afecto. Alguien de quién estás apasionado/a, has tenido un flechazo o sientes admiración. Sin inverso. date Cita. Alguien con quién estás viéndote. Simétrico. No transitivo. sweetheart Novio/a. Alguien de quien eres íntimo y al menos un poco implicado, habitualmente en exclusiva. Simétrico. No transitivo. # Identidad me Yo. Un vínculo a ti mismo en una URL diferente. Exclusivo ante todo otro valor XFN. Simetría requerida. Hay un "yo" implícito en la relación de los contenidos de un directorio al directorio mismo.
Google analytics tiene 3 tipos de código javascript para realizar las estadísticas. El último es el llamado asincrónico con el que, según Google, tienes una serie de mejoras disponibles, las cuales son:
Necesidades (PARA EL MERKAGEST). En el fichero api.inc hay que cambiar:
function GoogleAnalytics() {
if ($this->GetDataTipo()==CONTENIDO_CONTENIDO_DOCUMENTO || $this->googlecode=="") return;
return ("
<script type=\"text/javascript\">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '".$this->googlecode."']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
");
}
Más abajo, función function Template($conSeccion=true) donde sustituimos el </body> cambiarlo por el </head>:
metemos codigo de googleAnalytics antes del cierre de head $nuevo_fin_head = $this→GoogleAnalytics().“\n</head>”; $resultado = eregi_replace (“</head>”, $nuevo_fin_head, $resultado); Desde ese momento puedes ir a “Herramientas para webmasters” y verificar el dominio a través de tu cuenta de analytics. ===== 3.10. Rastreo e-Commerce con Google Analytics ===== Dentro de las utilidades que nos ofrece Google para mejorar el posicionamiento de nuestros sitios, destacaremos dos: Analytics y TrackingEcommerce. Google Analytics nos permite registrar los accesos a nuestros sitios (y su tipología), para después poder analizarlos médiate la generación de informes. Para que esté operativo, debemos registrarnos en Anlytics y añadir un código específico suministrado por Google a cada dominio empleado. Tanto Merkagest como Joomla permiten añadir este código desde el gestor. Para poder rastrear los productos de una tienda, Google ha creado un código JS asociado a Analytics que se debe incluir en cada producto que tengamos. Para obtener más información: http://code.google.com/intl/es-ES/apis/analytics/docs/tracking/gaTrackingEcommerce.html ===== 3.11. Análisis y comprobaciones ===== Una vez aplicados todos estos métodos de mejora de posicionamiento, será necesario validar, mediante el uso de las herramientas adecuadas, que cumplen con unos mínimos preestablecidos en cada proyecto. Parte de ellos serán, si así figura en la propuesta de servicios, la validación de XHTML, CSS y WAI (en el nivel acordado), así como cualquier otro sello otorgado por entidades ajenas a Merkatu. Para los demás, emplearemos dos extensiones de Firefox (YSlow y PageSpeed), que miden múltiples variables puntuando su mayor o menor cumplimiento. De entre ellas, las que más van a influir en el rendimiento de nuestro sitio son: * optimización de las consultas a las bases de datos; * compactación del tamaño del HTML, CSS y JS, y optimización de gráficos; * compresión mediante gzip (.htaccess) de todos los archivos planos devueltos por el servidor; * reducción del número de peticiones http, agrupando CSS y JS, y disminuyendo el número de imágenes a cargar en cada página (sprites CSS). Para considerar que un proyecto está bien conformado, deberán lograrse las siguientes puntuaciones: * a través del Yslow 85/100 * a través del PageSpeed 85/100 Se puede ver un ejemplo de la aplicación de sus recomendaciones para servidor en los .htaccess de: http://srv-web/gaytanshop/ http://srv-vitoria/pan-betti/ ==== 3.11.1. Instalación ==== Tanto YSlow como Page Speed son extensiones de Firefox que realizan labores similares, pero cada uno aplicando criterios de manera ligeramente distinta. Para instalar YSlow: * En Firefox, ir al menú Herramientas → Complementos; * Pulsar en 'Obtener complementos' y buscar 'YSlow'; * Seleccionar el componente y 'Añadir a Firefox'; * Si no apareciera en los resultados, pulsar en 'Ver todos los resultados' y 'Añadir a Firefox'. Para instalar PageSpeed: * Acceder a: http://code.google.com/intl/es/speed/page-speed/download.html; * Pulsar en 'Instalar'. ==== 3.11.2. Funcionamiento ==== Ambas utilidades proporcionan una valoración conjunta de la aptitud de cada página individual para ser mostrada en los navegadores. Influyen tanto configuraciones de servidor, cookies, JS, CSS, como contenidos, estructuración de la página, elementos de diseño, etc., con lo que se cubre la mayor parte de los aspectos que influyen en el correcto rendimiento de las páginas. Cada uno de estos aspectos individuales recibe su propia valoración, pero su efecto sobre la puntuación global está ponderada, de modo que algunos tienen más importancia que otros. Aquellos que necesitan correcciones aparecen con color rojo o naranja en PageSpeed, y verde si no las necesitan. En YSlow vienen clasificados de A a F, siendo F la peor nota. Pulsando sobre cada uno de los apartados podemos ver una pequeña descripción del aspecto valorado y un listado de los archivos o elementos afectados. Cada herramienta dispone también de su propia ayuda en Internet donde se explican todas sus posibilidades y limitaciones. Por otra parte, no hay que olvidar que las herramientas de desarrollo de IExplorer y Safari también nos pueden proporcionar ayuda a la hora de evaluar el funcionamiento de nuestro sitio en dichos navegadores. ===== 3.12. Seguimiento ===== Finalmente, y una vez lanzado el sitio, deberemos realizar el seguimiento del comportamiento del sitio y de la efectividad real de las medidas que hayamos adoptado. Google nos proporciona otras dos herramientas que habrá que configurar y emplear: * Webmasters Tools, para un análisis global del sitio, identificando elementos clave de posicionamiento; * Google Places, para geoposicionamiento a través de Google Maps y Google Earth.