Función utilitaria diseñada para automatizar la generación de etiquetas meta esenciales, optimización SEO y protocolos de redes sociales (Open Graph y Twitter Cards) en Blogger. Genera favicons responsivos, directrices de indexación para motores de búsqueda y la resolución de imágenes destacadas para plataformas externas. Esta función fue creada como un reemplazo moderno a all-head-content
Esta función forma parte del proyecto Hamlet. Puedes revisar el código fuente en GitHub.
Definición de la función
<b:includable id='@meta'>
<b:comment>
Generates essential metadata, SEO, and Open Graph/Twitter Cards.
@author zkreations
@param {String} [icon] - Base URL to generate responsive favicons.
@param {Array[Number]} [iconSizes=[32,96,180,192]] - Dimensions for the favicons.
@param {String} [robots] - Custom meta robots configuration for homepage/posts.
@param {String} [defaultImage] - Default image URL for social networks.
@param {String} [twitterCard="summary_large_image"] - Twitter Card type (summary, summary_large_image).
@param {String} [twitterSite] - Twitter/X handle of the website (e.g., @zkreations).
</b:comment>
<meta expr:charset='data:blog.encoding'/>
<meta content='width=device-width,initial-scale=1' name='viewport'/>
<b:if cond='data:icon'>
<b:loop values='data:iconSizes ?: [32,96,180,192]' var='size'>
<link expr:href='resizeImage(data:icon, data:size, "1:1")' rel='icon' expr:sizes='data:size + "x" + data:size' type='image/png'/>
</b:loop>
<b:else/>
<link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>
</b:if>
<b:if cond='data:view.description'>
<meta expr:content='data:view.description.escaped' name='description'/>
<meta expr:content='data:view.description.escaped' property='og:description'/>
<meta expr:content='data:view.description.escaped' name='twitter:description'/>
</b:if>
<link expr:href='data:view.url.canonical' rel='canonical'/>
<meta expr:content='data:view.url.canonical' property='og:url'/>
<meta expr:content='data:view.url.canonical' name='twitter:url'/>
<meta expr:content='data:view.title.escaped' property='og:title'/>
<meta expr:content='data:view.isHomepage or data:view.isSingleItem
? (data:robots ?: "index,follow,max-snippet:-1,max-image-preview:large,max-video-preview:-1")
: "noindex,follow"' name='robots'/>
<meta expr:content='data:view.isSingleItem ? "article" : "website"' property='og:type'/>
<b:with value='data:view.featuredImage ? data:view.featuredImage : (data:defaultImage ? data:defaultImage : false)' var='rawImage'>
<b:if cond='data:rawImage'>
<b:if cond='data:rawImage.isResizable'>
<meta expr:content='resizeImage(data:rawImage, 1200, "1200:630")' property='og:image'/>
<meta expr:content='resizeImage(data:rawImage, 1200, "1200:630")' name='twitter:image'/>
<meta content='1200' property='og:image:width'/>
<meta content='630' property='og:image:height'/>
<b:else/>
<meta expr:content='data:rawImage' property='og:image'/>
<meta expr:content='data:rawImage' name='twitter:image'/>
</b:if>
</b:if>
</b:with>
<meta expr:content='data:twitterCard ?: "summary_large_image"' name='twitter:card'/>
<b:if cond='data:twitterSite'>
<meta expr:content='data:twitterSite' name='twitter:site'/>
</b:if>
</b:includable>Especificación de Parámetros
| Parámetro | Tipo | Descripción |
|---|---|---|
icon |
string |
URL base para generar los favicons. |
iconSizes |
number[] |
Tamaños para generar los favicons. |
robots |
string |
Directiva para los motores de búsqueda. |
defaultImage |
string |
Imagen de respaldo para tarjetas sociales. |
twitterCard |
string |
Tipo de tarjeta de Twitter/X (Ej: "summary", "summary_large_image"). |
twitterSite |
string |
Usuario de Twitter/X del sitio o autor. |
Modo de uso
Para implementar esta función, añade el fragmento en los marcados predeterminados (<b:defaultmarkups type='Common'>) de tu tema e inclúyela directamente dentro de la etiqueta <head>.
icon
Recibe la ubicación de la imagen que actuará como icono del sitio. Si se omite, el código recurre automáticamente al favicon predeterminado hospedado por el servicio de Blogger.
<b:include data='{
icon: "https://blogger.googleusercontent.com/img/b/U3VhcG8/logo.png"
}' name='@meta'/><link href='/w32-h32-p-k-no-nu/logo.png' rel='icon' sizes='32x32' type='image/png'/>iconSizes
Especifica el listado de tamaños en píxeles que generará el bucle interno para las declaraciones de los iconos adaptables. Requiere que el parámetro icon esté definido.
<b:include data='{
icon: "https://blogger.googleusercontent.com/img/b/U3VhcG8/logo.png",
iconSizes: [32, 128]
}' name='@meta'/><link href='/w32-h32-p-k-no-nu/favicon.ico' rel='icon' sizes='32x32' type='image/png'/>
<link href='/w128-h128-p-k-no-nu/favicon.ico' rel='icon' sizes='128x128' type='image/png'/>robots
Inyecta reglas explícitas de indexación para la página principal o artículos individuales. En vistas secundarias de archivos o etiquetas, la función forzará automáticamente el valor "noindex,follow" para evitar contenido duplicado.
<b:include data='{ robots: "index,follow,noimageindex" }' name='@meta'/><meta content='index,follow,noimageindex' name='robots'/>defaultImage
Determina la imagen utilizada para las metaetiquetas og:image y twitter:image. Si la vista actual cuenta con una imagen destacada (featuredImage), esta tendrá prioridad absoluta sobre la imagen por defecto declarada en este parámetro.
<b:include data='{
defaultImage: "https://blogger.googleusercontent.com/img/b/U3VhcG8/og-default.png"
}' name='@meta'/><meta content='https://blogger.googleusercontent.com/img/b/U3VhcG8/og-default.png' property='og:image'/>twitterCard
Define la estructura visual y de presentación del enlace al ser compartido en la red social Twitter/X. El formato predeterminado es "summary_large_image".
<b:include data='{ twitterCard: "summary" }' name='@meta'/><meta content='summary' name='twitter:card'/>twitterSite
Añade la cuenta de usuario encargada o propietaria de la publicación en las tarjetas compartidas para optimizar la vinculación de la marca dentro de la plataforma social.
<b:include data='{ twitterSite: "@zkreations" }' name='@meta'/><meta content='@zkreations' name='twitter:site'/>
