2012-06-02 7 views
12

¿Qué más debería incluir dentro de la etiqueta de la cabeza en el fin de apoyar el mayor número de navegadores, HTML5, motores de búsqueda, redes sociales, etc.Lo que todo debo añadir en la etiqueta de la cabeza

<title>My Site</title> 

<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="description" content="My Site is cool"> 
<meta name="viewport" content="width=device-width"> 

<meta property="og:title" content="My Site"/> 
<meta property="og:type" content="website"/> 
<meta property="og:image" content="assests/icon_big.png"/> 
<meta property="og:url" content="http://url.com"/> 
<meta property="og:site_name" content="My Site"/> 
<meta property="og:description" content="My Site is cool"/> 

<link rel="shortcut icon" href="assests/favicon.ico" /> 
<link rel="apple-touch-icon" href="base_url();?>assests/icon.png"/> 
<link rel="icon" href="assests/icon.png"/> 
+0

fuera de tema para el SO; pertenece a [webmasters.se] –

+0

Hay una gran lista de todo lo que se incluye en el documento de su documento aquí: https://github.com/joshbuchea/HEAD –

Respuesta

11

Taken from móvil HTML5 Boilerplate de Pablo irlandesa :

<!-- Mobile viewport optimization h5bp.com/ad --> 
<meta name="HandheldFriendly" content="True"> 
<meta name="MobileOptimized" content="320"> 
<meta name="viewport" content="width=device-width"> 

<!-- Home screen icon Mathias Bynens mathiasbynens.be/notes/touch-icons --> 
<!-- For third generation iPad Retina Display --> 
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/touch/apple-touch-icon-144x144-precomposed.png" /> 
<!-- For iPhone 4 with high-resolution Retina display: --> 
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/touch/apple-touch-icon-114x114-precomposed.png" /> 
<!-- For first-generation iPad: --> 
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/touch/apple-touch-icon-72x72-precomposed.png" /> 
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --> 
<link rel="apple-touch-icon-precomposed" href="img/touch/apple-touch-icon-57x57-precomposed.png" /> 
<!-- For nokia devices: --> 
<link rel="shortcut icon" href="img/touch/apple-touch-icon.png" /> 

<!-- iOS web app, delete if not needed. https://github.com/h5bp/mobile-boilerplate/issues/94 --> 
<!-- <meta name="apple-mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-status-bar-style" content="black"> --> 

<!-- The script prevents links from opening in mobile safari. https://gist.github.com/1042026 --> 
<!-- <script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script> --> 

<!-- Mobile IE allows us to activate ClearType technology for smoothing fonts for easy reading --> 
<meta http-equiv="cleartype" content="on"> 

Para Bing SEO

<meta name="geo.placename" content="United States" /> 
<meta name="geo.position" content="x;x" /> 
<meta name="geo.region" content="usa" /> 
<meta name="ICBM" content="x,x" /> 
-1
<!DOCTYPE html> 
<html lang="en" dir="ltr"><head><meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<title>Title</title> 
<meta name="description" content="Description"> 
<link href="favicon.ico" rel="icon" type="image/x-icon"> 
<script src="init.js"></script> 
</head> 

Que sea corto y dulce. Si necesita incluir etiquetas sociales para el gráfico abierto, está bien.

8

SEO

<meta name='keywords' content='your, tags'> 
<meta name='description' content='150 words'> 
<meta name='subject' content='your website's subject'> 
<meta name='copyright' content='company name'> 
<meta name='language' content='ES'> 
<meta name='robots' content='index,follow'> 
<meta name='abstract' content=''> 
<meta name='topic' content=''> 
<meta name='summary' content=''> 
<meta name='Classification' content='Business'> 

Autor

<meta name='author' content='name, [email protected]'> 
<meta name='designer' content=''> 
<meta name='reply-to' content='[email protected]'> 
<meta name='owner' content=''> 

metadatos Dublin Core

<meta name="dc.language" CONTENT="UK"> 
<meta name="dc.source" CONTENT="http://www.your-domain.com/"> 
<meta name="dc.relation" CONTENT="http://www.second-domain.com/"> 
<meta name="dc.title" CONTENT="a title"> 
<meta name="dc.keywords" CONTENT="more keywords"> 
<meta name="dc.subject" CONTENT="the subject"> 
<meta name="dc.description" CONTENT="A description of the content"> 

Mobile

<meta name='HandheldFriendly' content='True'> 
<meta name='MobileOptimized' content='480'> 
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width, height=device-height, minimal-ui"> 
<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta name="mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-status-bar-style" content="black"> 
<meta name="theme-color" content="#000"> 
<meta name="apple-mobile-web-app-title" content="title"> 
<link rel="icon" sizes="192x192" href="img/brand/icon_192.png"> 
<link rel="apple-touch-icon" href="img/brand/icon_192.png"> 

reclamar la propiedad

<meta name='y_key' content='XXXXXXXXXX'> <!-- Yahoo Site Explorer --> 
<meta name='verify-v1' content='XXXXXXXXX'> <!-- Google --> 

Desactivar caché

<meta http-equiv='Expires' content='0'> 
<meta http-equiv='Pragma' content='no-cache'> 
<meta http-equiv='Cache-Control' content='no-cache'> 

IE

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

Open Graph

<meta property="og:title" content="My Site"/> 
<meta property="og:type" content="website"/> 
<meta property="og:image" content="assests/icon_big.png"/> 
<meta property="og:url" content="http://url.com"/> 
<meta property="og:site_name" content="My Site"/> 
<meta property="og:description" content="My Site is cool"/> 

Twitter tarjeta

<meta name="twitter:card" content="summary" /> 
<meta name="twitter:site" content="@flickr" /> 
<meta name="twitter:title" content="Small Island Developing States Photo Submission" /> 
<meta name="twitter:description" content="View the album on Flickr." /> 
<meta name="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg" /> 

Varios

<meta charset='UTF-8'> 
<meta name='pageKey' content='guest-home'> 
<meta itemprop='name' content='jQTouch'> 
<meta name='revised' content='Sunday, July 18th, 2010, 5:15 pm'> 
<meta name='search_date' content='2010-09-27'> 
<meta name='ResourceLoaderDynamicStyles' content=''> 
<meta name='medium' content='blog'> 
<meta name='syndication-source' content='https://mashable.com/2008/12/24/free-brand-monitoring-tools/'> 
<meta name='original-source' content='https://mashable.com/2008/12/24/free-brand-monitoring-tools/'> 
<meta name='url' content='http://www.websiteaddrress.com'> 
<meta name='identifier-URL' content='http://www.websiteaddress.com'> 
<meta name='directory' content='submission'> 
<meta name='pagename' content='jQuery Tools, Tutorials and Resources - O'Reilly Media'> 
<meta name='category' content=''> 
<meta name='coverage' content='Worldwide'> 
<meta name='distribution' content='Global'> 
<meta name='rating' content='General'> 
<meta name='revisit-after' content='7 days'> 
<meta name='subtitle' content='This is my subtitle'> 
<meta name='target' content='all'> 
+3

¡Me hizo reír! ¡No habría espacio para el contenido! Agregue solo lo que necesita y no complique demasiado las cosas. Deje que los motores de búsqueda hagan lo suyo, en realidad son buenos en eso: el contenido es el rey, no los metadatos. –

+0

Muchas de estas metaetiquetas, especialmente las que están en 'Misc' no son compatibles con HTML5. –

+0

¿por qué lo dices? – aWebDeveloper

Cuestiones relacionadas