BLOG

La Optimización en motores de búsqueda (SEO): Acciones posteriores al análisis. (II)

Escrito el 2014-09-03 por Rafa P. Vargas es CM en Multigestor.com

Segunda parte de la serie Optimización SEO donde se aborda la aplicación de las acciones técnicas para la mejora y optimización de nuestro website.

Volvemos con la segunda parte de este artículo sobre recomendaciones para un correcto SEO. Si os habíais perdido el capítulo anterior, <a title="Optimización para SEO, primera parte" href="../../blogdt/la-optimizacion-en-motores-de-busqueda-seo-el-analisis-previo-i/39">podeis leerlo aquí</a>.   Os habíamos hablado sobre el análisis de incidencias o necesidades de vuestro website para que los buscadores lo asumiesen de manera positiva. En este capítulo sabremos como llevar a cabo las actuaciones necesarias para que, al siguiente análisis, el resultado sea mucho mejor.   El orden de los puntos no es necesariamente cronológico y se pueden llevar a cabo las actuaciones indistintamente de su orden en este artículo.   <h3>Canonical url</h3>   Se trata de un meta tag del tipo link rel="" donde especificamos la url de la página presente, es decir, de la misma página que estamos viendo o consultando. El tipo de meta sería algo similar a esto:   En urls dinámicas o friendly que vengan de un contenido en una base de datos, es necesaria la automatización de este vínculo para que muestre correctamente dicha url. Con una sencilla consulta en PHP/ASP hacia la base de datos sería más que suficiente. Una de las características de Canonical URL es evitarf el contenido duplicado. Vamos a definir un problema a groso modo de manera muy sencilla.   URL de servidor: http://www.multigestor.com/articulo.php?idtitulares=28467 URL friendly: http://www.multigestor.com/la-pagina-del-articulo   Estas 2 URLS apuntan al mismo sitio, pero con distinta sintaxis. Con canonical, ayudamos a los buscadores a que escojan solo una, la que le indicamos. Por supuesto hay más causas para el duplicado de una url, pero creemos que con el ejemplo ya es suficiente para su comprensión Para solucionarlo, como hemos apuntado anteriormente usaremos:   Para ver como crear friendly URLS, <a href="#consulta">consulta más adelante</a>. Recomendamos además, leer este artículo de Tomás de Teres en:<a title="Rel Canonical" href="http://deteresa.com/rel-canonical/"> http://deteresa.com/rel-canonical/</a> <h3>Atributo alt en imágenes</h3> Un error muy común es a veces, olvidar los atributos de las imágenes, en concreto el alt="". Es un error de bulto, porque en realidad es el texto alternativo de una imagen y Google aun no lee imágenes, por lo que debemos indicarle de que se trata. Es muy necesario aplicar alt="" a todas las imágenes del website, incluídas las no descriptivas, como líneas, marcas de maquetación etc... Un servidor aplica además el atributo title="", poco relevante insertado en una imagen, pero es una manía que tengo. <h3>Atributo title en URL y enlaces de sitios</h3> Desde hace algún tiempo, Google está usando los enlaces de sitios, justo debajo del resultado, tal y como se muestra en la siguiente imagen. La creación y aparición de estos enlaces de sitios es relativa al algoritmo de Google, es decir, que te las pone si le da la gana. Aunque una de las recomendaciones que Google realiza para la obtención de dicho enlaces es la aplicación de los atributos alt="" y title="" en las etiquetas a href="". <h3>Etiquetas HTML5</h3> El uso cada vez más frecuente de las etiquetas HTML5 ofrece información extra a los buscadores que pueden determinar las secciones según su etiqueta. Más información <a title="HTML5" href="http://ayudawp.com/html5-todas-las-nuevas-etiquetas/">aquí</a> Lectura recomendada: <a title="http://www.htmlcinco.com/" href="http://www.htmlcinco.com/">www.htmlcinco.com</a> <h3>No duplicado de Meta Description</h3> Si en nuestro <a title="La Optimizaci?n en motores de b?squeda (SEO): El An?lisis previo. (I)" href="../../blogdt/la-optimizacion-en-motores-de-busqueda-seo-el-analisis-previo-i/39"> análisis previo</a> hemos encontrado meta descripciones duplicadas, es menester cambiarlas. Un texto descriptivo breve y que contenga las palabras clave de la página actual para con el website es la mejor manera de redactar una meta description. <h3>Alta en Google Tools</h3> Una de las actuaciones que recomendamos es el alta y posterior configuración de las <a title="Herramientas para webmasters de Google" href="https://www.google.com/webmasters/tools/home?hl=es">Herramientas para webmasters de Google</a> donde definiremos los parámetros de indexación directamente en Google, así como realizar un marcado de datos por página, inserción de sitemap, seguimiento de errores de rastreo. En definitiva: LA GRAN HERRAMEINTA. Para usarlo, solamente necesitamos una cuenta de Google y verificar la autoría o propiedad del website de diversas maneras. <h3>Creación de sitemap enviándolo a Google</h3> La página de Herramientas de Google permite el envío de un sitemap en formatos diversos. No obstante, preferimos el formato XML que contiene la información básica. Para crear un sitemap podemos usar herramientas online como <a title="XML sitemaps" href="www.xml-sitemaps.com/"> www.xml-sitemaps.com/</a> por ejemplo. Creamos el sitemap y lo subimos al servidor. Luego le indicamos a Herramientas Google donde está y lo actualizamos. <h3>Automatización de actualización del archivo sitemap.xml en el servidor</h3> Si el volúmen de actualización de nuestro website es muy alto, es posible que no queramos tener que crear el sitemap y subirlo todo el rato, si no que quizá nos vendría bien una automatización del proceso que suba un archivo sitemap.xml actualizado a nuestro servidor que luego Google comprobará (cuando crea oportuno). Para ello recomendamos encarecidamente la lectura de este <a title="art?culo de Jonathan Echevarr?a" href="http://www.jonathanecheverria.com/2009/04/15/generacion-automatica-de-sitemaps-para-google-y-yahoo">artículo de Jonathan Echevarría</a> donde se recomiendan a su vez, diversas soluciones para la automatización de sitemaps. <h3>Usabilidad en móviles</h3> Como hemos dicho en el <a title="La Optimizaci?n en motores de b?squeda (SEO): El An?lisis previo. (I)" href="../../blogdt/la-optimizacion-en-motores-de-busqueda-seo-el-analisis-previo-i/39"> anterior artículo</a>, a Google le encanta que tu página web sea Responsive y adaptable a todos los dispositivos, pues le gusta quedar bien con sus visitantes. Por ello, al planear un diseño y maquetación, debemos tener en cuenta el uso de diseños adaptables. Bootstrap es un ejemplo muy práctico y muy usado, aunque tiene la pega de que es tan eficaz que ya están saliendo estructuras web con la misma dinámica estructural y es un coñazo ver el uso de plantillas Bootstrap espectaculares, aplicadas a negocios que no necesitan tanta pompa. Pero sobre gustos... Podemos también crear una versión mobile alternativa de nuestra web que se active al ser visitada por móviles, aunque debemos tener cuidado en no crear contenidos duplicados en comparación con la versión oficial. <h3>Optimización de imágenes</h3> La velocidad de carga de nuestro website depende, además de los scripts en javascript, del tamaño de las imágenes que subimos, sea manualmente o de manera dinámica. Como ya comentamos en el <a title="La Optimizaci?n en motores de b?squeda (SEO): El An?lisis previo. (I)" href="../../blogdt/la-optimizacion-en-motores-de-busqueda-seo-el-analisis-previo-i/39">artículo anterior</a>, muchos usuarios de Internet navegan vía móvil o tablet y bajo una tarifa de datos limitada. No es plan de andar fastidiándoles con imágenes de 4 o 5 megas, que absorberían su tarifa de datos en un santiamén. Por ello, debemos optimizar las imágenes antes de subirlas, sea en peso específico o bien en tamaño en píxels. La superficie de visionado de un dispositivo móvil es la que és, y no es necesario que una imágen sea mayor de 800 píxels de ancho, por ejemplo. El uso de Photoshop es muy adecuado dado que su herramienta "Guardar para Web" optimiza la imagen y nos revela el tiempo de carga según velocidad de datos y nos permite que en caso de ser JPEG, sea progresivo. Si además habilitamos la compresión GZIP en nuestro servidor, ganaremos aun más. <h3>Rehacer metatags</h3> Los meta tags. Una vez analizados, es hora de incluír los necesarios o eliminar los que son realmente irrelevantes. Mirando el código de esta misma página, podemos hacernos una idea de los metas más relevantes y necesarios que pasamos a enumerar: <ul> <ul> <li><code></code>Meta que define la codificación de carácteres de nuestro website. Recomendamos la lectura de este artículo de <a title="importancia del charset" href="http://blog.angelkurten.com/2012/11/meta-charset-importancia-y-uso-en-html.html">AngelKurten</a> para mejor comprensión</li> <li>Etiqueta que determina que la web puede verse en dispositivos móviles con escalado, es decir, que no hace falta el zoom manual para su visionado. Referencia: <a title="meta viewport" href="http://www.htmlcinco.com/etiqueta-meta-viewport-web-movil/">http://www.htmlcinco.com/etiqueta-meta-viewport-web-movil/</a></li> </ul> </ul> Las etiquetas a continuación pueden configurarse autom?aticamente en <a title="Geo Tag" href="http://www.geo-tag.de">http://www.geo-tag.de</a> <ul> <li>Abreviatura de Dublin Core, donde definimos un texto descriptivo de nuestro website</li> <li>Región</li> <li>Sitio, localidad.</li> <li>Coordenadas de latitud y longitud de la ubicación del negocio referido.</li> <li>Coordenadas de latitud y longitud de la ubicación del negocio referido.</li> </ul> Important?ísimas <ul> <li>Indicamos a los robots de búsqueda que nuestra url esté disponble para indexación. De lo contrario deberíamos usar el atributo nofollow.</li> <li>Este meta no debe faltar jamás, debe ser breve, conciso y contener palabras clave en su redacción. Se recomienda colocarla justo debajo de la etiqueta , pero no tenemos datos que den esa información como relevante.</li> </ul> <h3>Redes sociales en Tags Meta</h3>   Para Facebook La property og:, abreviatura de Open Graph es propiedad de Facebook y determina el contenido que se va compartir en dicha red cuando ejecutemos su script (Like o Share). Podeis consultar más en <a title="developers.facebook.com" href="http://developers.facebook.com">developers.facebook.com</a> <ul> <ul> <li>definimos el idioma</li> <li>el tipo de documento, por ejemplo article para un artículo como este que estais leyendo.</li> <li>el título que figurará en nuestro Share</li> <li>La descripción breve. Debe ser atractiva y concisa. El proposito es que pinchen para ver el artículo cuando lo vean en Facebook</li> <li>la url de la página a compartir. Podemos usar el mismo mecanismo automático del canonical, si lo tenemos definido.</li> <li>Fecha de actualización.</li> <li>Imagen que definiremos como la importante para compartir. Si esta etiqueta no está, Facebook tomará las imágenes que crea convenientes...aunque no sean relevantes....   Para Twitter Card </li> <li>Nombre del producto</li> <li>Título de tu página o producto</li> <li>Descripción de la página o producto</li> <li>Imagen de la página o producto</li> <li>@cuenta-del-publicador-o-propietario</li> <li>@cuenta-del-autor</li> <li>ISBN en caso de libros o publicaciones</li> <li>precio en caso de producto</li> </ul> </ul> Tags de Google+ <ul> <ul> <li>Autor. Se recomienda citar la página del perfil de Google+ del autor.</li> <li>Título de tu página o producto</li> <li>Descripción de la página o producto</li> <li>Imagen de la página o producto</li> </ul> </ul>   <blockquote>Lectura recomendada sobre los meta tags de las redes sociales: <cite><a href="http://www.adimedia.net/enriquece-tus-contenidos-compartidos-en-redes-sociales/">http://www.adimedia.net/enriquece-tus-contenidos-compartidos-en-redes-sociales/</a></cite></blockquote> <h3>Si es una web dinámica insertar sistema de comentario o fbcomments</h3> Cuando nuestro contenido es dinámico y se actualiza con frecuencia es muy recomendable el uso de sistemas de comentarios. La participación de los visitantes es muy importante, pues supone una actividad e interacción que viraliza nuestro contenido, así com los pingback. Además, la contribución constructiva de algunos commenters es impagable. Claro que, algunos otros tienen demasiado tiempo libre (dont feed the Troll).<a name="consulta"></a> El uso del plugin de comentarios de Facebook es bastante eficaz y además comparte tu contenido en la red social. <h3>Uso de friendly urls en servidores apache</h3> Bien, abordamos por fin el tema de las Friendly URLs o Url amigables. Además de evitarnos algún disgusto con inyecciones SQL, su uso faciltia la semántica de nuestro website al poner nombre al enlace al que vamos a visitar o bien para acortar una url demasiado pesada o con demasiadas variables. Pueden configruarse a través de .htaccess en servidores Apache activando la característia Rewrtite Rules. Si quereis documentación técnica acerca de las friendly os recomendamos la lectura de este artículo de <a title="friendly URL" href="http://www.miguelmanchego.com/2009/como-poner-friendly-url-a-mi-pagina/">Miguel Manchego</a> <h3>Nombres de url con palabras clave</h3> Si ya hemos activado las friendly, lo recomendable es nombrar las urls con palabras clave. Si las direcciones amigables se crean automáticamente según el título de nuestro artículo o página, debemos poner atención en colocar las palabras clave en el titulo. De igual manera, si creamos una página de manera manual, es importante nombrarla al menos con una o dos palabras clave sobre el tema tratado. Ejemplo: multigestor.com/poosicionamiento-seo.html <h3>Uso de sprites en botones y/o fondos CSS imagenes</h3> Volvemos al tema de las imágenes y la velocidad de carga. En ocasiones nuestro diseño requiere de imágenes complementarias como botones, líneas, iconos en formato JPEG o PNG aplicados como backgrounds. El uso de Sprites, es en resumen, la carga de una sola imagen aplicada para distintos botones o iconos, pero con diferente posición, todo ello marcado a través de CSS. Obviamente es importante porque cargamos una sola imagen para distintos botones, iconos etc... No obstante, desde aquí recomendamos el uso de librerias de iconos que son tratados como texto como por ejemplo, la fuente Glyphicon de Bootstrap o <a title="Font Awesome" href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a>. Sobre los background de los botones... pues quizá el uso exclusivo de CSS ofrezca un mejor rendimiento y más óptimo. <h3>Minimizar CSS y Javascript</h3> Convertir nuestros scripts o css a la mínima expresión es una práctica que optimiza el rendimiento del servidor y la velocidad de carga. La minimización es parecida a la compresión GZIP pero a su vez totalmente diferente. Recomendamos el uso de <a title="JSCompress" href="http://jscompress.com/">JSCompress</a> para JS o bien <a title="Minify " href="http://www.minifycss.com/">Minify</a> para la compresión CSS. <h3>Compresión de Javascript con GZIP</h3> Google Page Speed nos recomienda que hagamos compresión de los Javascripts mediante GZIP, una librería de compresión de archivos. Recomendamos leer <a title="Seo para newbies" href="http://www.seoparanewbies.com/compresion-gzip/">http://www.seoparanewbies.com/compresion-gzip/</a> <h3>Combinar Javascripot en un solo archivo</h3> El uso de jQuery y AJAX en nuestras páginas es muy común y cada vez más útil, pero nos genera un peso de carga considerable. En la medida de lo posible, recomendamos unificar los scripts de llamada en un solo archivo. Eso hará el código más comprensible y la carga se verá reducida en un porcentaje aceptable. Uno de los errores más comunes es la llamada a librerías jQuery en diferentes versiones, en una misma página. Es recomendable invocar una sola, la versión más actual. <h3>Concisión en la home de nuestro website</h3> En la Front Page de nuestro website ofreceremos un breve resumen de referencia hacia nuestro artículo o contenido, nunca una versión extendida del mismo. Esto es, básicamente para no crear contenidos duplicados. Si en nuestra página inicial ofrecemos toda la información y en la página detalle también, estaremos creando un contenido duplicado. Y sabemos que eso no es lo que queremos, verdad? <h3>Hotlinkin interno de página a página del website</h3> En la medida de lo posible debemos ofrecer los enlaces de todas las páginas de nuestro website en cada página del mismo.. Si tenemos un blog creado, podemos activar o crear una serie de enlaces a entradas anteriores. Cuidado con los broken links!! <h3>Creación de página 404</h3> Si usamos nuestro propio código para la creación de nuestro website (en vez de CMS de terceros como Wordpress, Joomla, etc...), hemos de definir y redireccionar las paginas de errores. Además de más elegante, Google recomienda el uso de páginas de error, pues odia los mensajes de servidor con páginas asépticas y letra romana... Una de las más comunes es la página 404, que nos comunica que la página que tratamos de ver no existe o no se encuentra disponible. Para actuivar las páginas de eeror en Apache, <a title="Aner Barrena" href="http://www.anerbarrena.com/pagina-404-htaccess-1556/">leed aquí</a> <h3>Aplicación de Newsletter</h3> Una de las causas detonantes de la actividad en nuestro website, además de las redes sociales, es la interactuación directa con el usurio o inscrito. El uso de las newsletters es recomendable, pero hay que ser muy cuidadoso y tener en cuenta varios factores: <ul> <li>Usar gestores especializados en newsletter como ListMewssenger o Mailchimp</li> <li>No ser demasiado constante en el envío ni tampoco demasiado dejado.</li> <li>Usar HTML liviano y una versión en texto alternativa para el envío. Los clientes de correo anteponen la seguridad y la negación al SPAM</li> <li>Ofrecer enlaces a nuestra página para complementar la información. Nunca envíes un artículo entero a una lista de correo. Envía el enlace de referencia. Esto hará que se genere tráfico en nuestro website y nos permitirá ofrecer la información libremente, sin las ataduras del sistema de correo.</li> </ul> <h3>Analytics</h3> Es muy recomendable la aplicación de Analytics en nuestro código. Actualmente es la herramienta de seguimiento del tráfico más fiable que existe. Eso si, su uso conlleva que el visitante ofrezca y aporte datos de navegación como la ubicación, preferencias, resulados de búsqueda, etc... lo cual implica el uso de cookies de nuestro website. <h3>Usar un CDN</h3> Muchos analizadores de sitios para SEO recomienda en uso de CDN. Se trata de una API que ofrece un conjunto de servidores que contienen copias de una misma serie de contenidos ubicados en puntos diversos de una red para poder servir sus contenidos de manera más eficiente. Recomendamos la lectura del siguiente artículo de <a title="USO DE CDN" href="http://manueldelgado.com/que-es-una-content-delivery-network-cdn/">Manuel Delgado</a> acerca del tema   Pues hasta aquí nuestro artículo sobre la acción a realizar tras el <a title="La Optimización en motores de búsqueda (SEO): El Análisis previo. (I)" href="../../blogdt/la-optimizacion-en-motores-de-busqueda-seo-el-analisis-previo-i/39">La Optimización en motores de búsqueda (SEO): El Análisis previo. (I)</a>.   En la próxima entrega valoraremos el Marketing Social y como actuar en consecuencia. Gracias por leernos y esperamos haber sido de utilidad.