Datos enriquecidos (Schema y microdatos) en Blogger

Datos enriquecidos (Schema y microdatos) en NichoClean v2.0 — schema para Blogger SEO

Si buscas destacar en Google con rich snippets, NichoClean v2.0 ya llega afinada: trae marcado schema.org en las partes críticas del blog (sitio, migas, tarjetas, posts, páginas y catálogo de productos). Aquí te contamos cómo funciona en la plantilla y qué debes personalizar.

1) WebSite + SearchAction (buscador interno en resultados)

Dónde está: cabecera del tema. Qué hace: declara tu sitio como WebSite e informa a Google cómo buscar dentro del blog.

<script type='application/ld+json'>
//<![CDATA[
{
  "@context": "http://schema.org",
  "@type": "WebSite",
  "url": "<data:blog.homepageUrl.canonical/>",
  "potentialAction": {
      "@type": "SearchAction",
      "target": "<data:blog.searchUrl/>?q={search_term_string}",
      "query-input": "required name=search_term_string"
  }
}
//]]>
</script>

Qué debe cambiar el usuario: opcional agregar el nombre del sitio con "name": "<data:blog.title/>".

2) Migas de pan (BreadcrumbList)

Dónde está: bloque de MIGAS DE PAN POST & PAGE. Qué hace: marca la jerarquía de navegación con BreadcrumbList.

<b:if cond='data:view.isPost or data:view.isPage'>
  <nav aria-label='Migas de pan' class='breadcrumbs' itemscope='' itemtype='https://schema.org/BreadcrumbList' role='navigation'>
    <span itemprop='itemListElement' itemscope='' itemtype='https://schema.org/ListItem'>
      <a expr:href='data:blog.homepageUrl' itemprop='item'>
        <span itemprop='name'>Inicio</span>
      </a>
      <meta content='1' itemprop='position'/>
    </span>
    <b:if cond='data:view.isPost'>
      <b:if cond='data:post.labels'>
        <span class='breadcrumb-sep'>›</span>
        <span itemprop='itemListElement' itemscope='' itemtype='https://schema.org/ListItem'>
          <a expr:href='data:post.labels.first.url' itemprop='item'>
            <span itemprop='name'><data:post.labels.first.name/></span>
          </a>
          <meta content='2' itemprop='position'/>
        </span>
      <b:else/>
        <span class='breadcrumb-sep'>›</span>
        <span itemprop='itemListElement' itemscope='' itemtype='https://schema.org/ListItem'>
          <span itemprop='name'>Sin etiqueta</span>
          <meta content='2' itemprop='position'/>
        </span>
      </b:if>
      <span class='breadcrumb-sep'>›</span>
      <span itemprop='itemListElement' itemscope='' itemtype='https://schema.org/ListItem'>
        <span itemprop='name'><data:post.title/></span>
        <meta content='3' itemprop='position'/>
      </span>
    </b:if>
  </nav>
</b:if>

Qué debe cambiar el usuario: nada, solo asegurar tener al menos una etiqueta por post si deseas mostrar categoría.

3) Tarjetas del índice y resultados de búsqueda (BlogPosting)

Dónde está: en el listado (index) y la búsqueda. Qué hace: cada tarjeta se marca como BlogPosting con título, imagen, descripción, autor y fechas.

<div class='post-card' itemscope='' itemtype='https://schema.org/BlogPosting'>
  <a expr:href='data:post.url' itemprop='url'>
    <img expr:alt='"Imagen del artículo: " + data:post.title'
         expr:src='data:post.featuredImage resizeImage 600 resizeImage "4:3"'
         itemprop='image' loading='lazy'/>
    <h3 itemprop='headline'><data:post.title/></h3>
  </a>
  <p itemprop='description'>
    <b:eval expr='data:post.snippets.short snippet {length: 80}'/>
  </p>
  <div itemprop='author' itemscope='' itemtype='https://schema.org/Person'>
    <meta expr:content='data:post.author.name' itemprop='name'/>
    <meta expr:content='data:post.author.profileUrl' itemprop='url'/>
  </div>
  <meta expr:content='data:post.date.iso8601' itemprop='datePublished'/>
  <meta expr:content='data:post.lastUpdated.iso8601' itemprop='dateModified'/>
  <meta expr:content='data:post.url' itemprop='mainEntityOfPage'/>
</div>

Qué debe cambiar el usuario: nada.

4) Entradas (post) con microdatos completos (BlogPosting)

Dónde está: en posts estándar y post store. Qué hace: marca autor, fechas, URL, imagen, título y cuerpo del artículo.

