itemscope

itemscope es unatributo global booleano que define el scope asociado del metadata. Especificando el atributoitemscope en un elemento crea un nuevo item, cuyos resultados estan en los numeros de pares name-value asociados con el elemento. Un atributo relativo,itemtype, es usado para especificar el URL valido de un medio/recipe (como lo esschema.org) que describe que el item es de propiedad contextual. En cada uno de los siguientes ejemplos, el medio/recipe es deschema.org.

Todos los elementos HTML pueden tener un atributoitemscope especifico. Un elementoitemscope no tiene un asociadoitemtype pero tiene un sociadoitemref.

Nota:Encuentra mas acerca del atributoitemtype enhttp://schema.org/Thing

Ejemplo simple

HTML

El siguiente ejemplo especifica que el atributoitemscope. El ejemplo especificado en elitemtype es "http://schema.org/Movie", y especifica tres atributositemprop relativos.

html

<div itemscope itemtype="http://schema.org/Movie">  <h1 itemprop="nombre">Avatar</h1>  <span    >Director: <span itemprop="director">James Cameron</span> (born August 16,    1954)</span  >  <span itemprop="genero">Ciencia ficcion</span>  <a href="https://youtu.be/0AY1XIkX7bY" itemprop="trailer">Trailer</a></div>

Esctructura de informacion

La siguiente tabla muestran los datos esctructurados mostrados en el anterior ejemplo.

itemscope	Itemtype	Movie
	itemprop	(itemprop name)	(itemprop value)
	itemprop	director	James Cameron
	itemprop	genero	Ciencia Ficcion
	itemprop	nombre	Avatar
	itemprop	https://youtu.be/0AY1XIkX7bY	Trailer

`itemscope` Atributos ID

Cuando especificas el atributoitemscope para un elemento, un nuevo item es creado. El item consiste de un grupo de pares de name-value. Para elementos con un atributoitemscope y un atributoitemtype, podrias tambien especificar unid attribute. Puedes usar el atributoid para establecer un identificador global para el nuevo item. Un identificador global permite que los items relativos a otros items encuentren paginas atraves de la Web.

Ejemplo

Hay 4 atributositemscope en el siguiente ejemplo. Cada atributoitemscope establecen el scope correspondiente a sus atributositemtype. Elitemtypes,Recipe,AggregateRating, yNutritionInformation en el siguiente ejemplo son parte de la informacion estructura por medio deschema.org, se especifico el primeritemtype,http://schema.org/Recipe.

html

<div itemscope itemtype="http://schema.org/Recipe"><h2 itemprop="name">Grandma's Holiday Apple Pie</h2><img itemprop="image" src="https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg" width="50" height="50"/><p>By <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">Carol Smith</p></span></span><p>Published: <time datetime="2009-11-05" itemprop="datePublished">November 5, 2009</p></time><span itemprop="description">This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.<br></span> <span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> <span itemprop="ratingValue">4.0</span> stars based on <span itemprop="reviewCount">35</span> reviews<br></span>Prep time: <time datetime="PT30M" itemprop="prepTime">30 min<br></time> Cook time: <time datetime="PT1H" itemprop="cookTime">1 hour<br></time> Total time: <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min<br></time> Yield: <span itemprop="recipeYield">1 9" pie (8 servings)<br></span> <span itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation"> Serving size: <span itemprop="servingSize">1 medium slice<br></span> Calories per serving: <span itemprop="calories">250 cal<br></span> Fat per serving: <span itemprop="fatContent">12 g<br></span></span><p>Ingredients:<br>  <span itemprop="recipeIngredient">Thinly-sliced apples: 6 cups<br></span>  <span itemprop="recipeIngredient">White sugar: 3/4 cup<br></span> ... </p>Directions: <br>  <div itemprop="recipeInstructions">    1. Cut and peel apples<br>    2. Mix sugar and cinnamon. Use additional sugar for tart apples. <br>    ...  </div></div>

Los siguientes son un ejemplo renderizado resultado del codigo del anterior ejemplo.

Structured data

itemscope	itemtype	Medio/Recipe
	itemprop	name	Grandma's Holiday Apple Pie
	itemprop	image	https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg
	itemprop	datePublished	2009-11-05
	itemprop	description	This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.
	itemprop	prepTime	PT30M
	itemprop	cookTime	PT1H
	itemprop	totalTime	PT1H30M
	itemprop	recipeYield	1 9" pie (8 servings)
	itemprop	recipeIngredient	Thinly-sliced apples: 6 cups
	itemprop	recipeIngredient	White sugar: 3/4 cup
	itemprop	recipeInstructions	1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples .
	itemprop	author [Person]
	itemprop	name	Carol Smith
itemscope	itemprop[itemtype]	aggregateRating [AggregateRating]
	itemprop	ratingValue	4.0
	itemprop	reviewCount	35
itemscope	itemprop[itemtype]	nutrition [NutritionInformation]
	itemprop	servingSize	1 medium slice
	itemprop	calories	250 cal
	itemprop	fatContent	12 g

Nota:Una herramienta practica para extraer estructuras microdata del HTML esStructured Data Testing Tool de Google. Pruebalo en el HTML del ejemplo anterior.