xhtml - structured - snippet testing tools
¿Cómo implementar el marcado schema.org para una ruta de exploración? (8)
No hay mucha información sobre la implementación de una ruta de navegación utilizando el marcado schema.org. Hasta ahora, pude obtener dos documentos oficiales, uno que muestra esto:
<div itemscope itemtype="http://schema.org/Property" itemid="http://schema.org/breadcrumb">
<link itemprop="domain" href="http://schema.org/WebPage"/>
<link itemprop="range" href="http://schema.org/Text"/>
</div>
Y otro que muestra esto:
<body itemscope itemtype="http://schema.org/WebPage">
<div itemprop="breadcrumb">
<a href="category/books.html">Books</a> >
<a href="category/books-literature.html">Literature & Fiction</a> >
<a href="category/books-classics">Classics</a>
</div>
</body>
Los dos márgenes son bastante diferentes. ¿Tienen algún sentido para ti? Si lo hacen, ¿cómo encierro el siguiente código de ruta de acceso simple con ese marcado, la MANERA CORRECTA?
<body>
<span id="breadcrumbs">
<a rel="home" href="http://example.com">
<span>Noob Archive</span>
</a> »
<span>
<a href="http://example.com/topic/html/">
<span>HTML</span>
</a> »
<strong>Best Practices: Markup for Setting up Breadcrumbs on Web Pages</strong>
</span>
</span>
</body>
¡Gracias!
De acuerdo con el Foro de Ayuda de Google Webmaster Central , los expertos no recomiendan utilizar el marcado schema.org breadcrumb por el momento, parece que "hay algún tipo de problema en la estructura de schema.org breadcrumb". En su lugar, se exhorta a utilizar el marcado de migas de pan data-vocabulary.org, que Google y los otros motores de búsqueda también pueden leer fácilmente.
Un ejemplo de marcado de migas de pan de data-vocabulary.org:
<div>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/" itemprop="url">
<span itemprop="title">example</span>
</a> >
</span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/fashion/" itemprop="url">
<span itemprop="title">Fashion</span>
</a> >
</span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/fashion/women/" itemprop="url">
<span itemprop="title">Women</span>
</a> >
</span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/fashion/women/boots/" itemprop="url">
<span itemprop="title">Boots</span>
</a>
</span>
</div>
El primer documento es la definición, así que no te preocupes por eso. Simplemente dice que breadcrumb es una propiedad de texto de las páginas web.
El ejemplo en http://schema.org/WebPage es el que desea utilizar y comprender. Establece el fragmento de migaja de pan en un solo campo de texto que dice "Libros> Literatura y ficción> Clásicos".
Lo harías así:
<body itemscope itemtype="http://schema.org/WebPage">
<span id="breadcrumbs" itemprop="breadcrumb">
<a rel="home" href="http://example.com">
<span>Noob Archive</span>
</a> »
<span>
<a href="http://example.com/topic/html/">
<span>HTML</span>
</a> »
<strong>Best Practices: Markup for Setting up Breadcrumbs on Web Pages</strong>
</span>
</span>
</body>
El resultado sería "Noob Archive» HTML »Mejores prácticas: marcado para la configuración de rutas de navegación en páginas web".
Puede usar linter.structured-data.org para verificar cómo se analizan las propiedades de sus elementos y http://diveintohtml5.ep.io/extensibility.html para obtener más información sobre las reglas de análisis.
Esto se valida ahora en la herramienta de prueba de datos estructurados de Google
<nav role="navigation" class="breadcrumb" itemscope itemtype="http://schema.org/Breadcrumb">
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="/"><span itemprop="name">Home</span></a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="/about-us"><span itemprop="name">About Us</span></a>
<meta itemprop="position" content="2" />
</li>
</ol>
</nav>
La respuesta de @somori es incorrecta , pero eso se debe a que la documentación sobre cómo marcar correctamente las migas de pan con microdata / schema.org es ampliamente incorrecta.
CADA migaja de pan debe declararse con una propiedad itemprop, no puede simplemente envolverla con itemprop = "breadcrumb" en el div o span que contiene y usar itemprop="child" en los divs anidados.
Más información aquí:
http://lists.w3.org/Archives/Public/public-vocabs/2012Jan/0016.html
Hazlo así, para que tus migas de pan aparezcan en SERPs:
<div class="breadcrumb" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<span class="breadcrumb-lead">YOU ARE HERE:</span><a title="Go to %title%." href="%link%" class="%type%" itemprop="url"><span itemprop="title">Homepage</span></a>
<div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb" style="display: inline;"><a title="Go to %title%." href="%link%" class="%type%" itemprop="url"><span itemprop="title">Category One</span></a></div>
<div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb" style="display: inline;"><a title="Go to %title%." href="%link%" class="%type%" itemprop="url"><span itemprop="title">Category Two</span></a></div>
</div>
Luego prueba en google herramienta de prueba de datos estructurados:
La respuesta de @ IssaBERTHE es correcta. Meh, necesito más representantes para comentar. Para cualquier persona que use WordPress, echa un vistazo a este complemento. Puede adaptarlo a sus necesidades y seguir el estándar de Google. Tiene el posicionamiento incorporado.
Can Download here -> breadcrumb-trail plugin
Necesita un poco de corrección. El archivo que necesitamos editar es breadcrumb-trail-master / inc / breadcrumbs.php
Necesitas editar la línea 213:
$breadcrumb = sprintf(''<%1$s role="navigation" aria-label="%2$s" class="breadcrumb-trail breadcrumbs" itemprop="breadcrumb">%3$s%4$s%5$s</%1$s>'',
Estamos eliminando el itemprop, por lo que debería ser como:
$breadcrumb = sprintf(''<%1$s role="navigation" aria-label="%2$s" class="breadcrumb-trail breadcrumbs">%3$s%4$s%5$s</%1$s>'',
Ahora desplácese hacia arriba y edite la línea 172:
$breadcrumb .= ''<ul class="trail-items" itemscope itemtype="http://schema.org/BreadcrumbList">'';
Agregue el itemprop aquí en su lugar:
$breadcrumb .= ''<ul class="trail-items" itemprop="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">'';
El autor pensó que tenías que separarlos supongo. Ahora al comprobar, debe registrarse correctamente.
schema.org da el siguiente ejemplo:
<div itemprop="breadcrumb">
<a href="category/books.html">Books</a> >
<a href="category/books-literature.html">Literature & Fiction</a> >
<a href="category/books-classics">Classics</a>
</div>
Fuente: http://schema.org/WebPage (sección de ejemplo, pestaña de microformato)
Otro recurso: http://www.w3.org/wiki/WebSchemas/Breadcrumbs
schema.org finalmente lanzó un nuevo sistema de marcado Breadcrumb en la actualización de schema.org v1.92 (publicado 2014-12-11). El nuevo sistema breadcrumb es una extensión de ItemList llamada BreadcrumbList . Cada BreadcrumbList contiene múltiples elementos ListItem . Esto permite múltiples rastros de ruta de navegación por página, la separación de cada enlace individual como un elemento de lista separado, y proporciona una envoltura alrededor de todas las rutas de ListItem completas. Esto debería satisfacer casi todos los casos de uso.
Aquí está el ejemplo de Microdata de schema.org:
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/dresses">
<span itemprop="name">Dresses</span></a>
<meta itemprop="position" content="1" />
</li>
› <li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/dresses/real">
<span itemprop="name">Real Dresses</span></a>
<meta itemprop="position" content="2" />
</li>
</ol>
La herramienta de prueba de datos estructurados recientemente rediseñada de Google analiza este marcado correctamente. Sin embargo, el rediseño de la herramienta eliminó la vista previa de la búsqueda, por lo que es difícil decir cómo Google mostrará las migajas de pan con este marcado en los resultados de búsqueda de Google (o si Google utilizará esta información). linter.structured-data.org analiza este nuevo marcado correctamente también, pero como se menciona allí, "Esta vista previa solo se muestra como un ejemplo de lo que podría mostrar un motor de búsqueda. Es a discreción de cada proveedor de motores de búsqueda decidir si su página se mostrará como un resultado de búsqueda mejorado o no en sus páginas de resultados de búsqueda ".
Las Herramientas para webmasters de Google agregaron recientemente la capacidad de rastrear qué tan bien se están indexando sus datos estructurados. No muestra qué datos estructurados se están utilizando en los resultados de búsqueda, pero muestra qué datos se están indexando en qué páginas y también muestra los errores en sus datos estructurados.
itemscope itemtype="...">
No es válido en una página xhtml.
La sintaxis correcta es:
itemscope="itemscope" itemtype="...">