<article class='post' itemscope='' itemtype='https://schema.org/BlogPosting'>
  <div itemprop='author' itemscope='' itemtype='https://schema.org/Person'>
    <meta expr:content='data:post.author.name' itemprop='name'/>
    <meta expr:content='data:post.author.profileUrl' itemprop='url'/>
  </div>
  <meta expr:content='data:post.date.iso8601' itemprop='datePublished'/>
  <meta expr:content='data:post.lastUpdated.iso8601' itemprop='dateModified'/>
  <meta expr:content='data:post.url' itemprop='mainEntityOfPage'/>
  <meta expr:content='data:post.featuredImage' itemprop='image'/>
  <h1 class='post-title' itemprop='headline'><data:post.title/></h1>
  <div class='post-content' itemprop='articleBody'>
    <div class='post-body'>
      <data:post.body/>
    </div>
  </div>
</article>

Qué debe cambiar el usuario: nada.

5) Páginas estáticas (WebPage)

Dónde está: cuando data:view.isPage. Qué hace: marca páginas informativas como WebPage.

<article class='page' itemscope='' itemtype='https://schema.org/WebPage'>
  <h1 class='post-title' itemprop='headline'><data:post.title/></h1>
  <div itemprop='author' itemscope='' itemtype='https://schema.org/Person'>
    <meta expr:content='data:post.author.name' itemprop='name'/>
    <meta expr:content='data:post.author.profileUrl' itemprop='url'/>
  </div>
  <meta expr:content='data:post.date.iso8601' itemprop='datePublished'/>
  <meta expr:content='data:post.lastUpdated.iso8601' itemprop='dateModified'/>
  <meta expr:content='data:post.url' itemprop='url'/>
  <meta expr:content='data:post.url' itemprop='mainEntityOfPage'/>
  <div class='post-content' itemprop='mainContentOfPage'>
    <div class='post-body'>
      <data:post.body/>
    </div>
  </div>
</article>

Qué debe cambiar el usuario: nada.

6) Galerías/feeds dinámicos con microdatos

Dónde está: Script de galería (cluster, card, slider…). Qué hace: cada ítem se marca como Article con autor, fechas y mainEntityOfPage.

<div itemprop="author" itemscope itemtype="https://schema.org/Person">
  <meta itemprop="name" content="${autor}"/>
  <meta itemprop="url" content="${autorUrl}"/>
</div>
<meta itemprop="datePublished" content="${fechaPublicacion}"/>
<meta itemprop="dateModified" content="${fechaModificacion}"/>
<meta itemprop="mainEntityOfPage" content="${link}"/>

<article class='item-card' itemscope itemtype='https://schema.org/Article'>
  <a href='${link}' itemprop='url'>
    <img alt='Imagen del artículo: ${titulo}' itemprop='image' src='${media}'/>
  </a>
  <div class="item-card-content">
    <h3 itemprop='headline'>${titulo}</h3>
    <p itemprop="description">${descripcion}</p>
    ${metaDatos}
    <a href='${link}' class='button'>Leer más</a>
  </div>
</article>

Qué debe cambiar el usuario: nada, aunque puedes cambiar Article a BlogPosting si quieres.

7) Catálogo de productos por etiqueta (Product + Offer)

Dónde está: .nivel3. Qué hace: detecta productos por etiquetas con precio tipo $99.99, marca cada ítem como Product y añade Offer con precio, moneda y disponibilidad.

<div class="nivel3-item" itemscope itemtype="https://schema.org/Product">
  <div class="img">
    <a href="${link}" target="_blank">
      <img src="${img}" alt="Imagen del artículo: ${title}" loading="lazy" itemprop="image">
    </a>
  </div>
  <div class="info">
    <h3 class="titulo-producto" itemprop="name">
      <a href="${link}" target="_blank">${title}</a>
    </h3>
    <p class="descripcion" itemprop="description">${cleanText}</p>
    <div class="meta ficha-precio" itemprop="offers" itemscope itemtype="https://schema.org/Offer">
      <span itemprop="priceCurrency" content="USD"></span>
      <span class="precio" itemprop="price" content="${precioEntry.replace('$','')}">${precioEntry}</span>
      <link itemprop="availability" href="${disponibilidadSchema}">
      <span class="disponibilidad${disponibilidadTexto === "Agotado" ? " agotado" : ""}">${disponibilidadTexto}</span>
    </div>
    <a href="${link}" class="boton ficha-boton" target="_blank" rel="nofollow">Ver producto</a>
  </div>
</div>

Qué debe cambiar el usuario: moneda, etiquetas de precio y disponibilidad.

Conclusión

Si tu objetivo es schema para Blogger SEO, NichoClean v2.0 ya te deja el terreno listo: WebSite + SearchAction, BreadcrumbList, BlogPosting en tarjetas, posts y páginas, y Product + Offer en el catálogo por etiqueta. Solo ajustas moneda, disponibilidad y el patrón de precios en labels. El resultado: rich snippets más completos, mejor comprensión semántica de tu contenido y un CTR más alto.

Compartir esta entrada

Facebook Twitter Email