Orden de metaetiquetas HTML

16

Una empresa SEO sugirió que cambiar el orden de los meta tags HTML de manera que <title>y <meta name="description">son los dos primeros. Dicen que esto es para garantizar que los motores de búsqueda puedan utilizar estas dos etiquetas. He tenido la impresión de que el orden de las etiquetas dentro del encabezado del documento no es significativo. ¿Me he equivocado? ¿Existen realmente los motores que asumen que las dos primeras etiquetas son siempre buscar titley descriptiony dejan de buscar para ellos si no lo son?

Kaivosukeltaja
fuente

Respuestas:

15

Estás en lo correcto. El orden de esas etiquetas no es importante para el SEO. Solo necesitan estar presentes. Quien dijo que obviamente no tiene idea (y, por supuesto, tiene un negocio de SEO. Suspiro).

John Conde
fuente
¿Puede proporcionar una fuente o un estudio de caso?
s_hewitt
3
Solo opinión basada en la experiencia. Aquí hay una discusión de SearchEngineWatch sobre el tema: el orden no importa: forums.searchenginewatch.com/showthread.php?t=16452
Ciaran
7

Si bien para fines de SEO, puede ser cierto que el orden no es significativo, no es cierto cuando se consideran otras cosas como la seguridad, la visualización de contenido (caracteres) o la velocidad de carga. Es una buena idea ordenar el encabezado de su página más o menos así (suponiendo HTML5 para la sintaxis):

<head>

Hasta ahora en el documento, no debería haber utilizado ningún carácter que no sea ASCII, por lo que la codificación de caracteres aún no es un problema. Pero la probabilidad de usar caracteres no ASCII aumenta notablemente una vez que abre esa etiqueta de encabezado. En consecuencia (y suponiendo que no está declarando su codificación de caracteres mediante programación o en el nivel del servidor), debe hacer que la siguiente declaración sea su declaración de codificación de caracteres. Esto también satisface a los analizadores / buscadores / agentes que estarían olfateando las declaraciones de codificación de caracteres:

  <meta charset="utf-8">

Los siguientes dos ( X-UA-Compatibley viewport) son recomendados por la gente de Bootstrap (tan recientemente como v3.3.4). Si bien estoy casi seguro de que estas recomendaciones se basan en el rendimiento, la mayor parte de lo que diría sería especulativo:

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

Si está pensando en el diseño / desarrollo independiente del dispositivo (incluidos los agentes de usuario más pequeños que no sean de escritorio), debe incluir lo siguiente:

  <meta name="viewport" content="width=device-width, initial-scale=1">

Finalmente, el título:

  <title>Ingenious Page Title</title>

A continuación, ofrece el CSS tan pronto como sea posible después del título (sin 'luz del día' entre ellos):

  <link rel="stylesheet" href="stylesheet-1.css">
  <link rel="stylesheet" href="stylesheet-2.css">

Si está utilizando estilos de nivel de página, irían aquí. Esto se debe en gran parte a la naturaleza 'en cascada' de CSS: a saber, la última declaración de estilo de niveles idénticos de especificidad (como dos declaraciones que apuntan a un párrafop ). Para facilitar la anulación de estilos externos (es decir, sin utilizar una mayor especificidad, o !important), debe colocar estilos de nivel de página después de los estilos externos <link>. Además, generalmente no es aconsejable usar la directiva @import en estilos de nivel de página, ya que impedirá la descarga simultánea de otros activos de estilo:

  <style>body{color:black;}</style>

Este es el punto en el que parece más apropiado poner metaetiquetas, favicons y otros cruft. Es discutible que los favicons o activos similares (por ejemplo, imágenes de aplicaciones de iOS) se carguen antes de la mayoría de las metaetiquetas, ya que la descarga de esos activos comienza marginalmente antes.

  <link rel="shortcut icon" href="favicon.ico">
  <link rel="apple-touch-icon" href="apple-icon.png">
  <meta name="description" content="Some information that is descriptive of the content">
  <meta name="generator" content="Microsoft FrontPage 2002">

Debido a que bloquea / retrasa la representación, si tiene la intención de requerir scripts, cárguelos tan tarde como sea razonable. Si deben estar en el head, puede cargarlos antes del cierre de head( </head>). Si puede cargarlos más tarde, colóquelos antes del cierre de la bodyetiqueta (</body> ).

  <script src="script-1.js"></script>
  <script src="script-2.js"></script>
</head>

En la mayoría de los casos, parece poco importante prestar mucha atención al orden de las metaetiquetas con fines de SEO, dado que los robots de indexación (es decir, las arañas de los motores de búsqueda) consumirán toda la página. De lo contrario, ¿cómo indexarían el contenido de una página o actualizarían ese índice más adelante?

Es notable para mí que, por todo lo que creemos que sabemos, y todas las recomendaciones que encontramos en la web (incluso de lugares como Google y Bing Webmaster Tools, etc.), sitios como Amazon, Google y otras personas que claramente se preocupan sobre tales ganancias de rendimiento minúsculas no siguen estas reglas.

David Eldridge
fuente
Mientras X-UA-Compatible, viewporty los íconos táctiles de Apple todavía eran (relativamente) nuevos en 2010, todos estaban en uso. HTML5 solo afectó la longitud de la declaración del juego de caracteres. CSS, JS y la canalización de imágenes eran una preocupación en aquel entonces, así como la (re) representación de páginas posteriores a la aplicación de CSS y JS. A pesar de eso, no pude encontrar esta información en un solo lugar (fuera de los headdocumentos html), y después de tropezar con esta pregunta, me pareció bueno hacerlo aquí.
David Eldridge
Buena respuesta @DavidEldridge. ¿Pero le importaría actualizar su respuesta para incluir application/ld+jsonscripts para datos estructurados? Para fines de velocidad. ¿Dónde sería mejor ponerlo? ¿Deberíamos tratarlo como JavaScriptarchivos externos ?
Brendan Vogt
2

Desde el punto de vista de la funcionalidad, lo siguiente de Bootstrap parece ser el mejor orden de las metaetiquetas:

    1) <meta charset="utf-8">
    2) <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    3) <title></title>
    4) <meta name="description" content="">
    5) <meta name="viewport" content="width=device-width, initial-scale=1">

Según la gente de Google, lo que importa para SEO es

  1. ser amigable para dispositivos móviles
  2. título y descripción
  3. contenido único y valioso

Si su sitio no es compatible con dispositivos móviles, ni siquiera miran 2) o 3). Si es compatible con dispositivos móviles, pueden usar el título y la descripción cuando incluyan su sitio. No hay garantías sobre eso. Pueden decidir crear su propia descripción en función de lo que encuentren en su sitio.

Si su contenido es plagiado o repetitivo y si intenta llenarlo de palabras clave o usar otras técnicas de 'BlackHat', esas cosas lo lastimarán y posiblemente lo prohibirán.

Michael Moriarty
fuente