Fig. 6. El validador de código del W3C es capaz de detectar la ausencia de un encabezado después del inicio de una sección (líneas 17-18 en la imagen). Ahora bien, en ningún caso nos podrá informar de si esa parte de la página se trata realmente de un contenido que debemos marcar como una sección.

Actividad 1. Visita los siguientes validadores analizando en todos ellos la misma página. Haz una captura de pantalla del resultado de cada análisis y, a continuación, redacta un par de párrafos comparando las prestaciones del validador del W3C con alguno de los otros.

• W3C Markup Validation Service v. 1.3: http://validator.w3.org/
• Validator.nu (X)HTML5 Validator: http://html5.validator.nu/ ; http://validator.nu/
• Dr. Watson: http://watson.addy.com

3.2. eXtensible Markup Language (XML)

XML es un lenguaje de marcas desarrollado por el W3C pensado para almacenar y describir datos de forma independiente al software y al hardware. Como HTML, deriva del lenguaje SGML (Standard Generalized Markup Language) del cual hereda el concepto de DTD (Document Type Definition) o en la actualidad XSD (XML Schema Definition), que son archivos que establecen una definición formal de un tipo de documento XML, especificando la estructura lógica de sus elementos y atributos. A diferencia de HTML, en el que encontramos una sintaxis preestablecida que debemos utilizar para crear un documento correcto, en el caso de XML no existe una colección de etiquetas y atributos, sino que, en cada caso, se pueden utilizar aquellas etiquetas que consideremos más oportunas. Para poder utilizar esas etiquetas y sus atributos, deben estar definidas en un XSD que debemos crear previamente.

Es importante comprender que XML no es un sustituto de HTML, ni viceversa. Se trata de dos lenguajes complementarios que se utilizan en diferentes casos. Mucha gente no es consciente de que sus sitios web incorporan, además de documentos HTML, también documentos XML. Este es el caso de los RSS (Really Simple Syndication) generados automáticamente por los blogs o canales de noticias de nuestros sitios o incluso el sitemap de nuestro web.

Una de las grandes diferencias entre los documentos codificados en HTML y los codificados en XML, es que mientras que en los primeros, como hemos comentado en la introducción, es posible ver una página correctamente a pesar de contener algunos errores de codificación, en el caso de XML un sólo error bastará para que el documento no sea válido y por lo tanto no se muestre en el navegador o aplicación. Es por este motivo que la validación de documentos XML es imprescindible. En este sentido, la mayoría de editores de XML ya incorporan herramientas de validación que podemos utilizar a medida que creamos nuestros documentos. No obstante, también encontramos algunos validadores en línea.

Algunos de los principales validadores de XML disponibles en línea son:

• XML Validator (W3C): http://www.w3schools.com/xml/xml_validator.asp
• XML Validation: http://www.xmlvalidation.com/
• XML Validator – XSD (XML Schema): http://www.freeformatter.com/xml-validator-xsd.html (Es necesario un XSD para validar el XML)

3.3. Hojas de estilo en cascada (CSS)

Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje complementario al HTML que permite definir la presentación de un documento estructurado en HTML o XML de forma independiente a su contenido. Como en el caso del lenguaje HTML, su normalización corre a cargo del W3C. La versión actual de este lenguaje es la conocida como CSS3.

Es interesante remarcar que la aparición de las CSS fue posterior a la de HTML. Desde la aparición de XHTML, el W3C incluye las hojas de estilo de forma obligatoria, recomendando la eliminación de algunos elementos anteriores que se venían utilizando de manera incorrecta con demasiada frecuencia para definir la presentación a partir de etiquetas HTML.

Como en el caso del lenguaje HTML, las hojas de estilo tampoco están exentas de errores, por lo que también es necesario someter su código a procesos de evaluación. En el caso de las CSS también encontramos validadores específicos que nos permiten analizar automáticamente el código de nuestras CSS.

3.3.1. Tipos de errores

Al validar hojas de estilo podemos encontrarnos, entre otros, los siguientes tipos de errores de sintaxis:

• Errores de tecleado o espacios innecesarios que pueden devolver errores de parseo, etc.

body{

color: yelow; /* Aquí un error de tecleo */

font-size: 15px;

}

• Olvidar cerrar cada declaración con un punto y como final, o las declaraciones con la llave de cierre correspondiente.

