HTML < head > mejores prácticas [cerrado]

StackOverflow https://stackoverflow.com/questions/275631

  •  07-07-2019
  •  | 
  •  

Pregunta

Hay etiquetas < meta > y otras cosas que puede colocar en el < head > de su documento HTML. ¿Qué < meta > etiquetas, etc. y las mejores prácticas utiliza en su documento HTML para hacerlo más accesible, buscable, optimizado, etc.

¿Fue útil?

Solución

En mi caso:

  • Título (debe hacer [Nombre de la sección - Nombre del sitio] para un mejor SEO)
  • Metaetiqueta para Tipo de contenido , descripción y keywords
  • Enlace a la (s) hoja (s) de estilo (no olvide especificar media = " " ).
    • Etiqueta
  • < script > que enlaza con archivos javascript externos.

Todas las etiquetas deben seguir el estándar del W3C. El sitio W3C tiene una sección más técnica y detallada sobre la sección HTML < head > .

Otros consejos

Haga un favor a sus usuarios y haga que su motor IE cambie a Chrome uno cuando Chrome Frame está instalado :) 

<meta http-equiv="X-UA-Compatible" content="chrome=1">

Deberá colocar elementos SCRIPT al final de la página antes del cierre del elemento BODY. Consulte http://developer.yahoo.com/performance/rules.html#js_bottom para más detalles.

Además del doctype, título, etc. habituales, intentaré proporcionarle algunas cosas que he aprendido e implementado que podrían serle de ayuda.

En primer lugar, recuerde que el título, para una mejor experiencia de usuario, debe tener primero la subsección más relevante. Esto se debe a que generalmente se muestra en la barra de título / lista de pestañas / nombre de marcador. Considere el título de esta página ... 

Stack Overflow - HTML head best practices

se convierte en Desbordamiento de pila ... (masticado para ahorrar espacio en la barra de pestañas / lista de marcadores)

Ahora, si tuviera 5 pestañas de Stackoverflow abiertas (como a menudo hago: P), ¿cómo podría saber el usuario cuál es cuál?

También tenga en cuenta con CSS la naturaleza en cascada ... Por lo tanto, el orden de estos será importante. Lo mismo con Javascript, se debe permitir cualquier dependencia en otros sitios externos. Puse el mío en la cabeza y no noté una disminución en el rendimiento. Los puse allí porque me parece más ordenado y lógico. Aunque otras personas recomendarán colocar los enlaces < script src = " " > justo antes de < / body > para que el navegador no se bloquee temporalmente ... Solo use lo que funcione mejor para su sitio.

También una metaetiqueta de 'calificación' con 'general' que el software de filtrado de red sepa que su sitio es seguro para los espectadores de todas las edades (¡siempre que lo sea, por supuesto!)

Yo también uso .. 

<link rel="start" href="/" title="Home" />

para que el navegador sepa dónde está la página de inicio de mi sitio. Y para cualquier sistema de captación previa de navegadores, aunque creo que estos aún no se han implementado por los navegadores sin la ayuda de complementos.

Considere también el 'siguiente' y el 'anterior' < link rel = " " > si sus páginas están en una secuencia de tipos.

