Agradecemos a quien pueda colaborarnos con aportes y comentarios a aquellos elementos que pudieron hacer falta o que creen que requieren correciones, pueden hacerlo tanto por los comentarios dentro de este articulo, espero este, el anterior y los siguientes capitulos del material sean provechosos para todos.
Manual de SEO para Joomla desarrollado por Geosdigital Y licenciado como Creative Commons Atribución-No Comercial-Sin Obras Derivadas 2.5 Colombia License. Basado en un trabajo de www.geosdigital.org.
Un saludo
Edwin Bernal Holguín
http://www.twitter.com/geosdigital
Los contenidos, una probada de HTML estructural
Sí, para un buen posicionamiento es obvio que los artículos deben estar optimizados y eso representa varios elementos, títulos, listas, imágenes, links, tablas, objetos multimedia, todo esto basado en las directrices del HTML estructural y/ o marcado semántico, si bien no todo lo escrito en este capítulo se refiere a estrategias SEO puro, si le ayudaran a tener un mejor sitio, entre mas limpio el código, mejor será interpretado.
No creo necesario hacer énfasis en cada elemento porque está claro que aquí (cuando digo "aquí", pienso en la aldea global) <ironía>todos obedecemos y valoramos temas de accesibilidad, usabilidad, encontrabilidad y obviamente SEO, además que las contemplamos todas </ironía>.
La verdad si confieso que me gustaría dedicar varios capítulos a este tema, pero creo que muchos han dedicados muy buenos textos al respecto y uno de ellos es el ofrecido por la Universidad de Alicante en su documento de accesibilidad Web en donde explica en 10 muy interesantes artículos cuales son las etiquetas y atributos a aplicar para crear elementos accesibles y por ende (esto seguro causara comentarios, porque no es del todo cierto) encontrable. Considero imprescindible su lectura y aplicación, más sin embargo, explicare los elementos más importantes en la creación del contenido en artículos de la plataforma.
Una consideración importante es referente a la estructura, Joomla, hasta la versión 1.5 trabaja con secciones y Categorías y por ultimo artículos, desde la versión 1.6 omitirá las secciones y todo será categorías / subcategoría / subcategoría / artículos. Esto beneficiara mucho la creación de los arboles de contenido, pero si aun en la versión 1.5 para muchos era un lio armar el árbol, no imagino cómo será cuando sea abierto el proceso de categorización.
En donde radica el problema para el SEO, sencillo, en la mayoría de los sitios que he evaluado para labores SEO, un error de casi el 90% es una pésima creación del árbol de contenidos, montones de categorías y montones de secciones para unos pocos artículos o viceversa, 500 artículos metidos en 2 o 3 categorías para 1 o 2 secciones, ya pueden imaginar ustedes la navegación del portal, generalmente hecha con las uñas y un montón de módulos custom por todo lado.
Si hay problemas en la creación de los arboles de contenido, el problema se reflejara en la navegación y sobra decir que en la alimentación del sitio. Si es consciente de eso, le recomiendo dos alternativas, una estudie y practique procesos de Arquitectura de información, o busque la ayuda de alguien con experiencia en el tema, <publicidad> Nosotros llevamos tiempo asistiendo empresas de desarrollo al respecto </publicidad>.
El editor WYSIWYG
Lo primero en este caso es el editor de texto WYSIWYG que viene con Joomla, el TinyMCE, que no es precisamente el más efectivo (lo que no es ningún secreto), yo aconsejo reemplazarlo por el JoomlaFCK o el JCE o cualquier otro editor (no me crea, instale, escriba, revise y compare)
Porque cambiarlo ¿? Varias consideraciones, la primera es el código que introduce además del que se escribe con el contenido, la segunda es que es muy limitado al colocar estilos a los objetos, incluso el agregar esos objetos es dificultoso, lo que los otros facilitan mucho mas, (pero tampoco me crea esto, revíselo y si a usted le agrada, continúe con él). Y ahora si, al grano.
El titulo y alias del artículo
Cosas que siento que no debo escribirlas pero nunca sobran, en cuanto al título…
- Los títulos de los artículos deben ser breves e ir al grano, recuerde que si el contenido es sindicado por RSS, el lector vera el titulo y si eso no lo cautiva no le dará clic. Títulos ajenos, dispersos, o que buscando ganar expectativa lo que hacen es producir desdén frente a los contenidos.
- Por Dios santo, NO ESCRIBA EN MAYUSCULAS SOSTENIDAS. No tiene nada que ver con SEO, pero si tiene que ver mucho con el respeto al navegante.
En cuanto al alias, creo ya haber hecho recomendaciones frente al tema de alias en la primera parte de este manual en el capítulo de URLs Amigables
Los subtítulos en el contenido.
Los esquemas HTML tienen 6 niveles de Headings H1, H2, H3 hasta H6, esto realmente no es algvo decoroso, pues el motor de búsqueda lo considera literalmente como el esquema o estructura de los contenidos de una página web. Así: toda página Web debe tener un único H1 y bajo este los respectivos subtítulos H2, y es obvio que bajo este los sub sub títulos H3, y así sucesivamente.
Su colocación aleatoria o descuidada, usando como criterio el tamaño o la presentación, solo demuestra desconocer el uso de HTML y también de CSS para cambiar su estilo.
Entonces en Joomla (y otros CMS además de cualquier portal web) el titulo del sitio web estaría etiquetado como un H1; (esto se haría desde los HTML de la plantilla), los títulos de artículos y componentes serian H2 (también se controla tanto por el core de Joomla y por los HTML de la plantilla). Y así dentro de un artículo en Joomla los títulos a usar serian H3, H4, H5 y H6 como subtítulos donde los títulos de primer nivel dentro del texto serian H3, los de 2do nivel H4 y demás.
Esto genera un esquema para el Robot, que en el momento de encontrar en desorden los títulos, por ejemplo hallar un H2 (el titulo del articulo) sin un H1 y después un H4 sin un H3, le resta importancia a ese criterio y omite la relevancia de los títulos dentro del contenido del texto y salta a otro criterio de posicionamiento.
Entonces y por si no recuerda donde se coloca los títulos en su editor
Imagen 1, Opción para estilos de titulo en JoomlaFCK
Imagen 2, Opción de estilos de titulo para TinyMCE
Imagen 3, Opción de estilos de titulo para JCE
Hipervínculos
Es curioso, pero por más que evaluó sitios web, más me convenzo que se nos olvido algo en el camino a muchos, y es ¡hacer hipervínculos¡ o por lo menos hacerlos bien.
Le sonara raro, pero es cierto, ojala todos tuviéramos la manía de relacionar tanto los artículos como lo hace la Wikipedia, allí, un texto tiene entre 5 y 10 hipervínculos como mínimo. Y la razón es básica y muy importante, con ellos el robot y el usuario navegan, indexan y aseguran permanencia en el sitio.
Así y para valorar más el <A HREF, además de acostumbrarnos, estos son los elementos más importantes de los hiperenlaces: (muchos de estos elementos serán vueltos a mencionar en el capitulo Navegación)
- No dañe su posicionamiento colocando Imágenes (por lo menos no únicamente) con enlaces a contenido, si una foto del Sahara enlaza a la página de los safaris, coloque también un enlace en texto que se refiera y apunte a esos safaris. (no quiero pensar ni hablar de quien hace enlaces en SWF solo para que se vean bonitos).
- Si va hacer un hipervínculo a cualquier elemento, no escriba cosas como: “haga clic aquí”, "“siga este enlace"este texto no le dice nada al robot, ni a que se refiere el contenido ni a donde va, y obviamente tampoco al navegante que pasea por la pagina y no hace lo que usted espera y es leerla toda. (curioso que la búsqueda “haga clic aquí” arroja en Google 8.470.000 resultados, quiere aportar su sitio a este interesante resultado¿?).
- El texto del enlace debe ser directo por ejemplo “Pague aquí y descargue el manual de SEO en formato PDF (2 Mb)” lo que quiere decir, que el texto tenga sentido al leerlo fuera de contexto.
- No es mala idea colocar el enlace directamente como texto del hipervínculo, esto es bueno cuando tuene una URL amigable, considérelo si no es así.
- Muy importante que al hacer el hipervínculo llene el atributo TITLE, que corresponde a la descripción del enlace, que sería el equivalente al ALT de las imágenes. Esto es de gran utilidad tanto en SEO como en accesibilidad. (como los enlaces de este material)
Es obvio que los hipervínculos se hacen para ampliar la navegación, como ultimo apunte, no se olvide de módulos o plugins que muestren junto a los artículos aquellos textos o banners que están relacionados.
Uso de listas
¿Recuerda que mencione en el capitulo Un poco de Seo básico del buen lector que es un robot?, allí comentaba que las listas también son un foco de atención y por ende también parte de la información indexada por el Robot.
La mayoría conocemos o usamos o conocemos generalmente dos de los tres tipos las listas de viñetas (UL) y las numeradas (OL), la que pocos aprovechamos es el poder de las listas de definición (DL). La cosa es simple, si usted fuera un buscador y está buscando términos y definiciones, ¿no le pondría atención a lo que esta marcado como tal? que a leer párrafo por párrafo de portal?.
Sin ser un curso de HTML les recuerdo, la estructura de las DL, se basa en 3 objetos, la etiqueta DL (que define el inicio de la lista) la etiqueta DT (Definition Term, que es el elemento a definir) y luego DD (Definition Data, que es la definición)
Si por ejemplo una lista de definición en código y su resultado sería el siguiente:
|
Código |
Resultado |
|
<dl> |
|
Note que en el resultado las definiciones adquieren inmediatamente sangría, esto ayudado de un poco de CSS podría darle una muy buena presentación a esos DD y DT.
Si decide hacer sus contenidos en un Dreamweaver y pegar el HTML, hacer estas listas y otros elementos, será muy fácil, pero si lo va hacer desde su editor WYSIWYG de Joomla, le cuento que el TyniMCE no dispone de este tipo de listas, mientras el JCE y el FCK, si.
Manejo de las Imágenes
En cuanto a las imágenes son varias temas, lo primero y esto obedece a la planeación, en lo posible organice su carpeta de stories, de tal forma que sea más fácil administrarla a futuro, es decir no deje todas las imágenes en la raíz de stories sino cree carpetas para almacenar los elementos por el tema al que se refieren, sino me cree que esto es importante, administre un sitio después de 6 meses de producción de contenidos, ¿ y esto ayuda al SEO?, la verdad y directamente no, mas con los tips a continuaciòn.
- Marque los archivos con nombres que reflejen el contenido del archivo, por ejemplo, si usted es la agencia de viajes "Muchileiros" y tiene una foto de una playa en Providencia un buen nombre podría ser muchileiros_playa_providencia.jpg, y así con todos los archivos de su sitio con los que desee traer trafico a su portal. Por lo menos eso es mejor que dejarlos con los nombres que les da la cámara digital DSC0000_algo.jpg
- No olvide colocar texto alternativo a cada imagen, ALT, TITLE y si lo desea también use LONGDESC.
- Un tercero es el texto que acompaña la imagen, más conocido como el pie de imagen, que además descriptivo, ayuda en las labores SEO del contenido, en Joomla este puede colocarse de varias formas, una muy sencilla es insertar la imagen desde el botón Imagen en la parte inferior del editor y después de escribir la descripción (ALT) y titulo de la imagen (title) solo activar la opción Leyenda como lo muestra la imagen. Esto básicamente lo que hace es colocar un Class llamado Caption a la imagen que hace que el title se vea por debajo de ella. Este sería el código
<p><img src="http://geosdigital.org/images/stories/buenusoweb.jpg" alt="Geosdigital campaña buen uso web" title="Campaña, por el buen uso de la Web en Colombia" class="caption"></p>
y este el resultado
Imagen 04, Resultado del uso de "Leyenda" a la hora de insertar una imagen
- Si ya tiene insertada la imagen y quiere colocarle el pie de foto, una combinación entre su editor de texto; para agregar el class caption a la imagen y también el atributo title, le permitirán hacerlo.
- Si va usar mapas de imagen, no olvide usar el elemento MAP y texto para las zonas activas.
- No esta demás el usar las palabras claves del articulo dentro de todo lo anterior.
Las animaciones y objetos embebidos
Bueno realmente aquí hay mucho que decir, muchos se valen de extensiones para embeber videos, sonidos y flash como por ejemplo como el plugin allvideos plugin, que tristemente dejan mucho que desear ya que no permiten agregar los mínimos atributos requeridos para marcar semánticamente estos objetos, que son embebido gracias a la etiqueta Object, la misma con la que se invocan archivos SWF y otros tantos.
Los atributos básicos que se deben especificar por cada uno buscando Posicionamiento Web y encontrabilidad de estos contenidos, son:
- ALT
- DESCRIPTION
- TITLE
Más sin embargo, hay una colección de elementos adicionales que hacen que realmente esos contenidos sean aun mejor encontrados y posicionados.
- Coloque nombre identificable para el archivo.
- Haga un Thumbnail del objeto y colóquelo como parte de la introducción del artículo que contendrá el objeto, aplique a este los mismos criterios de marcado semántico ya comentados. Para que ¿? ¿Le agradaría que alguien llegue a su multimedia gracias al buscador de imágenes del buscador?
- Si va embeber un SWF, procure además de los atributos en código de Description y ALT (y haga lo mejor posible para esto), coloque un texto descriptivo con los párrafos que estime convenientes para detallar que información contiene, esto al ser texto lo hace tanto encontrable, como indexable.
- En el caso de Multimedias como videos y podcats, proporcione subtitulos y transcripción del sonido. Pese a lo tedioso que pueda parecer, como prueba de la importancia de esto, son sitios como Slideshare que transcribe el texto de las presentaciones por debajo de la misma, o Youtube que permite subir los subtítulos de las presentaciones y hace la traducción dependiendo las preferencias del navegante.
Así la encontrabilidad de las multimedias se hace mucho más fácil por la información interna que está en texto (son mencionar lo accesible que es para discapacitados).
- Documéntese; dependiendo del tipo de objeto que vaya a embeber en su sitio, acerca de los elementos con los cuales puede hacerlo accesible, por ejemplo para el caso de un SWF, este es un muy buen documento Creating Accessible Macromedia Flash Content.
- En todos los casos, válgase de plugins que faciliten todo lo anterior.
Las tablas
Las tablas se usan para representar datos de forma tabular, no para maquetar ni la página ni sus contenidos en celdas.
Entonces, haga hasta lo imposible para no valerse de tablas para maquetar sus artículos, planee su contenido y la forma como se distribuirá, y en cuanto pueda válgase de CSS, (no me haga caso si está pensando que soy extremista, realmente considere su uso cuando crea que no puede hacer mas, soy consciente que CSS no es un tema común, pero sepa que pierde puntos Muy – note la M - importantes en el SEO del portal, sin hablar de usabilidad y accesibilidad).
Puntos clave a la hora de trabajar con Tablas y evitar condigo innecesario además de proveer mas información para el tema de usabilidad.
- Un atributo clave para el SEO en tables, es SUMMARY (resumen de la tabla en código)
- Caption es una etiqueta interna de table muy útil, ya que se muestra como el titulo centrado por encima de la tabla
- Cuando las inserte no olvide los Table Heading THEAD y sus celdas TH que serian la primera fila y/o la primera columna de la tabla, este es un factor diferenciador que facilita colocar estilos de una forma más efectiva que rellenar celda por celda creando mas código dentro del contenido
- Si caption es el título de la table, hay una etiqueta poco usada que sirve para colocar un tipo de pie de tabla y es tfoot, interesante para añadir más información al respecto además de mejorar la presentación de la tabla sin celdas unidad y demás.
Un ejemplo de estas etiquetas y atributos son los siguientes:
<table summary="Tabla con la información usuarios del sitio geosdigital.org">
<caption>Tabla de usuarios GeosDigital</caption>
<thead>
<tr>
<th>Enero</th>
<th>Febrero</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">Datos según Analytics primer bimestre 2009.</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>2550</td>
<td>2890</td>
</tr>
</tbody>
</table>
El resultado será:
| Enero | Febrero |
|---|---|
| Datos según Analytics primer bimestre 2009. | |
| 2550 | 2890 |
- Formatee su tabla con un class de CSS, evitando atributos como border="...", rules="...", frame="...", background="...", bgcolor="...", width="...", height="…", align="...", cellpadding="..." y cellspacing="...".
- Si su tabla contiene spacer.gif, ese maravilloso archivo que es el resultado de divisiones de imágenes entre otros, haga lo posible para que estos no existan, solo hará más lento su sitio
- Si cree que puede hacer todo esto con su editor en Joomla, bien, sino válgase de un editor externo.
- Aplique estos mismos criterios cuando cree el contenido de descripción de secciones, categorías, módulos personalizados y demás espacios que contendrían tablas.
El Enlace Leer más
En el apartado Hipervínculos de este capítulo, comente lo inútil que son los enlaces que no dicen mayor cosa de su destino, por ejemplo el conocido “Leer más”, y no es nada raro ver sitios web con muchos enlaces “Leer mas” en sus páginas, eso solo demuestra el buen posicionamiento que le están haciendo a esas dos palabras.
Esto tiene varias soluciones, así:
- La primera solución se realiza desde código y particularmente en los archivos Html de la plantilla. Si usted coloca la plantilla beez en un sitio que tenga contenido, vera que los artículos con texto extendido, el habitual “Leer mas” estará acompañado del título del artículo. Así:
Imagen 05, El leer más con la plantilla Beez
Y esto es automático , gracias a que los PHP que se encargan de mostrar el Frontpage, las Section y Categories en modo Blog, contienen una línea de código que invoca el title junto al Read more, por ejemplo en la archivo default_item.php que está en la ruta beez/html/com_content/frontpage/ en la línea 116 se encuentra lo siguiente
echo JText::sprintf('Read more', $this->escape($this->item->title));
Seguro los programadores lo entenderán mejor, más esto hace que el titulo quede junto al Leer más. Lo que ayuda sustancialmente con el SEO, la usabilidad y accesibilidad del portal.
Que hacer ¿?, fácil, como explique en la primera parte del manual, use los archivos html en su plantilla.
- Si lo anterior no le satisface, porque sus títulos son muy extensos o le molesta verlo repetido, una opción muy interesante es el texto alternativo de Leer mas. ¿Como es esto?, sencillo, a la hora de crear su artículo, en las parámetros avanzados a la derecha, la última opción es “Texto alternativo de Leer Más” allí escribe usted lo que desea que aparezca en vez del conocido texto.
Un ejemplo de esto es: si el título del artículo es “El secreto de la felicidad es vivir en el Presente”, el texto alternativo podría ser “El secreto de la felicidad” y el resultado se vería así:
Imagen 06, Usando el Texto alternativo del Leer más el Frontend y el Backend
- Su aun no está contento, le recomiendo deshabilitar el Leer mas y dejar el enlace en los títulos y no más.
Es muy común por usabilidad (también por costumbre de los blogs), ver que los usuarios den clic sobre los títulos de los artículos para ampliar la información, habilite esto para todo el sitio en el Backend, en Contenido / Gestor de artículos / opción Parámetros en el costado superior derecho,
Imagen 07, Opciónes para usar de vinculos en el título, y habilitar el Leer más
Recuerde que esto es para toda el área de contenidos de la plataforma, si lo que quiere es habilitarlo para algunas áreas, lo debe hacer cuando cree los enlaces de menú, en los Parámetros Avanzados a la derecha.
Los índices de artículo
Una de las opciones que más me gusta de las contenidas en la navegación interna de artículos es la Paginación, básicamente es el menú con que usted ha navegado este manual en el costado derecho de esta página, y contiene links a las diferentes partes de un único artículo.
Imagen 08, El indice para artículos.
En muchas ocasiones se debe colocar un artículo muy extenso que supera las 3 pantallas en desplazamiento con el scroll vertical, para este proceso es ideal la opción paginación, que está en el backend cuando se crean los artículos.
En SEO, se puede optimizar el uso de esta opción recordando el cómo funciona, en el momento que se crea un elemento de corte dentro de un articulo, la ventana pregunta 2 opciones, el titulo del pagina y el alias.
Imagen 09, El indice para artículos.
El titulo aparece junto al título del artículo y en el titulo de la ventana, y el alias aparece en la tabla de índice del artículo.
Aquí un tema de cuidado es que la tabla esta armada sin title, ni summary, si usted quiere repararla, échese una paseada por el archivo
components\com_content\views\article\tmp\pagebreak.php
En la línea 28, allí esta la etiqueta table. Diviértase agregando los parámetros (por ejemplo) title=”índice del articulo” summary=”Las partes del articulo son la siguientes”. Eso sí, recuerde que esto es para todos los índices de su sitio.
El Marcado semántico en los artículos
Si nota, a lo largo de esta parte del manual, he enfatizado en el uso de las buenas prácticas en la creación del código, y es apenas obvio, porque entre mejor sea el código, mejor será interpretado, quizás eso ya lo había dicho, pero lo considero muy pertinente, porque es un tema que todos debimos haber aprendido, desde el principio, pero a muchos nos tumbaron ( o auto-tumbamos) esa clase (jeje) y ahora que la escuchamos nos suena tedioso y desgastante, mas sin embargo, cuando se reconocen sus ventajas, no hay tema que lo supere.
Por lo que no descuide el marcado semántico, atributos tan importantes como lang="...". Y abbr="…" son imprescindibles y además son grandes puntadas para un buen SEO.
La limpieza del código
Este Tip, es una forma de mantener la constante de los CMS en cuanto a ese punto de - Consistencia en la presentación de contenidos – que hace parte de los factores de elección de la plataforma.
Para quien ya administrado sitios cuyos contenidos son alimentados por otros usuarios, que necesariamente no tienen experiencia en crear contenido para la web( y no la necesitan, porque para eso se hacen los CMS), saben a qué me refiero, cuando ellos en su buena voluntad de resaltar, marcar o mostrar diferencia en los textos, cambian tamaños, colores y tipos de fuente a los textos, y las paginas llenan de “código basura”, que realmente debería estar armado con CSS, en vez de hacer estilo inline que las paginas más pesadas y ( aunque no es un absoluto) dificulta la lectura de los contenidos por parte del robot.
Un buen ejemplo de esto es el siguiente código, fruto de las maniobras para mejorar la presentación de un texto…
<p><span style="font-size: 14pt;"><span style="font-family: arial,helvetica,sans-serif;"><span style="text-decoration: underline;"><em><strong>Titulo del articulo</strong></em></span></span></span></p><p>consectetur adipiscing elit lobortis mauris porta ac. Nullam malesuada venenatis odio non euismod. <span style="color: rgb(255, 0, 0);"><strong><em>informacion clave</em></strong></span> eu imperdiet condimentum, mauris tellus varius justo, sit amet bibendum massa dui vulputate quam. Aliquam a tellus.</p>
Que genera visualmente en el Frontend el siguiente texto
Este mismo texto podría venir del código
<h3>Titulo del articulo</h3><p>consectetur adipiscing elit lobortis mauris porta ac. Nullam malesuada venenatis odio non euismod. <span class="destacado">informacion clave</span> eu imperdiet condimentum, mauris tellus varius justo, sit amet bibendum massa dui vulputate quam. Aliquam a tellus.</p>
Aquí se destaca una sola cosa y es el uso de marcado de objetos por estilos, ¿Cómo hacer para que los periodistas digitales lo hagan sin tener que aprender todo de CSS o HTML?,
Sencillo, crear esos estilos en el template.css ojala de primeras por encima de todos, con nombre lo suficientemente claros para que al crear el texto ( y obviamente capacitándolos) así, cuando El más efectivo es crearle en la hoja de estilos los estilos los que necesita para darle presentación vida al texto.
La hoja de estilos podría tener
Así se vería desde el editor de texto (en este ejemplo se uso el FCKeditor)
Y listo, así los autores solo usaran esto para definir la presentación del contenido y no lo harán manualmente.
Este es uno de muchos métodos, la idea es hacer más efectiva y limpia la creación de contenido.
El tema de contenidos para registrados
Y si sus contenidos los habilita para usuarios registrados, entonces, los encuentra el motor de búsqueda ¿?, la verdad, no, ¿qué hacer entonces?
- Considere si realmente quiere ocultarlos.
- Escriba referencias a esos artículos e invite al registro para leerlos o descargarlos
- No se me ocurre otro método, si alguien sabe de uno, bienvenido sea.
Las etiqueta Meta y uso de Robot
Esto ya lo explique en la primera parte del manual, puede echarle una ojeada de nuevo
Hasta aqui esta 2da parte del manual, como puede ver, falta publicar mas contenido,
esperamos sus comentarios!