body{

color: yellow /* Aquí falta un punto y coma */

font-size: 15px;

/* Aquí falta una llave de cierre */

h1{

color: black;

}

El resultado es el siguiente:

Como podemos observar en la imagen anterior, aparecen 3 errores diferentes que se solucionan con tan solo un par de cambios. Esto es algo habitual, en la mayoría de ocasiones, corregir una propiedad, añadir un punto y coma faltante o cualquier otra acción correctiva, puede resolver dos o más de los errores mostrados por las herramientas de validación.

• Uso de propiedades no incluidas en la especificación CSS, pero que sí están soportadas por algunos navegadores (por ejemplo, la propiedad zoom).

• Reglas implementadas mediante prefijos de diferentes navegadores (-moz, -webkit, etc.). A pesar de que no validan al no estar incluidas en la especificación CSS, no deberían considerarse errores ni dar problemas si se implementan adecuadamente. En el siguiente enlace, se muestran todas las propiedades CSS disponibles y si se soportan de manera nativa o mediante el prefijo correspondiente: https://www.w3schools.com/cssref/css3_browsersupport.asp

Actividad 2. Analiza una página que contenga hojas de estilo con el validador del W3C. Haz una captura de pantalla y redacta un párrafo comentando los errores detectados.

• W3C Servicio de Validación de CSS http://jigsaw.w3.org/css-validator

4. Servicios para la evaluación automática de la accesibilidad

Entendemos por accesibilidad web, la capacidad de acceso al contenido y funcionalidades de un sitio web por todo tipo de usuarios, independientemente de sus discapacidades o su contexto de navegación (calidad de la conexión a Internet, tipo de navegador, etc.), de modo que esos usuarios sean capaces de percibir, entender, navegar e interactuar con ese web. De esta definición se desprende que, a diferencia de lo que pueda parecer en un primer momento, la accesibilidad no sólo beneficia a personas con alguna de las discapacidades reconocidas: visual, auditiva, motriz y cognitiva, sino que también beneficia a otros grupos de usuarios como, por ejemplo, a las personas mayores, a las afectadas por una incapacidad transitoria, a las que acceden a Internet mediante equipos y conexiones limitadas o mediante navegadores obsoletos, usuarios con dificultad con el idioma o que precisan de materiales de lectura fácil e, incluso, a usuarios inexpertos en el uso de estas tecnologías.

La accesibilidad y la usabilidad son dos disciplinas que se refuerzan mutuamente. La usabilidad es una condición necesaria, pero no la única, para que un sitio web sea accesible. En este sentido, ambas disciplinas acaban compartiendo características y metodologías.

En el campo de la accesibilidad, la institución de referencia a nivel internacional es la WAI (Web Accessibility Initiative). La WAI, o Iniciativa para la Accesibilidad Web, es un organismo dependiente del W3C, cuyo objetivo es facilitar el acceso de las personas con discapacidad a la Web. Para ello, desarrolla estrategias, directrices y recursos para la evaluación y el rediseño de webs. Entre los diferentes recursos publicados por la WAI, destacan las Directrices de accesibilidad para el contenido web (Web Content Accessibility Guidelines, WCAG). Este documento marca las condiciones que ha de cumplir un contenido web para poder ser considerado accesible y proporciona mecanismos y estrategias para conseguirlo. Se trata del documento de referencia internacional en el campo de la accesibilidad, hasta el punto que su segunda versión, se ha llegado a convertir en una norma ISO (2012). En 2008, nueve años después de la publicación de la primera versión de las WCAG, la WAI publicó la versión 2.0 de sus directrices (WCAG 2.0), una versión recientemente actualizada (WCAG 2.1, 2018). Esta nueva versión se organiza a partir de 4 principios básicos: perceptibilidad (perceivable), operabilidad (operable), comprensibilidad (understandable) y robustez (robust). A su vez, cada uno de estos principios se desarrolla a partir de diferentes directrices que proporcionan los objetivos básicos que han de guiar a los diseñadores hacia una web accesible, concretándose en una lista de criterios de conformidad. Finalmente, se establecen tres niveles de conformidad: A (el más bajo), AA y AAA (el más alto), que determinan el nivel de accesibilidad final del producto evaluado. En la práctica la mayoría de webs que presumen de ser accesibles lo son hasta el nivel doble A. El nivel triple AAA conlleva en la mayoría de casos, grandes dificultades que llevan a los diseñadores a plantarse en el nivel anterior, o en cumplir sólo algunas de las recomendaciones de tipo triple A.

A nivel norteamericano, encontramos la Sección 508 de 2001. Una ley que determina las características que han de tener las páginas y aplicaciones web para ser accesibles y que es aplicable y obligatoria para todas las agencias federales de Estados Unidos. En la práctica, se trata de un texto muy parecido al de las WCAG. Cabe destacar que a nivel español tenemos la norma UNE 139803:2012 Requisitos de accesibilidad para contenidos en la Web, que es equivalente a las WCAG 2.0 y obligatoria para todas las webs y aplicaciones creadas por la administración pública española.

Existen varios servicios gratuitos para analizar la accesibilidad de una página web de manera automática. Algunos de ellos dividen los indicadores de análisis según los cuatro principios básicos propuestos por las WCAG, mientras que otros los agrupan según la directriz que los regula o incluso según el nivel de conformidad. En lo que todos coinciden es en utilizar como base para el análisis las WCAG del W3C. A diferencia de los validadores de código HTML y CSS, el W3C no ha desarrollado ninguna aplicación similar para evaluar la accesibilidad de un sitio web.

Como en el caso de la validación del código HTML, pero en este caso de una manera mucho más acusada, la evaluación automática sólo cubre una pequeña parte del análisis de la accesibilidad de una página web. En este sentido, la mayoría de las características sólo pueden ser evaluadas mediante un análisis «manual». Por ejemplo, la correspondencia entre un icono y la idea representada, o la adecuación de un texto alternativo a la imagen que representa, sólo podrán ser valorados por un humano. Esto provoca que en los resultados que proporcionan los evaluadores automáticos suelen distinguirse dos tipos de errores. Por un lado, los errores que el sistema es capaz de detectar. Y por otro, una serie de avisos (warnings) en los que el sistema nos aconseja revisar de manera manual ciertos aspectos que no es capaz de evaluar.

A pesar de esta limitación evidente, los evaluadores de accesibilidad cumplen una función importante, especialmente cuando debemos analizar sitios web muy grandes en los que una evaluación manual de todos los indicadores implicaría muchas más horas de trabajo. También facilitan la revisión manual, al proporcionar información acerca de los elementos a verificar o instrucciones sobre cómo realizar esa verificación.

Entre los evaluadores de accesibilidad web disponibles en línea encontramos:

• TAW:https://www.tawdis.net. Permite analizar la página según las directrices de la versión 2 de las WCAG. También nos permite seleccionar el nivel de análisis (A, AA o AAA) y las tecnologías soportadas, incluido JavaScript. Además, una vez realizado el análisis, podemos recibir un informe en nuestro correo electrónico.
• WAVE: http://www.wave.webaim.org/index.jsp. Compatible con las WCAG 2 y los niveles A y AA. También con la Section 508 norteamericana.
• HiSoftware Cynthia Says: http://www.cynthiasays.com. Realiza análisis de acuerdo a los tres niveles de las WCAG y a la Section 508. Los resultados se muestran siguiendo el esquema de las WCAG 2.0, indicando la herramienta cuáles son los criterios que debemos corregir o revisar.
• Functional Accessibility Evaluator 2.0: https://fae.disability.illinois.edu. Esta herramienta de la University of Illinois at Urbana-Champaign, muestra los resultados organizados según el conjunto de reglas propios de la tecnología que estemos utilizando (HTML5 y WAI-ARIA o tecnologías anteriores), y también organizadas de acuerdo a las WCAG 2. Para cada error o advertencia muestra una gran cantidad de información adicional que nos ayuda a comprender el error y cómo solucionarlo.
• Examinator: http://examinator.ws/. Compatible con las WCAG 2 y los niveles A, AA y AAA.

Veamos algunos fragmentos de informes ofrecidos por las herramientas WAVE y TAW:

Fig. 7. Ejemplo de informe proporcionado por WAVE.

Como podemos ver en la figura anterior y, a diferencia del resto de herramientas de análisis, WAVE muestra un informe totalmente visual. En él podemos diferenciar dos grandes zonas. La primera es una columna situada en la parte izquierda de la pantalla, en la que encontramos el compendio de errores y advertencias detectados. Por otro lado, el resto de la interfaz muestra la página analizada sobre la que se marcan mediante diferentes iconos la ubicación de esos errores y advertencias. Como podemos ver en el ejemplo, no todos los iconos muestran errores (color rojo) o advertencias (color amarillo), sino que también se muestran recursos propios de HTML5 o WAI-ARIA, o diferentes elementos estructurales presentes en el código. Si sólo nos interesa ver los errores, o cualquiera de estos grupos de iconos, podemos seleccionar la pestaña con forma de bandera situada a la izquierda del informe. Una vez seleccionada, podemos filtrar los resultados del informe para ver sólo los errores o alertas, o incluso los problemas de accesibilidad propios de los diferentes niveles de las WCAG 2 o la Section 508.

Fig. 8. Opciones de la herramienta WAVE.

Aquí te muestro un ejemplo de análisis de un sitio web con Wave.

En el caso de la herramienta TAW, tras lanzar el análisis se nos muestra un primer resumen de los resultados en el que podemos ver agrupados bajo las categorías “Problemas”, “Advertencias” y “No verificados”, los diferentes problemas de accesibilidad encontrados por la herramienta.

Fig. 9. Informe resumido proporcionado por TAW.

Mediante el enlace “informe detallado” que encontramos en la parte inferior de la pantalla, podemos acceder a la lista completa de incidencias agrupadas bajo los 4 principios de las WCAG (perceptible, operable, comprensible y robusto). Para cada criterio a verificar se nos muestra:

• Una pequeña ayuda (aparece al pasar el ratón sobre el icono con la “i”)
• Un enlace a la técnica propuesta por el W3C para solucionar ese problema (por ejemplo, H45, using longdesc)
• El tipo de incidencia: error, advertencia o aspecto no verificado y que por lo tanto, necesita una verificación manual.
• La cantidad de veces que aparece.
• La línea o líneas en la que se encuentra presente. Funcionalidad limitada al informe enviado por correo electrónico.

Fig. 10. Informe completo de TAW.

Fig. 11. Informe de TAW enviado al correo electrónico en el que se observan las referencias a las líneas del código fuente en las cuales se ha detectado un error o advertencia.

Vistas las herramientas en línea y, como comentábamos antes, también encontramos varias aplicaciones de escritorio. Entre estas destaca:

• ADesigner: http://www.eclipse.org/actf/downloads/tools/aDesigner/index.php. Una herramienta creada por IBM que valida de acuerdo a las WCAG 2.0. Pone especial énfasis en la experiencia de usuario de las personas con discapacidad visual.

También existen extensiones para diferentes navegadores como:

• Accessibility Ainspector: https://code.google.com/p/ainspector/. Es una extensión para Firebug que permite validar de acuerdo a las WCAG 2.0.
• Accessibility Developer Tool: https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb. Una extensión para el navegador Chrome bastante limitada que sólo analiza 15 aspectos entre los cuales la existencia de texto alternativo en las imágenes, el uso de algunos atributos ARIA, etc.

Una última alternativa es la aplicación de servidor Tanaguru. Se trata de una aplicación de software libre mediante la que es posible evaluar de forma automática webs completas. El proceso de revisión se hace de acuerdo a las WCAG 2.0, la Section 508 norteamericana y la AccessiWeb 2.1 francesa.

Al analizar la accesibilidad de un sitio web, no debemos olvidar que en la mayoría de sitios, además de páginas HTML, encontramos otros tipos de documentos como, por ejemplo, archivos en formato PDF. Para este tipo de documentos también existen herramientas de validación específicas como:

• PDF Accessibility Checker

Un uso inadecuado del color también puede derivar en problemas de accesibilidad dentro de nuestros sitios web. Por ejemplo, un contraste insuficiente entre el texto y el fondo provocar que el contenido presente una baja legibilidad para cualquier usuario, pero especialmente, para aquellos con baja visión. Por otro lado, las personas con visión cromática deficiente, pueden presentar problemas a la hora de diferenciar determinados colores como el rojo y el verde, o el rojo y el azul, entre otras combinaciones. A continuación se muestran algunas herramientas que nos permiten analizar el nivel de contraste de nuestro contenido, informándonos en aquellos casos que estén por debajo del umbral requerido por las directrices de accesibilidad. También algunos simuladores que nos permiten experimentar las diferentes modalidades de visión cromática deficiente con el objetivo de detectar combinaciones de colores problemáticas en nuestro contenido.

Herramientas de análisis de contraste:

• Color Contrast Checker.
• Colour Contrast Analyser.

Herramientas de simulación de visión cromática deficiente:

• Coblis, Color Blindness Simulator.
• Colorblind Dalton (extensión para Google Chrome)
• Color Oracle.
• NoCoffee.

Actividad 3. Analiza una misma página usando TAW y WAVE. Realiza diferentes capturas de pantalla de los resultados obtenidos y redacta un par de párrafos comentando algunos de los errores detectados y posibles inconsistencias -si las hay- entre las herramientas.

5. Servicios para la optimización del posicionamiento

El módulo 3 del Máster está dedicado de forma íntegra al posicionamiento y hay una unidad didáctica específica sobre herramientas para el posicionamiento. En este punto solo vamos a ver una selección de algunas herramientas que ofrecen datos útiles para el seguimiento de nuestras campañas de posicionamiento, en vistas a tener una primera visión general de este ámbito.

5.1. Analizadores de enlaces

Existen dos tipos de analizadores de enlaces. Por un lado, los que analizan los enlaces salientes, es decir, los que están presentes en la página analizada, con el objetivo de determinar si alguno de ellos está roto, así como el texto ancla utilizado. Y por otro lado, aquellos que evalúan los enlaces entrantes, es decir, los enlaces presentes en alguna página de Internet que apuntan a la página analizada. Ambos tipos de enlaces son importantes para el posicionamiento. Los enlaces entrantes o backlinks, son uno de los factores con mayor peso entre los que determinan el posicionamiento de un sitio web en los buscadores. Simplificando mucho, a mayor cantidad de enlaces entrantes y cuanto mayor sea la autoridad de los webs que nos enlazan, más posibilidades tendrá nuestra web de alcanzar una posición entre los primeros resultados. En cuanto a los enlaces salientes, es importante que éstos funcionen correctamente, especialmente aquellos enlaces salientes internos. Los enlaces internos son aquellos que apuntan a otras páginas dentro de nuestro sitio web. En el caso de que estos enlaces no funcionen nos encontraremos con los tradicionales mensajes de error 404. A mayor número de respuestas 404, peor experiencia de usuario y mayores posibilidades de recibir algún tipo de penalización por parte de los buscadores.

La integridad de los enlaces es un tema tan importante actualmente que muchos sistemas de gestión de contenidos (CMS) ya incorporan de manera nativa, o a través de plugins, scripts que se encargan de analizar periódicamente el buen funcionamiento de los enlaces presentes en nuestro web.

Fig. 12. Broken Link Checker es un plugin para WordPress que automáticamente y de forma periódica, nos informa del estado de los enlaces presentes en nuestro blog. Además ofrece otra información relevante como el tipo de error o el lugar en el que se encuentra el enlace (post, comentarios, etc.).

5.1.1 Analizadores de enlaces salientes

• W3C Link Checker: http://validator.w3.org/checklink
• Online Broken Link Checker: http://www.brokenlinkcheck.com
• Link Valet: http://www.htmlhelp.com/tools/valet/

Actividad 4. Analiza las misma página en W3C Link Checker, Online Broken Link Checker y Link Valet. Haz una captura de pantalla en cada caso y redacta un párrafo comentado si los errores detectados son coincidentes.

5.1.2 Analizadores de enlaces entrantes

La inmensa mayoría de analizadores de enlaces pertenecen a servicios de pago más grandes que incorporan diversas funcionalidades relacionadas con las campañas de posicionamiento web. Algunos de estos servicios, permiten utilizar su herramienta de análisis de enlaces con algunos límites en cuanto a la cantidad de resultados mostrados, o el número de veces que podemos hacer la consulta desde una IP determinada. A continuación se muestran algunos de estos servicios:

• Open Site Explorer: http://www.opensiteexplorer.org/. Excelente herramienta. (Atención: el número de consultas diarias de cada usuario está limitado).
• Open Link Profiler: http://openlinkprofiler.org/
• Majestic SEO: http://es.majesticseo.com
• URLTrends (Opción URL): http://www.urltrends.com/

El listado de enlaces entrantes a una página también puede comprobarse con la mayoría de buscadores estándar. En Google, Yahoo y Bing se usa el parámetro «link:». Por ejemplo para conocer los enlaces hacia http://www.documentaciondigital.org deberíamos introducir en la caja de búsqueda:

link:www.documentaciondigital.org

Herramientas como Google Search Console y Google Analytics, abordadas en otras unidades del máster, también ofrecen información acerca de los enlaces que apuntan a nuestro dominio.

Actividad 5. Analiza la misma página con, al menos, dos de los analizadores de enlaces entrantes mencionados, realiza capturas de pantalla de los resultados y redacta un párrafo comentádolos.

5.2. Analizadores del contenido

Como en el caso de los enlaces entrantes, el contenido de una página web tiene especial interés en la mejora del posicionamiento. Cada página dentro de nuestro sitio web estará mejor o peor posicionada en relación a una determinada palabra clave que es el tema principal de dicha página. Esa palabra o palabras clave deberán aparecer en determinadas zonas de la página si queremos indicar a los buscadores su relevancia dentro del contenido. De esta manera, La palabra clave para la cual estamos optimizando una página web deberá aparecer en el título de la página (etiqueta <title>), en la meta etiqueta description, en los encabezados de nivel superior <h1>, <h2>…, en los primeros párrafos del contenido, estar marcada como importante a través de una etiqueta <strong> o incluso presentar una densidad adecuada a la longitud total del texto de esa página, entre otros factores.

En el mercado encontramos diferentes productos que son capaces de proporcionarnos esta información acerca de nuestro contenido y en base a ello, nos ofrecen sugerencias sobre cómo mejorar la redacción de ese contenido en vistas a mejorar el posicionamiento. Al tratarse de comprobaciones que en la mayoría de casos sí pueden hacerse de forma automática (aparición de una palabra propuesta en determinadas etiquetas, cálculo de la densidad, longitud de las metaetiquetas, etc.), estos programas pueden ser de gran ayuda para los encargados del SEO de un sitio web. Como pasa con el resto de evaluadores que hemos visto en este artículo, siempre quedan aspectos que ningún sistema es capaz de evaluar o por lo menos, de hacerlo de manera perfecta. Este es el caso, por ejemplo, de determinar si el contenido es de calidad o si muestra varias faltas de ortografía.

También, como en el caso de los analizadores de enlaces, la mayoría de CMS ya incorporan, bien de manera nativa, bien a través de extensiones o plugins, herramientas que nos ayudan a determinar si nuestra página cumple con los parámetros deseables para poder competir por un puesto entre los primeros resultados de búsqueda. Uno de los plugins más famosos y reconocidos es el de Yoast para WordPress. Se trata de un plugin que nos permite no sólo analizar el contenido de cada página o entrada, sino también gestionar los sitemaps, la canonicalización, editar nuestros ficheros robots.txt o .htaccess, entre otras muchas funciones.

Fig. 13. En la imagen se puede apreciar el módulo de SEO de Yoast para WordPress. Entre otras cosas nos informa de la aparición de la palabra clave definida en el campo “Focus Keyword” en aquellas secciones o elementos importantes (encabezado, título, URL, contenido y meta descripción) y nos permite editar dos de los campos más importantes en el SEO como el título y la meta descripción. También nos avisa de problemas, en este caso del uso de un título demasiado largo.

A continuación se muestran algunas herramientas online gratuitas que permiten analizar ciertos aspectos de nuestras páginas

• Meta Tag Analyzer. Herramienta muy completa que analiza diferentes elementos como las meta etiquetas, el título, la frecuencia de aparición de las palabras clave formadas por 1, 2 y 3 palabras, etc.. También ofrece sugerencias para mejorar el resultado.
• Keyword Density Tool. Analiza una página y realiza un informe sobre la frecuencia de aparición de las palabras que encuentra. Esta prestación está incluida en Meta Tag Analyzer.
• SEO Book. Keyword Density Analysis. Ofrece un servicio similar a la herramienta anterior pero además nos proporciona algún dato más sobre cada palabra como por ejemplo, el porcentaje de aparición sobre el total de palabras. También nos permite exportar los resultados en un fichero CSV. Como en el caso anterior, su prestación principal está incluida en Meta Tag Analyzer. Es necesario crear un usuario para utilizarla.

Por lo que respecta a las herramientas de análisis de escritorio, destaca Screaming Frog, una aplicación de pago, pero que ofrece una interesante versión gratuita con un límite de análisis de 500 URL. Su funcionamiento es simple, indicamos el dominio a rastrear y la herramienta recupera todos los URL internos y externos. De cada una de las páginas recuperadas, Screaming Frog muestra el título, las etiquetas h1 y h2, las meta descripciones, las imágenes y su tamaño, los códigos de respuesta del servidor (404, 500, etc.). Estos resultados los podemos filtrar, por ejemplo, para ver sólo aquellas páginas sin meta descripción, o con una duplicada. Finalmente, podemos exportar en formato Excel o CSV, cualquier conjunto de datos obtenidos.

Fig. 14. Interfaz de Screaming Frog SEO Spider.

Actividad 6. Haz una búsqueda en Google sobre cualquier tema y a continuación analiza con Meta Tag Analyzer dos páginas: la que aparece en primer lugar en el listado de resultados y la que aparece en la posición número 100. Realiza dos capturas de pantalla y redacta un par de párrafos analizando si el primer resultado en Google obtiene menos errores en Meta Tag Analyzer que el resultado número 100.

5.3. Velocidad de carga y rendimiento del sitio

La velocidad de carga de un sitio web es uno de los factores contemplados por los buscadores a la hora de resolver el ranking de resultados. Más allá de su relación con el SEO, una velocidad de carga adecuada también redundará en una mejor experiencia de usuario.

Se trata, por lo tanto, de un aspecto a tener en cuenta, y que debemos no sólo revisar puntualmente, sino monitorizar como otros tantos detalles de nuestro sitio web, en vistas a mantener de manera estable un rendimiento adecuado a lo largo del tiempo.

PageSpeed Insights es un servicio de Google que analiza el contenido de una página web, proporcionando a continuación diferentes sugerencias para mejorar su velocidad de carga.

El servicio analiza el rendimiento de la página tanto en dispositivos móviles, como en equipos de sobremesa. Para ello, obtiene y procesa la URL del sitio dos veces, cada una de ellas con un agente de usuario de Google específico (smartphone y ordenador).

El resultado del análisis se traduce a una puntuación que va de 0 a 100 puntos, siendo 100 la valoración más alta.

Entre los factores que PageSpeed Insights tiene en cuenta encontramos todos aquellos relacionados con la configuración del servidor web, la estructura HTML de la página y el uso de recursos externos (hojas de estilo, JavaScript…). Conviene destacar que el rendimiento real de la página dependerá de todos estos factores, pero también de la conexión a Internet del usuario que accede al sitio.

Más allá de la puntuación, lo más interesante de la herramienta son los consejos de optimización que proporciona en relación a los problemas detectados. En este sentido, los diferentes parámetros analizados se organizan bajo tres categorías expresadas en forma de signos de exclamación rojo (aspectos que de solucionarse pueden implicar una mejora sustancial en el rendimiento de la página), amarillo (aspectos que de solucionarse pueden implicar una mejora menor en la página) y verde (aspectos analizados en los que no se han encontrado incidencias destacables).

Fig. 15. Fragmento del resultado de un análisis de PageSpeed Insights.

Otro servicio centrado en el análisis de la velocidad de carga de los sitios web es GTmetrix. Esta herramienta combina datos de Google PageSpeed Insights e YSlow para generar una puntuación final en base a diferentes puntos de comprobación (peso de las imágenes, formatos de archivo, implementación de JavaScript y CSS, etc.), así como una serie de recomendaciones orientadas a mejorar el rendimiento de nuestro sitio web.

5.4. Otros tipos de análisis relacionados con el posicionamiento

Existen otros muchos tipos de analizadores que permiten conocer la calidad de la página en aspectos complementarios. Hemos seleccionado tres de ellos por considerar que pueden resultar de mayor interés.

Propietario del nombre de dominio

Whois

http://whois.domaintools.com

Este servicio proporciona los datos de la persona física o jurídica que es propietaria del nombre de dominio indicado. A menudo estos datos están ocultos y no es posible obtener esta información.

Analizador del tráfico

Alexa

http://www.alexa.com/#traffic

Alexa hace una estimación del número de usuarios que han consultado la web analizada en los últimos meses (traffic rank). Es una estimación relativamente fiable basada en los usuarios que han decidido instalarse una barra de herramientas de Alexa que a su vez informa del tráfico de las páginas que se van consultando.

Servicios que ofrecen una evaluación global del posicionamiento
(Serán tratados en profundidad en el módulo de posicionamiento)

• SemRush https://es.semrush.com/
• Moz https://moz.com/
• Urltrends http://www.urltrends.com/
• Domain Stats Tool http://www.webconfs.com/domain-stats.php
• Seo Site Check up http://www.seositecheckup.com
• WooRank http://www.woorank.com/es/
• DinoRank https://dinorank.com/

5.5. Directorio de recursos

En https://github.com/ralcarazm/seo/blob/master/recursos_herramientas_seo.md, podéis encontrar una lista de recursos y herramientas útiles para el desarrollo de estrategias SEO.

6. Mención de validación

Como hemos comentado en apartados anteriores, algunos servicios de validación proponen que, una vez superada la validación, se mencione de forma explícita en la página web que se ha superado dicha validación. Esta mención se suele hacer por medio de una insignia que se sitúa en la parte inferior de la página. Se trata una práctica especialmente interesante en la validación del código HTML y CSS y para mostrar el nivel de conformidad de la accesibilidad de nuestra página.

Fig. 16. Mención de validación para el código XHTML, el código CSS y mención de cumplimiento del nivel de conformidad doble AA de accesibilidad web.

En algunos validadores, el icono puede tener además un enlace que permita al usuario acceder a la herramienta en cuestión. A veces, este acceso no es hacía su página inicial, sino directamente a la página de resultados del análisis de la página en cuestión. De este modo, el usuario puede constatar que realmente no hay errores y el autor puede confirmar, de manera fácil, que la ausencia de errores se mantiene cuando se realiza algún cambio.

No obstante, tras la aparición del estándar HTML5 no ha sido creado por parte del W3C ningún tipo de insignia específica, como sí lo tuvieron versiones anteriores como HTML4 o XHTML, o como la que aún mantiene CSS. En una entrevista a Mike Smith, uno de los ingenieros responsables de las herramientas de validación del W3C, se afirmó que no se crearía tal insignia, ya que el objetivo del W3C al ofrecer al público sus herramientas de validación, tenía que ver más con ofrecer tanto a usuarios, como a desarrolladores una herramienta que les permitiese detectar errores en su código, que con un mecanismo de certificación.

Fig. 17. En la imagen se pueden observar los iconos con enlace al resultado del análisis que el validador de CSS del W3C nos ofrece si nuestro código supera la validación.

7. Conclusiones

Existen otros muchos servicios de análisis, evaluación y validación disponibles en la red. Hemos intentado seleccionar aquellos que pueden resultar de mayor utilidad en el diseño y creación de páginas web. En su totalidad, se trata de herramientas que permiten mejorar el diseño inicial, así como facilitar tareas de mantenimiento y rediseño.

Es importante destacar que no siempre es fácil crear páginas web sin ningún error. Además de los errores que podemos cometer por desconocimiento de los estándares involucrados, las herramientas que utilizamos para crear nuestras páginas web también pueden generar errores si no están bien programadas. Este es el caso de las plantillas para los CMS, de las librerías y plugins que utilizamos en nuestros portales para crear galerías de imágenes, carruseles u otras funcionalidades interactivas, o incluso debido al contenido incrustado en nuestra página procedente de otros portales.

También podemos encontrarnos con situaciones en las que, tras corregir los errores detectados por un validador, aparezcan nuevos errores en ese mismo validador o en otros validadores, al estar todos estos estándares estrechamente relacionados.

En cualquier caso, se trata de herramientas muy útiles que nos permiten evaluar grandes cantidades de código y contenido que de otra manera implicaría muchísimas horas de dedicación.

8. Bibliografía y recursos

Sitios web

Jacobs, Ian. Sobre el World Wide Web Consortium. 2004.

http://www.w3c.es/Consorcio/about-w3c.html

Monografías y normas

W3C. Web Content Accessibility Guidelines (WCAG) 2.1. 2018.

https://www.w3.org/TR/WCAG21/.

Directorios de herramientas de análisis, evaluación y validación automáticos

Alcaraz Martínez, Rubén. Herramientas y recursos para el análisis y desarrollo de estrategias SEO. 2018.

http://rubenalcaraz.es/seo/herramientas-seo.html.

Carrera, Olga. “Mis validatores”. En: Usable y accesible.

http://www.usableyaccesible.com/recurso_misvalidadores.html

Free SEO tools from WebConfs.com

Free SEO Tools from WebConfs.com

Meiert, Jens. UITest.com: web development tools.

http://uitest.com/en/analysis/

Search engine optimization tools.

http://tools.seobook.com/

W3C. Complete list of web accessibility evaluation tools.

http://www.w3.org/WAI/ER/tools/complete

W3C. W3C developers.

http://www.w3.org/QA/Tools/

© Texto: autor/es del documento

© Presente edición: Máster en Información Digital. UPF Barcelona School of Management

Este obra está bajo una licencia Creative Commons

Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported