Tácticas de crecimiento de editores para la temporada electoral | SEMINARIO WEB
Tácticas de crecimiento de editores para la temporada electoral | SEMINARIO WEB
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
Responda la prueba
Tomar cuestionario del módulo actual
Materiales
Plantillas listas para usar
Recursos
Informes y recursos
2.1.1 ¿Qué es diseño y maquetación?
El diseño y el diseño de su sitio determinan cómo se muestra al usuario final. Esto es importante porque, en última instancia, Google está impulsado por una filosofía que prioriza al usuario. Las páginas web que satisfacen las necesidades del usuario en primer lugar, de la forma más rápida y sencilla posible son recompensadas con clasificaciones SERP más altas.
El diseño y el diseño de su sitio también determinan la facilidad con la que los rastreadores web, como el bot de Google, lo rastrean e indexan. Un diseño y diseño simple y optimizado significa un rastreo rápido y fácil, lo que a su vez se traduce en mejores clasificaciones.
Entonces, ¿qué impide que los editores implementen las mejores prácticas de diseño y maquetación? Muy a menudo, los editores se enfrentan a estos puntos débiles:
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 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 una ciudad de unos 40.000 habitantes del medio oeste estadounidense supere en ranking al mayor sitio web de noticias musicales del mundo? Intrigados, decidimos investigar un poco más.
Primero revisamos la página de NME sobre Charlie Puth.
De inmediato, lo primero que notamos es el video emergente que intenta cargarse en la esquina inferior derecha de la pantalla. Obviamente no está haciendo un muy buen trabajo de carga. El video búfer también oculta parte del titular de las noticias y su cuerpo.
A continuación, notamos que la ventana escolar inicial está ocupada principalmente por cosas que no son relevantes para la noticia. Hay un gran anuncio de banner que cubre aproximadamente la mitad de la página y, por supuesto, está el video.
De hecho, desplazándonos por la página, encontramos más videos, más imágenes grandes y ricas, más anuncios emergentes y muchos hipervínculos. Dado lo rico en los medios de comunicación, la página, como era de esperar, tardó bastante en cargarse.
Luego inspeccionamos el Illini diario y esto es lo que encontramos.
La página está ordenada, limpia y despejada. Tiene su parte de anuncios y un gran botón de donación en la parte superior, pero no hay videos ni ventanas emergentes que cubran la ventana gráfica u obstruyan el titular de las noticias. Podemos ver el titular de inmediato, y es muy probable que lo mismo se aplique al rastreador web de Google.
En general, la página es ligera, minimalista y de rayo rápido para cargar.
Decidimos mirar debajo del capó un poco más en el código subyacente. Al hacer clic derecho en la página y seleccionar la fuente de vista (mientras usa Chrome), podemos ver el código de la página.
Esto es lo que vimos para la página NME:
Dos cosas llamaron nuestra atención aquí:
Esto no es lo mejor para una página por dos razones:
Cuando miramos el código para la página diaria de Illini, por otro lado, vimos esto:
Este es un código HTML muy simple. Además, no hay guiones que se ejecutan dentro del<head> sección.
¿Cómo se suma todo esto al Illini diario que superó a NME?
Probablemente hay una serie de factores en el trabajo aquí, y uno de ellos es el diseño y el diseño. La página diaria de Illini despliega ciertas técnicas de diseño y diseño que incluso los editores pequeños pueden replicarse fácilmente para aumentar su estrategia general de SEO.
Estos incluyen el uso de código HTML limpio y simple, evitar scripts en la sección del encabezado, mantener la página ligera y rápida para cargar, y no depender demasiado de las ventanas emergentes y los anuncios intersticiales.
La siguiente guía profundiza en cada uno de estos en detalle, al tiempo que explica varias otras técnicas que puede implementar para mejorar significativamente su clasificación SERP.
La semántica se relaciona con el significado de las palabras. Las etiquetas HTML semánticas son aquellas que claramente definen sus significados tanto para el lector como para un 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 en el artículo.
Por el contrario, cuando usamos una etiqueta como<div> , su significado no es inmediatamente aparente. En html<div> significa División, y todo lo que implica es que una nueva sección del Código ha comenzado, sin necesariamente revelar ninguna información sobre el contenido de esta sección.
Los rastreadores web como Googlebot se construyen utilizando inteligencia artificial y algoritmos de aprendizaje automático que intentan simular el funcionamiento del cerebro humano. Esto significa que dan sentido al texto de la misma manera que 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 las dos piezas del código HTML a continuación:
Fuente: https://www.pluralsight.com/guides/semantic-html
Esta página usa el<div> Etiqueta para todo, desde el encabezado hasta el contenido principal y el pie de página. No es evidente de inmediato leyendo las etiquetas cuál es su contenido.
Por el contrario, la siguiente página usa marcado semántico. El encabezado se coloca dentro del<header> etiqueta, el pie de página dentro del<footer> etiqueta, y el cuerpo principal del artículo va dentro del<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 una mejor oportunidad de clasificar más alto que la anterior, todas las demás cosas son iguales.
Para ver si su página usa marcado semántico, simplemente haga clic derecho en la página si está usando Google Chrome y haga clic en Inspect. Podrá 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 simple: siempre use un marcado semántico para marcar información importante sobre el diseño y el diseño de su artículo. Esto incluye la siguiente información del artículo:
Asegúrese de que el diseño de su página esté bien ordenado para mejorar el rastreo
Está diseñando su sitio para ser leído por humanos y rastreadores web y, como tal, su diseño y diseño deben reflejar este hecho.
A continuación hay algunos consejos para ayudarlo a lograr resultados medibles para su sitio web.
Puede usar HTML, CSS, JavaScript o cualquier otro lenguaje frontend para crear páginas ricas e interactivas. Sin embargo, recuerde que cuanto más avanzado sea el lenguaje, mayor es su complejidad y más posibilidades es que un rastreador web le resulte difícil leer, interpretar y compilar.
Cualquier cosa codificada en HTML puede no ser la más bonita de ver, pero se cargará más rápido y estará más optimizado para los motores de búsqueda por la simple razón de que los motores de búsqueda pueden leerlo y comprenderlo más rápido.
Piense en HTML simple como el esqueleto Bare Bones de su página web. Puede agregar CSS y JavaScript para desarrollarlo y hacer que se vea estéticamente agradable y dinámico, pero sería mejor mantener el contenido más importante dentro del esqueleto en lugar de colocarlo en la carne.
Entonces, ¿cómo implementamos HTML simple? Una forma simple de hacerlo es colocar el cuerpo principal de su contenido dentro de<article> Etiquetas HTML.
De esta manera, cuando los rastreadores web se encuentran<article> Etiqueta, saben de inmediato que lo que sigue es el contenido más importante en su página: el artículo de noticias. Esto ayuda al motor de búsqueda a comprender que el contenido envuelto dentro de esta etiqueta debe asignarse un mayor peso.
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 estoy usando un CMS como WordPress, ¿dónde inserto estas etiquetas?
Cómo hacer esto: si está construyendo un sitio web personalizado utilizando HTML, puede verificar el código fuente para asegurarse de que esté usando HTML simple, especialmente en áreas críticas. Aconsejaríamos hablar con más detalle con un desarrollador para asegurarse de que no por accidente no tiene la funcionalidad de los isquiotibiales.
Si está usando WordPress, consulte esta guía . También puede encontrar esta guía sobre cómo insertar HTML en publicaciones y páginas una fuente de referencia útil.
Estas instrucciones son para WordPress, ya que WordPress sigue siendo el CMS más popular para los editores. Si está utilizando un CMS diferente como WIX, consulte la página de soporte o documentación para su CMS.
Si tiene acceso a un equipo de desarrolladores web, es mejor que lo hagan, ya que editar el código HTML puede llevar mucho tiempo.
Pruebe para asegurarse de que su contenido aparezca correctamente en todos los navegadores, dispositivos y tamaños. Este es más obvio pero a menudo se pasa por alto. Si su contenido no aparece de la manera que lo desea en todos los navegadores y dispositivos, afectará la experiencia del usuario y, a la larga, su clasificación SERP.
Cómo hacer esto: para probar el contenido en todas las plataformas, necesita abrir su página en diferentes dispositivos y en diferentes navegadores para ver cómo se está representando.
Como mínimo, debe probar lo siguiente:
Los marcados HTML ayudan a resaltar los diferentes elementos de su página. Los datos estructurados ayudan a los motores de búsqueda a leer lo que hay dentro de los diferentes elementos de su página y comprender mejor su contenido.
Los datos estructurados son simplemente una serie de instrucciones escritas en un lenguaje simple, como JSON-LD, que se puede insertar dentro del código HTML existente de su página web. Piense en ello como una meta descripción, pero para piezas individuales de contenido en su página.
En el siguiente ejemplo, los datos estructurados ayudan a Google a identificar cinco atributos sobre una página de DBPedia en John Lennon:
Fuente: https://json-ld.org/
Como puede ver, el código está en un lenguaje simple que es fácil de entender tanto para un lector humano como para un rastreador web.
Aquí hay otro ejemplo que muestra cómo los datos estructurados pueden caber directamente en el código HTML existente de su página web. Las instrucciones de datos estructuradas se destacan en verde.
Fuente: desarrolladores.google.com
En este ejemplo, los datos estructurados le dicen a GoogleBot que esta es una página de receta sobre la forma de pastel de café alguien llamado Mary Stone.
El uso de datos estructurados en el diseño de su sitio web ofrece resultados medibles. Por ejemplo, el uso de datos estructurados puede aumentar la tasa de clics (CTR) de un sitio web hasta en un 30%.
El uso de datos estructurados también ayuda a su página a clasificarse mejor en los carruseles de Google, fragmentos destacados, videos y características del panel de conocimiento.
Para Google News SEO, es importante incluir los siguientes elementos al crear datos estructurados para proporcionar un valor adicional:
Cómo hacer esto: puede agregar datos/esquema estructurados a su contenido manualmente o utilizando un complemento para su CMS en particular.
Todos los elementos de su artículo de noticias deben organizarse en un orden específico para permitir un rastreo más rápido y más fácil. El orden es el siguiente:
La experiencia de la página es una medida de cómo los usuarios experimentan su página. Google tiene un conjunto de parámetros para cuantificar la experiencia de la página. Hemos dedicado un módulo completo a los factores de experiencia de la página , por lo que solo veremos brevemente cada uno aquí.
Cómo hacer esto: puede probar la experiencia de la página tanto manualmente como mediante el uso de complementos o aplicaciones de terceros. Por ejemplo, Page Speed Insights es una herramienta útil que lo ayuda a analizar el rendimiento de su sitio en función de CWV y otros parámetros y asigna una puntuación basada en su análisis. También prueba la capacidad de respuesta móvil y de escritorio.
Los editores de noticias no deben publicar múltiples artículos de noticias bajo la misma URL. Esto obstruirá a Google para indexarlos. Cada artículo de noticias debe tener su propia URL única.
Además, estas URL deben ser permanentes. Lo que significa que la misma noticia debe mostrarse en una URL en particular. Si la noticia asociada con una URL particular cambia con frecuencia, Google no podrá rastrearla e indexarla. Sin embargo, los editores deben actualizar la noticia tan a menudo como sea necesario.
Si las redireccionamientos deben usarse para artículos de noticias, deben implementarse de acuerdo con las siguientes mejores prácticas:
Si bien los elementos de acción enumerados en esta sección no son tan importantes como los anteriores, aún recomendamos implementar la mayor cantidad posible una vez que se hayan abordado los puntos críticos de la misión mencionados anteriormente.
El<head> El elemento de una página contiene información importante sobre la página que realmente no se muestra en la página. Lo que incluye son metadatos que ayuda a GoogleBot a identificar el contenido de la página y clasificarlo.
Como regla, el<head> El elemento debe incluir solo las etiquetas más importantes y nada más, por lo que una publicación se puede rastrear y renderizar correctamente. Estos incluyen:
Cualquier otra cosa contenida en el<head> Es probable que el elemento confunda 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: desarrollador.mozilla.org
El uso de elementos de página que facilitan escanear contenido y facilitar la navegación una experiencia sin fricción para el usuario también afecta 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 un UX fácil de usar.
Google quiere que los editores muestren anuncios sin interrumpir la experiencia del usuario. Por esta razón, puede penalizar los sitios web que muestran demasiados anuncios intrusivos. Si bien la experiencia del usuario es una métrica subjetiva, Google tiene ciertas pautas y mejores prácticas cuando se trata 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 experimentar dificultad para representarlo.
Esto es porque:
Con 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 se preocupan bien al relanzar/rediseñar su sitio, ya que requiere que Google vuelva a tomar el sitio. Siga estas mejores prácticas para garantizar una transición suave a la normalidad después del rediseño/relanzamiento:
Mantenga sus páginas de artículo lo más ligeras posible. Ya hemos buscado evitar JavaScript en artículos, pero también es una buena práctica evitar el uso de contenido HTML pesado.
Esto se debe a que cuando Googlebot rastrea su página, solo puede descargar un máximo de 15 MB de datos de página en el primer rastreo. Para la mayoría de las páginas, este no es un problema importante, ya que los elementos de peso pesado, como videos e imágenes, se hacen referencia por separado dentro del código que GoogleBot indexa más adelante y, por lo tanto, están más allá del alcance de este límite de 15 MB.
Sin embargo, esto una vez más señala el hecho de que cuanto más ligero sea su página, más fácil será para Googlebot rastrearlo e indexarla.
Consejo: Si desea verificar el tamaño de su página, vaya a la página de herramientas de desarrollador de su navegador, cambie a la pestaña de red y luego vuelva a cargar la página. Esto muestra todas las solicitudes que su navegador realizó para representar completamente la página. La primera solicitud en esta lista muestra el tamaño de su página en la columna de tamaño. Para la mayoría de las páginas en Internet, esta cifra generalmente se encuentra en kilobytes.
Los fragmentos del artículo brindan a los lectores una vista previa del contenido en la página antes de que hagan clic en ella. Google determina el fragmento para acompañar cada artículo arrastrando el texto en el cuerpo principal del artículo justo debajo del título.
Para evitar la posibilidad de Googlebot, incluidos los fragmentos incorrectos, asegúrese de que:
A veces, GoogleBot puede no indexar su imagen o indexar una imagen diferente a la que pretendía presentar con su artículo. Para evitar esto, siga estas mejores prácticas:
GoogleBot usa el título de su artículo para identificarlo e indexar correctamente. Use estas mejores prácticas siguientes para asegurarse de que lea su título con precisión:
Veamos dos estudios de casos de sitios que ya han implementado los pasos discutidos en este artículo.
Los sitios web de noticias modernos son complejos y ricos, y sería poco realista esperar que se adhieran a estas pautas rigurosamente. Sin embargo, en esta sección estamos tratando de demostrar cómo seguir las pautas puede dar lugar a resultados predecibles y medibles.
The Manly Observer es un sitio web de noticias hiperlocal que atiende al público en un popular suburbio del lado de la playa de Sydney, Australia. A continuación se muestra un artículo de noticias típico en el sitio:
Vemos los siguientes elementos de diseño claros y presentes a primera vista:
Mirando a continuación el código HTML de la página, podemos ver el uso de un marcado semántico.
Este es un código que es fácilmente legible por un humano. Es seguro suponer que un rastreador web podrá leer e interpretar este código con igual facilidad.
El sitio web utiliza el esquema https: // y no tiene anuncios emergentes o cargas intersticiales dentro de la ventana gráfica inicial.
Entrepreneur es una revista popular para empresarios y empresas. Así es como aparece su página de inicio.
El sitio web es rápido para cargar y no hay anuncios emergentes o videos en la página de inicio. La mayor parte de la colocación de anuncios ocurre en artículos de noticias individuales.
Cuando hacemos clic en "Ver fuente", vemos el siguiente código HTML:
De un vistazo, podemos distinguir lo siguiente de este código:
A medida que desplazamos hacia abajo, vemos el siguiente elemento de código:
Habíamos discutido el uso de Schema.org y OpenGraph (OG) para imágenes. Para recapitular, Schema.org y OG son tipos de datos estructurados que ayudan a los rastreadores web a identificar elementos específicos del código más fácilmente. Vemos Schema.org y OG implementados aquí.
Más abajo, también vemos etiquetas de datos estructuradas como se muestra a continuación:
Al igual que con nuestro ejemplo anterior, EntrepreneUr.com también usa el esquema https: // en su enlace, no tiene intersticiales o ventanas emergentes disruptivas, y es rápido de cargar. Los artículos de noticias siguen un formato establecido de título, imagen, atribución de autor, fecha y cuerpo principal de contenido. Esto da como resultado una mejor experiencia de página y, por lo tanto, mejoró el SEO técnico.
Después de trabajar en esta lección, debería poder revisar y actualizar las páginas de noticias existentes para optimizar su diseño y diseño para adherirse a las mejores prácticas técnicas de SEO.
Activo ahora
Ver más