Primero, asegúrese de que < ! DOCTYPE es el primer elemento del documento, es decir, sin espacio, tabulación o marcador BOM dañado. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!-- declare all page rendering and programmatic related tags -->
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!-- Care about IE ? -->
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <!-- globalise scripting and styling content language  -->
    <meta name="Content-Type-Script" content="text/javascript" />
    <meta name="Content-Type-Style" content="text/css" />
    <!-- title tag is MANDATORY -->
    <title>Short and relevant, about 64 characters/spaces</title>
    <!-- declare all CACHE controll -->
    <meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
    <meta name="revisit-after" content="7 days" />

    <!-- declare all content description tags -->
    <meta http-equiv="PICS-Label" content='(PICS-1.1 "http://www.gcf.org/v2.5" labels on "1994.11.05T08:15-0500" until "1995.12.31T23:59-0000" for "http://w3.org/PICS/Overview.html" ratings (suds 0.5 density 0 color/hue 1))'>
    <!-- language specific keywords -->
    <meta name="keywords" lang="en-us" content="vacation, Greece, sunshine" />
    <!-- For french example -->
    <meta name="keywords" lang="fr" content="vacances, Grèce, soleil" />
    <meta name="description" content="about 255 characters/spaces WORDS relevant to the content of the actual page" />
    <meta name="Abstract" content="about 96 characters/spaces PARAGRAPH describing the actual page content within your site" />

    <!-- declare all situationnal and external relativity related tags -->
    <link rel="DC.identifier" type="text/plain" href="http://www.ietf.org/rfc/rfc1866.txt" />
    <link rel="start" href="/" title="Home" />
    <link rel="prev" href="../" title="Parent section" />

    <!-- declare all page rendering cascading style sheets in order of incidence -->
    <link rel="stylesheet" type="text/css" href="globaly-used.css" />
    <link rel="stylesheet" type="text/css" href="specificly-used.css" />
    <!-- declare all page rendering specific cascading style i.e. IE only, hacks etc -->
    <link rel="stylesheet" type="text/css" href="more-specificly-used.css" />
    <link rel="stylesheet" type="text/css" href="i-love-ie.css" />

    <!-- not relevent to subject, declare all javascripts AFTER css linking -->

</head>
<body>
</body>
</html>

No vi esto mencionado: la etiqueta < base > , si se especifica, debería ser el primer elemento en < head > . (Se supone que el URI base del documento es . antes / si no se especifica).

En mi humilde opinión, las dos etiquetas secundarias más importantes de < head > son < title > y la metaetiqueta Content Type. Los motores de búsqueda miran activamente < title > . Mientras que las otras metaetiquetas a menudo se ignoran. Como usuario web multilingüe, no puedo enfatizar más la importancia de agregar la etiqueta de Tipo de contenido porque sin ella, el navegador necesita detectar automáticamente el conjunto de caracteres de la página web y esta operación a menudo es escasa. El resultado termina siendo que varios caracteres no se representan correctamente para el usuario o, a veces, ninguno en absoluto en el caso de japonés o chino.

Aquí hay un fragmento de algunos de los códigos de encabezado de un proyecto mío actual: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Reports Blah Blah</title>
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
...
</head>

Hay una pregunta relacionada aquí que puede ayudar a agregar algo de luz sobre el orden de las etiquetas.

Generalmente mis páginas incluyen lo siguiente: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>...</title>
    <meta name="Description" ...>
    <meta name="Keywords" ...>
    <meta name="Copyright" ...>
    <meta name="Author" ...>
    <meta name="Language" ...>
    <style type="text/css" ...>

DocType es importante para imponer una representación estricta (modo sin peculiaridades) por parte del navegador. Es posible que desee utilizar XHTML en su lugar, siempre que haya uno allí. Agrego Copyright y Autor simplemente porque diseño y creo las páginas para otras compañías. La descripción es para SEO, y el lenguaje es para el navegador (si lo admite).

No creo que haya mucha diferencia qué metaetiqueta viene primero o si el título debe estar arriba. Lo que cuenta en la mayoría de los casos es que existe en la página y tiene el contenido correcto.

Hasta donde yo sé, la mayoría de los motores de búsqueda ignoran cualquier " palabras clave " o "descripción" metaetiquetas, en lugar de preferir leer el contenido del documento.

Sin embargo, obtener el título correcto de la página es de suma importancia.

Título, metaetiquetas para palabras clave, tipo de contenido (si el servidor web no lo establece explícitamente) y cualquier CSS que se aplique a la página.

Declarar el CSS por adelantado permite al navegador diseñar la página de manera más eficiente (consulte http://developer.yahoo.com/performance/rules.html#css_top ).

Agregaría una nota importante: si está utilizando etiqueta compatible con meta X-UA de IE para cambiar los modos de representación para Interet Explorer, debe insertarlo como el primer elemento en HEAD: 

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=7" />
  <title>Page title</title>
  ...etc
</head>

Además de las respuestas anteriores, uso las metaetiquetas de la iniciativa Dublin Core .

Son muy útiles para contenido / documentos reales, etc. 

<meta name="DC.abstract" content="Document abstract" />
<meta name="DC.audience" content="Target audience" />

etc.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top