Tácticas de crecimiento editorial para la temporada electoral | WEBINAR
Tácticas de crecimiento editorial para la temporada electoral | WEBINAR
Después de leer esta guía, debería poder comprender cómo se modifican y crean los artículos de noticias existentes utilizando diseños de diseño de página que mejoran la capacidad de Google para rastrear y comprender el contenido de la página.
Duración del vídeo
15:35
Responder cuestionario
Realizar la prueba del módulo actual
Materiales
Plantillas listas para usar
Recursos
Informes y recursos
2.1.1 ¿Qué es el diseño y la maquetación?
El diseño y la disposición de tu sitio web determinan cómo lo ve el usuario final. Esto es importante porque Google se rige por una filosofía que prioriza al usuario. Las páginas web que satisfacen las necesidades del usuario primero, de la forma más rápida y sencilla posible, obtienen mejores resultados en las SERP.
El diseño y la disposición de su sitio web también determinan la facilidad con la que los rastreadores web, como el bot de Google, lo rastrean e indexan. Un diseño y una disposición simples y optimizados permiten un rastreo rápido y sencillo, lo que a su vez se traduce en mejores clasificaciones.
Entonces, ¿qué impide a los editores implementar las mejores prácticas de diseño y maquetación? Con frecuencia, se enfrentan a estos problemas:
Para responder a esta pregunta, realizamos una búsqueda simple en Google ingresando las palabras clave “Charlie Puth News” en la barra de búsqueda.
Esto es lo que arrojaron los resultados de la búsqueda:
En el puesto número dos del ranking SERP de Top Stories, justo encima de una historia de NME, se encuentra el artículo del Daily Illini sobre el último lanzamiento de Charlie Puth.
El hecho de que el Daily Illini, un periódico estudiantil universitario, supere al sitio web de música independiente más grande del mundo, plantea algunas preguntas importantes
¿Cómo es posible que un periódico estudiantil de un pueblo de unos 40.000 habitantes del medio oeste estadounidense supere al sitio web de noticias musicales más grande del mundo? Intrigados, decidimos investigar un poco más.
Primero revisamos la página de NME sobre Charlie Puth.
De entrada, lo primero que notamos es el vídeo emergente que intenta cargar en la esquina inferior derecha de la pantalla. Obviamente, no carga bien. El vídeo almacenado en búfer también oculta parte del titular y el cuerpo de la noticia.
A continuación, observamos que la ventana gráfica inicial está ocupada principalmente por información irrelevante para la noticia. Hay un banner publicitario grande que ocupa aproximadamente la mitad de la página y, por supuesto, el vídeo.
De hecho, al desplazarnos por la página, encontramos más vídeos, imágenes grandes y atractivas, más anuncios emergentes y muchos hipervínculos. Dado lo rica que es la página, no es de extrañar que tardara bastante en cargar.
Luego inspeccionamos el Daily Illini y esto es lo que encontramos.
La página está limpia y ordenada. Tiene bastante publicidad y un gran botón de donación en la parte superior, pero no hay vídeos ni ventanas emergentes que cubran la ventana gráfica ni obstruyan el titular de la noticia. Podemos ver el titular de inmediato, y es muy probable que ocurra lo mismo con el rastreador web de Google.
En general, la página es ligera, minimalista y se carga muy rápido.
Decidimos analizar el código subyacente con más detalle. Al hacer clic derecho en la página y seleccionar "Ver código fuente" (en Chrome), podemos ver el código.
Esto es lo que vimos en la página de NME:
Dos cosas nos llamaron la atención aquí:
Esto no es lo mejor para una página por dos razones:
Por otro lado, cuando miramos el código de la página de Daily Illini, vimos esto:
Este es un código HTML muy simple. Además, no hay scripts ejecutándose dentro del...<head> sección.
¿Cómo se suma todo esto para que el Daily Illini supere al NME?
Probablemente intervengan varios factores, y uno de ellos es el diseño y la maquetación. La página del Daily Illini utiliza técnicas de diseño y maquetación que incluso las pequeñas editoriales pueden replicar fácilmente para optimizar su estrategia SEO.
Esto incluye usar código HTML limpio y simple, evitar scripts en la sección de encabezado, mantener la página liviana y rápida de cargar y no depender demasiado de ventanas emergentes y anuncios intersticiales.
La siguiente guía analiza cada uno de ellos en detalle y, al mismo tiempo, explica varias otras técnicas que puede implementar para mejorar significativamente su clasificación en SERP.
La semántica se relaciona con el significado de las palabras. Las etiquetas HTML semánticas definen claramente su significado tanto para el lector como para el rastreador web.
Por ejemplo, cuando usamos una etiqueta como<header> Sabemos lo que contiene: información sobre el encabezado.
Similarmente<h1> es una etiqueta semántica que le dice a Googlebot que lo que sigue es el encabezado más importante del artículo.
Por el contrario, cuando usamos una etiqueta como<div> Su significado no es evidente de inmediato. En HTML<div> significa división, y lo único que implica es que ha comenzado una nueva sección de código, sin revelar necesariamente ninguna información sobre el contenido de esta sección.
Los rastreadores web como Googlebot se crean mediante inteligencia artificial y algoritmos de aprendizaje automático que intentan simular el funcionamiento del cerebro humano. Esto significa que interpretan el texto de forma muy similar a como lo hace el cerebro humano.
El código HTML que es fácil de entender para los humanos también debería ser fácil de entender para el rastreador web de Google.
Como ejemplo, considere los dos fragmentos de código HTML a continuación:
Fuente: https://www.pluralsight.com/guides/semantic-html
Esta página utiliza el<div> Etiqueta para todo, desde el encabezado hasta el contenido principal y el pie de página. Al leer las etiquetas, no se aprecia inmediatamente cuál es su contenido.
Por el contrario, la página siguiente utiliza marcado semántico. El encabezado se coloca dentro del<header> etiqueta, el pie de página dentro de la<footer> etiqueta, y el cuerpo principal del artículo va dentro de la<main> etiqueta.
Fuente: https://www.pluralsight.com/guides/semantic-html
Dado que esto es fácil de leer y comprender para Googlebot, esta página tiene más posibilidades de tener una mejor clasificación que la anterior, en igualdad de condiciones.
Para ver si tu página usa marcado semántico, simplemente haz clic derecho en la página si usas Google Chrome y haz clic en Inspeccionar. Podrás ver el código fuente HTML de la página. Los elementos semánticos comunes incluyen<author> ,<video> ,<article> ,<form> ,<header> , etc.
Ahora sabemos qué es el marcado semántico y por qué es importante. Pero ¿cómo lo usamos para mejorar el SEO?
Es sencillo: utiliza siempre marcado semántico para destacar información importante sobre el diseño y la maquetación de tu artículo. Esto incluye la siguiente información:
Asegúrese de que el diseño de su página esté bien ordenado para mejorar el rastreo
Estás diseñando tu sitio para que lo lean tanto humanos como rastreadores web y, como tal, tu diseño y disposición deben reflejar este hecho.
A continuación se presentan algunos consejos que le ayudarán a lograr resultados mensurables para su sitio web.
Puedes usar HTML, CSS, Javascript o cualquier otro lenguaje frontend para crear páginas ricas e interactivas. Sin embargo, recuerda que cuanto más avanzado sea el lenguaje, mayor será su complejidad y mayor será la probabilidad de que un rastreador web tenga dificultades para leerlo, interpretarlo y compilarlo.
Cualquier cosa codificada en HTML puede no ser muy bonita a la vista, pero se cargará más rápido y estará más optimizada para los motores de búsqueda por la sencilla razón de que los motores de búsqueda pueden leerlo y comprenderlo más rápido.
Piensa en el HTML simple como el esqueleto de tu página web. Puedes añadir CSS y Javascript para darle más cuerpo y darle un aspecto atractivo y dinámico, pero es mejor mantener el contenido más importante dentro del esqueleto en lugar de colocarlo en la realidad.
Entonces, ¿cómo implementamos HTML simple? Una forma sencilla de hacerlo es colocar el cuerpo principal del contenido dentro<article> Etiquetas HTML.
De esta manera, cuando los rastreadores web encuentran el<article> Al usar esta etiqueta, saben inmediatamente que lo que sigue es el contenido más importante de tu página: la noticia. Esto ayuda al motor de búsqueda a comprender que el contenido dentro de esta etiqueta debe tener mayor relevancia.
HTML simple<article> La etiqueta es un marcador semántico que se ve así:
Fuente: https://en.wikipedia.org/wiki/Article_element
La siguiente pregunta obvia: si uso un CMS como WordPress, ¿dónde inserto estas etiquetas?
Cómo hacerlo: Si estás creando un sitio web personalizado con HTML, puedes revisar el código fuente para asegurarte de que use HTML simple, especialmente en áreas críticas. Te recomendamos hablar con más detalle con un desarrollador para evitar afectar la funcionalidad accidentalmente.
Si usas WordPress, consulta esta guía . También te puede resultar útil guía sobre cómo insertar HTML
Estas instrucciones son para WordPress, ya que sigue siendo el CMS más popular entre los editores. Si utilizas otro CMS, como Wix, consulta la página de soporte o documentación de tu CMS.
Si tiene acceso a un equipo de desarrolladores web, es mejor que lo hagan ellos, ya que editar el código HTML puede llevar mucho tiempo.
Realiza pruebas para asegurarte de que tu contenido se visualice correctamente en todos los navegadores, dispositivos y tamaños. Este paso es más obvio, pero a menudo se pasa por alto. Si tu contenido no se visualiza como deseas en todos los navegadores y dispositivos, afectará la experiencia del usuario y, a largo plazo, tu posicionamiento en las SERP.
Cómo hacer esto: Para probar contenido en diferentes plataformas, debes abrir tu página en diferentes dispositivos y navegadores para ver cómo se procesa.
Como mínimo, debes probar lo siguiente:
El marcado HTML ayuda a resaltar los diferentes elementos de tu página. Los datos estructurados ayudan a los motores de búsqueda a leer el contenido de los diferentes elementos de tu página y a comprender mejor su contenido.
Los datos estructurados son simplemente una serie de instrucciones escritas en un lenguaje sencillo, como JSON-LD, que pueden insertarse en el código HTML de tu página web. Piénsalo como una meta descripción, pero para fragmentos de contenido individuales de tu página.
En el siguiente ejemplo, los datos estructurados ayudan a Google a identificar cinco atributos sobre una página de dbpedia sobre John Lennon:
Fuente: https://json-ld.org/
Como puedes ver, el código está en un lenguaje sencillo y fácil de entender tanto para un lector humano como para un rastreador web.
Aquí tienes otro ejemplo que muestra cómo los datos estructurados pueden integrarse perfectamente en el código HTML de tu página web. Las instrucciones de los datos estructurados están resaltadas en verde.
Fuente: developers.google.com
En este ejemplo, los datos estructurados le indican a Googlebot que esta es una página de recetas de pastel de café de alguien llamado Mary Stone.
El uso de datos estructurados en el diseño de su sitio web ofrece resultados medibles. Por ejemplo, puede aumentar la tasa de clics (CTR) de un sitio web hasta en un 30 %.
El uso de datos estructurados también ayuda a que su página tenga una mejor clasificación en los carruseles, fragmentos destacados, videos y funciones del panel de conocimiento de Google.
Para el SEO de Google Noticias, es importante incluir los siguientes elementos al crear datos estructurados para proporcionar valor adicional:
Cómo hacer esto: Puede agregar datos/esquemas estructurados a su contenido manualmente o usando un complemento para su CMS particular.
Todos los elementos de tu artículo deben estar organizados en un orden específico para facilitar su rastreo. El orden es el siguiente:
La experiencia de página mide cómo los usuarios experimentan tu página. Google cuenta con un conjunto de parámetros para cuantificarla. Hemos dedicado un módulo completo a los factores de la experiencia de página , por lo que aquí solo analizaremos brevemente cada uno.
Cómo hacerlo: Puedes probar la experiencia de la página tanto manualmente como con plugins o aplicaciones de terceros. Por ejemplo, Page Speed Insights es una herramienta práctica que te ayuda a analizar el rendimiento de tu sitio web según el CWV y otros parámetros, y asigna una puntuación según su análisis. También prueba la capacidad de respuesta tanto en dispositivos móviles como en ordenadores.
Los editores de noticias no deben publicar varios artículos con la misma URL. Esto dificultará que Google los indexe. Cada artículo debe tener su propia URL.
Además, estas URL deben ser permanentes. Esto significa que la misma noticia debe mostrarse en una URL específica. Si la noticia asociada a una URL específica cambia con frecuencia, Google no podrá rastrearla ni indexarla. Sin embargo, los editores deben actualizar la noticia con la frecuencia necesaria.
Si es necesario utilizar redirecciones para artículos de noticias, se deben implementar de acuerdo con las siguientes prácticas recomendadas:
Si bien los elementos de acción enumerados en esta sección no son tan importantes como los anteriores, recomendamos implementar tantos de ellos como sea posible una vez que se hayan abordado los puntos críticos de la misión enumerados anteriormente.
El<head> El elemento de una página contiene información importante sobre la página que no se muestra en ella. Incluye metadatos que ayudan al robot de Google a identificar el contenido de la página y clasificarlo.
Por regla general, el<head> El elemento debe incluir únicamente las etiquetas más importantes y nada más, para que una publicación se pueda rastrear y renderizar correctamente. Estas incluyen:
Cualquier otra cosa contenida dentro del<head> Es probable que este elemento confunda a los rastreadores web.
Por ejemplo, es común que los principiantes confundan la etiqueta de título con<h1> y colocar este último dentro de la<head> elemento. Como se explicó anteriormente, el<head> El elemento solo puede contener metadatos que no se muestran en la página.
Aunque el título y<h1> debe contener esencialmente la misma información, la primera son metadatos destinados a los rastreadores web y que se mostrarán dentro de los resultados SERP y la pestaña del navegador, mientras que la segunda es información que se mostrará en la página.
El código siguiente muestra cómo colocar el título dentro del<head> elemento.
Fuente: developer.mozilla.org
El uso de elementos de página que faciliten el escaneo del contenido y hagan de la navegación una experiencia sin fricciones para el usuario también impacta en el SEO.
Una página fácil de navegar contendrá estos elementos:
A menos que sea un desarrollador web experimentado, es mejor consultar con un experto sobre la mejor manera de implementar una UX fácil de usar.
Google quiere que los editores muestren anuncios sin interrumpir la experiencia del usuario. Por ello, puede penalizar los sitios web que muestren demasiados anuncios intrusivos. Si bien la experiencia del usuario es una métrica subjetiva, Google cuenta con ciertas directrices y prácticas recomendadas en materia de anuncios.
Algunos de ellos se relacionan con:
Para obtener más información sobre anuncios y ventanas emergentes, consulte nuestro módulo detallado .
Javascript es excelente para crear contenido dinámico e interactivo, pero los rastreadores web pueden tener dificultades para reproducirlo.
Esto se debe a que:
Con los artículos de noticias, es una buena práctica evitar interrupciones como carruseles de artículos relacionados o galerías de imágenes.
Muchos editores que obtienen buenos resultados se preocupan al relanzar o rediseñar su sitio, ya que esto requiere que Google vuelva a rastrearlo. Siga estas prácticas recomendadas para garantizar una transición fluida a la normalidad tras el rediseño o relanzamiento:
Mantén las páginas de tus artículos lo más ligeras posible. Ya vimos cómo evitar el uso de Javascript en los artículos, pero también es recomendable evitar el uso de contenido HTML pesado.
Esto se debe a que, cuando Googlebot rastrea tu página, solo puede descargar un máximo de 15 MB de datos en el primer rastreo. Para la mayoría de las páginas, esto no supone un problema importante, ya que los elementos pesados, como vídeos e imágenes, se referencian por separado dentro del código que Googlebot indexa posteriormente y, por lo tanto, quedan fuera del alcance de este límite de 15 MB.
Sin embargo, esto indica una vez más que cuanto más liviana sea tu página, más fácil será para Googlebot rastrearla e indexarla.
Consejo: Si desea comprobar el tamaño de su página, acceda a la página Herramientas para desarrolladores de su navegador, seleccione la pestaña Red y vuelva a cargar la página. Esto mostrará todas las solicitudes que realizó su navegador para renderizar la página por completo. La primera solicitud de la lista muestra el tamaño de su página en la columna Tamaño. En la mayoría de las páginas de internet, esta cifra suele expresarse en kilobytes.
Los fragmentos de artículos ofrecen a los lectores una vista previa del contenido de la página antes de hacer clic en ella. Google determina el fragmento adecuado para cada artículo rastreando el texto del cuerpo principal, justo debajo del título.
Para evitar que Googlebot incluya fragmentos incorrectos, asegúrese de lo siguiente:
A veces, Googlebot puede no indexar tu imagen o indexar una imagen diferente a la que pretendías incluir en tu artículo. Para evitarlo, sigue estas prácticas recomendadas:
Googlebot utiliza el título de tu artículo para identificarlo e indexarlo correctamente. Sigue estas prácticas recomendadas para asegurarte de que lea el título correctamente:
Veamos dos estudios de casos de sitios que ya han implementado los pasos analizados en este artículo.
Los sitios web de noticias modernos son complejos y complejos, y sería poco realista esperar que cumplan rigurosamente estas directrices. Sin embargo, en esta sección intentamos demostrar cómo seguirlas puede generar resultados predecibles y medibles.
The Manly Observer es un sitio web de noticias hiperlocal dirigido al público de un popular suburbio costero de Sídney, Australia. A continuación se muestra el aspecto de un artículo de noticias típico en el sitio:
A primera vista vemos claros y presentes los siguientes elementos de diseño:
Mirando a continuación el código HTML de la página, podemos ver el uso del marcado semántico.
Este código es fácilmente legible para un humano. Es seguro asumir que un rastreador web podrá leerlo e interpretarlo con la misma facilidad.
El sitio web utiliza el esquema https:// y no tiene anuncios emergentes ni intersticiales que se carguen dentro de la ventana gráfica inicial.
Entrepreneur es una revista popular para emprendedores y empresas. Así es como se ve su página principal.
El sitio web carga rapidísimo y no hay ventanas emergentes ni vídeos en la página de inicio. La mayoría de los anuncios se colocan en artículos de noticias individuales.
Cuando hacemos clic en “ver código fuente”, vemos el siguiente código HTML:
A simple vista, podemos distinguir lo siguiente de este código:
A medida que nos desplazamos hacia abajo, vemos el siguiente elemento de código:
Ya hablamos del uso de schema.org y Opengraph (OG) para imágenes. En resumen, schema.org y OG son tipos de datos estructurados que ayudan a los rastreadores web a identificar elementos específicos del código con mayor facilidad. Vemos schema.org y OG implementados aquí.
Más abajo, también vemos etiquetas de datos estructurados como se muestra a continuación:
Al igual que en nuestro ejemplo anterior, entrepreneur.com también utiliza el esquema https:// en su enlace, no tiene intersticiales ni ventanas emergentes disruptivas y carga rápidamente. Los artículos de noticias siguen un formato predefinido: título, imagen, atribución del autor, fecha y cuerpo del contenido. Esto se traduce en una mejor experiencia de usuario y, por consiguiente, en un mejor SEO técnico.
Después de trabajar con esta lección, debería poder revisar y actualizar las páginas de noticias existentes para optimizar su diseño y disposición para cumplir con las mejores prácticas técnicas de SEO.
Activo ahora
Ver más
