{"id":5008,"date":"2018-10-25T15:26:06","date_gmt":"2018-10-25T13:26:06","guid":{"rendered":"https:\/\/www.mjcachon.com\/?p=5008"},"modified":"2022-07-13T01:51:19","modified_gmt":"2022-07-12T23:51:19","slug":"head-html","status":"publish","type":"post","link":"https:\/\/laikateam.com\/blog\/head-html\/","title":{"rendered":"\u00bfC\u00f3mo debe ser el "head" HTML?"},"content":{"rendered":"

[Este post fue escrito originalmente por Saskia Moreno<\/a>, en su paso por nuestra agencia SEO, antes llamada \u00abSomos Mjcachon\u00bb]<\/p>\n

\u00bfTe preguntas qu\u00e9 elementos contiene el HEAD en html y en qu\u00e9 orden deben ir?
\n<\/span>Has llegado al sitio adecuado.<\/span>
\n
\n<\/span>La etiqueta <head><\/strong> la analizamos y repasamos dentro de nuestra <\/span>auditor\u00eda SEO<\/span><\/a> en la parte de maquetaci\u00f3n, puesto que la etiqueta HEAD forma parte de la codificaci\u00f3n HTML.<\/span><\/p>\n

\u00bfQu\u00e9 es el <head>?<\/span><\/h2>\n

Pues bien, antes de optimizar nada deber\u00edamos saber qu\u00e9 es el <head> html y d\u00f3nde se ubica.<\/span><\/p>\n

Estructura de una web<\/span><\/h3>\n

La estructura tradicional<\/strong> de una p\u00e1gina web en cuanto al c\u00f3digo html consta de 2 apartados o secciones:<\/span><\/p>\n

<html>\n<\/span><head>Elementos como meta etiquetas, no visibles en front-end<\/head><\/span>\n<body>Elementos visibles en el front-end<\/body>\n<\/span><\/html><\/span><\/pre>\n
En HTML5<\/strong> se permite eliminar estas etiquetas, formando una estructura como lo podr\u00eda ser esta:<\/span><\/p>\n
<<\/span>!DOCTYPE<\/span> html<\/span>><\/span>\n<<\/span>title<\/span>><\/span>T\u00edtulo de la p\u00e1gina<\/span><<\/span>\/title<\/span>><\/span>\n<<\/span>h1<\/span>><\/span>Encabezado<\/span><<\/span>\/h1<\/span>><\/span>\n<<\/span>p<\/span>><\/span>Texto<\/span><<\/span>\/p<\/span>><\/span><\/pre>\n
Elementos del <head><\/span><\/h3>\n
En la cabecera <head> insertamos todas las etiquetas tan valiosas para SEO como lo son Title, Description, la codificaci\u00f3n o conjunto de caracteres (charset) y otros elementos como enlaces a archivos CSS y JS.<\/span>
\n\u00bfPero… c\u00f3mo? \u00bfA lo loco? \u00a1No! Las etiquetas del <head> tienen un orden ideal para que los rastreadores y navegadores puedan entender correctamente el contenido de nuestro sitio y, por tanto, ahorrarle tiempo.<\/span><\/p>\n
\u00bfCu\u00e1l es el orden \u00f3ptimo del <head>?<\/span><\/h2>\n
Llegamos al quid de la cuesti\u00f3n. Tanto el orden de los elementos como los propios elementos que contiene la secci\u00f3n del Head html es importante para SEO y para los navegadores.<\/span>
\nLo verdaderamente trascendental es indicarle el charset (conjunto de caracteres) en la primera l\u00ednea, ya que gracias a esto los navegadores y bots podr\u00e1n leer correctamente el contenido, en los caracteres correctos en los que hemos codificado la web.
\nEn cuanto a las dem\u00e1s etiquetas incluidas en el <head>, realmente depende del orden en el que queramos que se carguen los elementos, si CSS antes que JS, etc.<\/span>
\nPor lo general, siempre recomendamos tener el charset lo primero, la etiqueta Base (aunque esta no se ve en todas las webs), el Viewport, despu\u00e9s el Title ya que es esencial para SEO, seguido de la Description, que no falte.<\/span>
\nProponemos la siguiente estructura de <head>:<\/strong><\/p>\n
    \n
  1. \n
    Meta Charset (encoding de la p\u00e1gina)<\/span><\/pre>\n<\/li>\n
  2. \n
    Etiqueta Base<\/span><\/pre>\n<\/li>\n
  3. \n
    Meta Viewport (para webs responsive)<\/span><\/pre>\n<\/li>\n
  4. \n
    Title<\/span><\/pre>\n<\/li>\n
  5. \n
    Etiquetas:<\/span><\/pre>\n
      \n
    1. \n
      Meta Description<\/span><\/pre>\n<\/li>\n
    2. \n
      Meta Robots<\/span><\/pre>\n<\/li>\n
    3. \n
      Canonical<\/span><\/pre>\n<\/li>\n<\/ol>\n<\/li>\n
    4. \n
      Ficheros CSS<\/span><\/pre>\n<\/li>\n
    5. \n
      Ficheros JS<\/span><\/pre>\n<\/li>\n
    6. \n
      Resto de etiquetas (OG, otras llamadas y metas)<\/span><\/pre>\n<\/li>\n<\/ol>\n
      \u00bfY los meta Keywords?<\/span><\/h3>\n
      Para los que os pregunt\u00e1is si no incluimos la etiqueta meta keywords: no. Es una etiqueta anticuada a la que los bots no le prestan atenci\u00f3n. Serv\u00eda de truquito SEO hasta que los webmasters y SEOs sobreoptimizaron esa parte para alterar los rankings y aparecer para el mayor n\u00famero de keywords. Esto ha tra\u00eddo como (l\u00f3gica) consecuencia que los motores de b\u00fasqueda ya no lo consideran una meta v\u00e1lida. Ahora nos lo tenemos que \u201ccurrar\u201d con un buen texto bien optimizado.<\/span>
      \nAs\u00ed que\u2026 \u00a1manos a la obra con nuestro <head> y nuestras redacciones SEO!<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"
      [Este post fue escrito originalmente por Saskia Moreno, en su paso por nuestra agencia SEO, antes llamada \u00abSomos Mjcachon\u00bb] \u00bfTe preguntas qu\u00e9 elementos contiene el HEAD en html y en qu\u00e9 orden deben ir? Has llegado al sitio adecuado. La etiqueta <head> la analizamos y repasamos dentro de nuestra auditor\u00eda SEO en la parte de<\/p>\n","protected":false},"author":8,"featured_media":6469,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6,2],"tags":[],"yoast_head":"\n\u00bfC\u00f3mo debe ser el Head HTML? Gu\u00eda para un Head \u00f3ptimo | MJ Cach\u00f3n<\/title>\n<meta name=\"description\" content=\"\u00bfQuieres optimizar la etiqueta Head para SEO? Te contamos c\u00f3mo hacerlo y qu\u00e9 orden \u00f3ptimo deben tener los elementos de esta etiqueta. \u00a1Optimiza tu HEAD ya!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/laikateam.com\/blog\/head-html\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u00bfC\u00f3mo debe ser el Head HTML? Gu\u00eda para un Head \u00f3ptimo | MJ Cach\u00f3n\" \/>\n<meta property=\"og:description\" content=\"\u00bfQuieres optimizar la etiqueta Head para SEO? Te contamos c\u00f3mo hacerlo y qu\u00e9 orden \u00f3ptimo deben tener los elementos de esta etiqueta. \u00a1Optimiza tu HEAD ya!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/laikateam.com\/blog\/head-html\/\" \/>\n<meta property=\"og:site_name\" content=\"LaikaTeam\" \/>\n<meta property=\"article:published_time\" content=\"2018-10-25T13:26:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-12T23:51:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/laikateam.com\/blog\/wp-content\/uploads\/2018\/10\/head-html.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@laikateam_es\" \/>\n<meta name=\"twitter:site\" content=\"@laikateam_es\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/laikateam.com\/blog\/#organization\",\"name\":\"Laika\",\"url\":\"https:\/\/laikateam.com\/blog\/\",\"sameAs\":[\"https:\/\/www.instagram.com\/laika_team\",\"https:\/\/www.linkedin.com\/company\/laika-team\/\",\"https:\/\/twitter.com\/laikateam_es\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/laikateam.com\/blog\/#logo\",\"inLanguage\":\"es\",\"url\":\"https:\/\/laikateam.com\/blog\/wp-content\/uploads\/2021\/06\/logo-laika.png\",\"contentUrl\":\"https:\/\/laikateam.com\/blog\/wp-content\/uploads\/2021\/06\/logo-laika.png\",\"width\":318,\"height\":350,\"caption\":\"Laika\"},\"image\":{\"@id\":\"https:\/\/laikateam.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/laikateam.com\/blog\/#website\",\"url\":\"https:\/\/laikateam.com\/blog\/\",\"name\":\"LaikaTeam\",\"description\":\"Strategic & SEO Consulting\",\"publisher\":{\"@id\":\"https:\/\/laikateam.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/laikateam.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"es\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/laikateam.com\/blog\/head-html\/#primaryimage\",\"inLanguage\":\"es\",\"url\":\"https:\/\/laikateam.com\/blog\/wp-content\/uploads\/2018\/10\/head-html.jpg\",\"contentUrl\":\"https:\/\/laikateam.com\/blog\/wp-content\/uploads\/2018\/10\/head-html.jpg\",\"width\":1920,\"height\":1080},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/laikateam.com\/blog\/head-html\/#webpage\",\"url\":\"https:\/\/laikateam.com\/blog\/head-html\/\",\"name\":\"\\u00bfC\\u00f3mo debe ser el Head HTML? Gu\\u00eda para un Head \\u00f3ptimo | MJ Cach\\u00f3n\",\"isPartOf\":{\"@id\":\"https:\/\/laikateam.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/laikateam.com\/blog\/head-html\/#primaryimage\"},\"datePublished\":\"2018-10-25T13:26:06+00:00\",\"dateModified\":\"2022-07-12T23:51:19+00:00\",\"description\":\"\\u00bfQuieres optimizar la etiqueta Head para SEO? Te contamos c\\u00f3mo hacerlo y qu\\u00e9 orden \\u00f3ptimo deben tener los elementos de esta etiqueta. \\u00a1Optimiza tu HEAD ya!\",\"breadcrumb\":{\"@id\":\"https:\/\/laikateam.com\/blog\/head-html\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/laikateam.com\/blog\/head-html\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/laikateam.com\/blog\/head-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/laikateam.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\\u00bfC\\u00f3mo debe ser el "head" HTML?\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/laikateam.com\/blog\/head-html\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/laikateam.com\/blog\/head-html\/#webpage\"},\"author\":{\"@id\":\"https:\/\/laikateam.com\/blog\/#\/schema\/person\/85324b9d37a6585f109582eef56cfbd7\"},\"headline\":\"\\u00bfC\\u00f3mo debe ser el "head" HTML?\",\"datePublished\":\"2018-10-25T13:26:06+00:00\",\"dateModified\":\"2022-07-12T23:51:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/laikateam.com\/blog\/head-html\/#webpage\"},\"wordCount\":533,\"commentCount\":7,\"publisher\":{\"@id\":\"https:\/\/laikateam.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/laikateam.com\/blog\/head-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/laikateam.com\/blog\/wp-content\/uploads\/2018\/10\/head-html.jpg\",\"articleSection\":[\"Formaci\\u00f3n\",\"SEO\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/laikateam.com\/blog\/head-html\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/laikateam.com\/blog\/#\/schema\/person\/85324b9d37a6585f109582eef56cfbd7\",\"name\":\"Equipo Laikateam\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/laikateam.com\/blog\/#personlogo\",\"inLanguage\":\"es\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ee6b146e019910d72e1a0089dbbba823?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ee6b146e019910d72e1a0089dbbba823?s=96&d=mm&r=g\",\"caption\":\"Equipo Laikateam\"},\"sameAs\":[\"https:\/\/www.laikateam.com\/\"],\"url\":\"https:\/\/laikateam.com\/blog\/author\/equipo-laika\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/laikateam.com\/blog\/wp-json\/wp\/v2\/posts\/5008"}],"collection":[{"href":"https:\/\/laikateam.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/laikateam.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/laikateam.com\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/laikateam.com\/blog\/wp-json\/wp\/v2\/comments?post=5008"}],"version-history":[{"count":2,"href":"https:\/\/laikateam.com\/blog\/wp-json\/wp\/v2\/posts\/5008\/revisions"}],"predecessor-version":[{"id":6837,"href":"https:\/\/laikateam.com\/blog\/wp-json\/wp\/v2\/posts\/5008\/revisions\/6837"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/laikateam.com\/blog\/wp-json\/wp\/v2\/media\/6469"}],"wp:attachment":[{"href":"https:\/\/laikateam.com\/blog\/wp-json\/wp\/v2\/media?parent=5008"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/laikateam.com\/blog\/wp-json\/wp\/v2\/categories?post=5008"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/laikateam.com\/blog\/wp-json\/wp\/v2\/tags?post=5008"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
No obstante, no es una pr\u00e1ctica recomendada ya que puede generar, entre otros problemas, errores en navegadores m\u00e1s antiguos. Y cuando se trata de nuestra web, \u00a1es mejor ir a lo seguro! \ud83d\ude09<\/span>
\ntest9<\/a><\/p>\n