{"id":227,"date":"2024-11-08T13:14:42","date_gmt":"2024-11-08T10:14:42","guid":{"rendered":"https:\/\/planeta21vek.ru\/elina732\/isp\/?p=227"},"modified":"2025-11-20T21:28:50","modified_gmt":"2025-11-20T18:28:50","slug":"metadatos-html-con-ejemplos-y-contenido-head","status":"publish","type":"post","link":"https:\/\/planeta21vek.ru\/elina732\/isp\/2024\/11\/08\/metadatos-html-con-ejemplos-y-contenido-head\/","title":{"rendered":"Metadatos HTML con ejemplos y contenido HEAD"},"content":{"rendered":"

La metaetiqueta contiene metadatos sobre el documento HTML. Puede incluir informaci\u00f3n como el nombre del autor, t\u00edtulo del documento, palabras clave y juego de caracteres.<\/p>\n


\n<\/p>\n

\nAtributos meta:
\ncharset – Especifica la codificaci\u00f3n del documento.
\ncontent – Establece el valor de un atributo especificado con name o http-equiv.
\nhttp-equiv – Dise\u00f1ado para convertir metaetiquetas en t\u00edtulos HTTP.
\nname – El nombre de la metaetiqueta tambi\u00e9n establece indirectamente su finalidad.\n<\/p>\n\n

\r\n<head>\r\n  <meta charset="UTF-8">\r\n  <meta name="description" content="Esta es la descripci\u00f3n de la p\u00e1gina web">\r\n  <meta name="keywords" content="HTML, CSS, JavaScript">\r\n  <meta name="author" content="Iv\u00e1n Ivanov">\r\n  <meta name="viewport" content="width=device-width, initial-scale=1.0">\r\n<title>Mi pagina de prueba<\/title>\r\n<\/head>\r\n<\/pre>\n
\r\n<meta name="twitter:title" content="MDN Web Docs" \/>\r\n<\/pre>\n
Uno de los resultados de agregar estos metadatos es que cuando agregas un enlace MDN Web Docs en facebook, Se mostrar\u00e1 con una imagen y descripci\u00f3n, mejorando la experiencia del usuario _(User eXperience, UX)_:<\/p>\n
\r\n<meta\r\n  property="og:image"\r\n  content="https:\/\/developer.mozilla.org\/mdn-social-share.png" \/>\r\n<meta\r\n  property="og:description"\r\n  content="La documentaci\u00f3n web sobre MDN proporciona\r\nproporciona informaci\u00f3n sobre tecnolog\u00edas web abiertas, incluidas HTML, CSS y varias API de sitios web\r\ny aplicaciones web progresivas. El sitio tambi\u00e9n contiene materiales para desarrolladores sobre tales\r\nProductos de Mozilla como herramientas para desarrolladores Firefox." \/>\r\n<meta property="og:title" content="MDN Web Docs" \/>\r\n<\/pre>\n
Puede especificar diferentes iconos para diferentes dispositivos. Por ejemplo, en la p\u00e1gina principal MDN:<\/p>\n
\r\n<link rel="shortcut icon" href="favicon.ico" type="image\/x-icon" \/>\r\n<!-- Para iPad 3 con pantalla Retina de alta definici\u00f3n: -->\r\n<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https:\/\/developer.mozilla.org\/static\/img\/favicon144.png" \/>\r\n<!-- Para iPhone con pantalla Retina de alta definici\u00f3n: -->\r\n<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https:\/\/developer.mozilla.org\/static\/img\/favicon114.png" \/>\r\n<!-- Para iPad primera y segunda generaci\u00f3n: -->\r\n<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https:\/\/developer.mozilla.org\/static\/img\/favicon72.png" \/>\r\n<!-- Para iPhone, iPod Touch sin Retina y dispositivos con Android 2.1+: -->\r\n<link rel="apple-touch-icon-precomposed" href="https:\/\/developer.mozilla.org\/static\/img\/favicon57.png" \/>\r\n<!-- Para otros casos - normal favicon -->\r\n<link rel="shortcut icon" href="https:\/\/developer.mozilla.org\/static\/img\/favicon32.png" \/>\r\n<\/pre>\n
Conexi\u00f3n CSS y JavaScript<\/p>\n
\r\n<link rel="stylesheet" href="my-css-file.css" \/>\r\n<script src="my-js-file.js"><\/script>\r\n<\/pre>\n
Incorporado CSS y JavaScript<\/p>\n
\r\n<script>\r\n..............\r\n<\/script>\r\n<style>\r\n.................\r\n<\/style>\r\n<\/pre>\n
Idioma principal de la p\u00e1gina HTML<\/p>\n
\r\n<html lang="ru">\r\n<html lang="en-US">\r\n<\/pre>\n\n","protected":false},"excerpt":{"rendered":"
La metaetiqueta contiene metadatos sobre el documento HTML. Puede incluir informaci\u00f3n como el nombre del autor, t\u00edtulo del documento, palabras clave y juego de caracteres.<\/p>\n","protected":false},"author":1,"featured_media":228,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,7],"tags":[112,13,113],"class_list":{"0":"post-227","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-htmlverstka","8":"category-programmirovanie","9":"tag-head","10":"tag-html","11":"tag-meta"},"_links":{"self":[{"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/posts\/227","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/comments?post=227"}],"version-history":[{"count":2,"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/posts\/227\/revisions"}],"predecessor-version":[{"id":272,"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/posts\/227\/revisions\/272"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/media\/228"}],"wp:attachment":[{"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/media?parent=227"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/categories?post=227"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/tags?post=227"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}