Hay <meta> etiquetas y otras cosas que puede colocar en el <head> de su documento HTML. Qué etiquetas <meta> etc. y mejores prácticas utiliza en su documento HTML para hacerlo más accesible, buscable, optimizado, etc.HTML <head> mejores prácticas
En mi caso:
Content-type, description y keywordsmedia="").<script> etiqueta que vincula a archivos javascript externos.Todas las etiquetas deben seguir los estándares del W3C. El sitio W3C tiene una sección section más técnica y detallada sobre la sección HTML <head>.
Titular como [Nombre de la sección - Nombre del sitio] no tiene nada que ver con SEO. La metaetiqueta de "palabras clave" es casi inútil. –
¿Qué es media = ""? –
@Marco Demaio: para especificar cómo se presentará un documento en diferentes medios: en la pantalla (lo usarás principalmente), en papel (versión impresa), con un sintetizador de voz, con un dispositivo braille, etc. Más información aquí: http://www.w3.org/TR/CSS2/media.html – andyk
Título, etiquetas meta para palabras clave, tipo de contenido (si no está establecido explícitamente por la web servidor) y cualquier CSS que se aplique a la página.
Al declarar el CSS por adelantado, el navegador puede diseñar la página de manera más eficiente (consulte http://developer.yahoo.com/performance/rules.html#css_top).
No vi esto mencionado: la etiqueta <base>, si se especifica, debe ser el primer elemento en <head>. (Se supone que el URI base del documento es . antes de/si no se especifica).
Um. ¿Por qué demonios alguien menos votó esto? Es absolutamente * correcto *. – eyelidlessness
Querrá poner elementos SCRIPT al final de la página antes del cierre del elemento BODY. Ver http://developer.yahoo.com/performance/rules.html#js_bottom para más detalles.
Hay una pregunta relacionada here que puede ayudar a aclarar el orden de las etiquetas.
Generalmente mis páginas incluyen los siguientes:
<!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 el estricto prestación (n peculiaridades modo) por el navegador. Es posible que desee utilizar XHTML en su lugar, siempre que haya uno allí. Añado Copyright y Autor exclusivamente porque diseño y creo páginas para otras compañías. La descripción es para SEO, y Language es para el navegador (si es compatible).
No creo que marque una gran diferencia qué etiqueta meta es lo primero, o si el título debería estar arriba. Lo que cuenta en la mayoría de los casos es que existe en la página y tiene el contenido correcto.
En mi humilde opinión, las dos etiquetas secundarias más importantes de <head> son <title> y la etiqueta meta Tipo de contenido. Los motores de búsqueda miran activamente al <title>. Mientras que las otras etiquetas meta a menudo se ignoran. Como usuario web multilingüe, no puedo enfatizar más la importancia de agregar la etiqueta Content Type 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 escamosa. El resultado final es que varios caracteres no se procesan correctamente para el usuario o, a veces, ninguno en el caso de japonés o chino.
He aquí un fragmento de una parte del código de cabecera de un proyecto actual de la mina:
<!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>
Descripción es lo que aparece en su anuncio en la mayoría de los motores de búsqueda: sin él, los motores de búsqueda generalmente adivinan un fragmento dentro de la página; Es mejor no dejar esto al azar. La etiqueta META de Palabras clave también sigue siendo utilizada por ciertos motores de búsqueda, aunque solo tiene un peso marginal. Sin embargo, también me parece útil rellenar, solo como un recordatorio sobre qué palabras clave son las más importantes, a qué palabras clave se debe enfatizar dentro del contenido de la página. – CJM
Yo añadiría una nota importante: si está utilizando IE's meta X-UA-Compatible tag to switch rendering modes para Interet Explorer, debe insertarlo como el primer elemento de CABEZA:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>Page title</title>
...etc
</head>
por lo que yo sé, la mayoría de los motores de búsqueda ignorar cualquier "palabras clave" o "descripción" meta tags, prefiriendo en lugar de leer el contenido del documento.
Sin embargo, obtener el título de la página correctamente es de extrema importancia.
A menudo ignoran las palabras clave, pero no tanta descripción. – kangax
La última vez que verifiqué las palabras clave y la descripción fueron completamente ignoradas por Google. Esto puede haber cambiado, pero parece poco probable. El problema básico era que no agregaban nada al contenido de la página y que los spammers los usaban con frecuencia para cargar palabras clave o descripciones inexactas, lo que reducía la precisión de las búsquedas. Entonces Google los ignoró. – MarkR
Todavía usan descripción (pero no palabras clave, por supuesto) - http://www.youtube.com/watch?v=jK7IPbnmvVU&feature=player_embedded – kangax
Además de las respuestas anteriores, uso the Dublin Core initiative meta-tags.
Son muy útiles para los contenidos/documentos reales etc.
<meta name="DC.abstract" content="Document abstract" />
<meta name="DC.audience" content="Target audience" />
etc.
Además del tipo de documento de costumbre, título, etc., voy a tratar de ofrecerle algunas cosas que he aprendido y implementado que podría ser de ayuda para usted.
En primer lugar, recuerde que el título, para obtener la 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 esto título de la página ...
Stack Overflow - HTML head best practices
convierte desbordamiento de pila ... (mascado para ahorrar espacio en la pestaña de lista de la barra/marcador)
Ahora bien, si usted tenía 5 pestañas abiertas Stackoverflow (como hago a menudo: P) entonces, ¿cómo sabría 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 importará. Lo mismo con Javascript, cualquier dependencia en otros sitios externos debe estar permitida. Puse el mío en la cabeza y no he notado una disminución en el rendimiento. Los puse allí porque a mí me parece más ordenado y lógico. Aunque algunas otras personas recomendarán colocar los enlaces <script src=""> justo antes del </body> para que el navegador no se bloquee temporalmente ... Solo use lo que funcione mejor para su sitio.
también una etiqueta meta de 'rating' con el de dejar que el software 'general' Red Filtrado sabe que su sitio es seguro para los espectadores de todas las edades (siempre y cuando lo es, por supuesto!)
También uso ..
<link rel="start" href="/" title="Home" />
dejar que el navegador sabe dónde está el hogar de mi sitio web es. Y para cualquier sistema de captación previa del navegador, aunque creo que aún deben ser implementados por los navegadores sin asistencia de complementos.
Considere también el 'siguiente' y 'anterior' <link rel=""> si sus páginas están en una secuencia de clases.
Me gustan los enlaces siguiente, anterior y de inicio. Hay una barra de herramientas para Firefox que hace uso de ellos. – TRiG
Creo que Opera usa las metaetiquetas siguientes y anteriores. –
¿Sus usuarios un favor y hacer su interruptor de motor de IE a Chrome uno cuando está instalado Chrome Frame :)
<meta http-equiv="X-UA-Compatible" content="chrome=1">
En primer lugar, asegúrese de que la <!DOCTYPE es el primer elemento verídico del documento, es decir, sin espacio, pestaña 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 lo sé, ¿verdad? ;) –
siguientes sugerencias Andyk, Yo también siempre añadir en la sección meta: esto desactiva la barra de herramientas de imagen IE tonta del que aparece al pasar el cursor sobre las imágenes más grandes que 200x200 px. –