link itemprop attribute
The itemprop attribute on the link element:
- → allows you to add a property to an item
- is a global attribute → can be applied on all html elements;
- when applied on <link> element creates an invisible link helping search engine spiders to understand more about that item
microdata : the itemprop attribute
The itemprop attribute is part of the microdata concept.
In the video tutorial below we make a part of our content machine-readable (human-readable is already) by adding microdata on html elements, including on link element and explain the microdata concept.
microdata = a micro(small) data about the existing data on page, easily readable by user agents (search engine spiders)
The purpose of using microdata is to provide more information about your page's content to the search engine spiders, thus enriching the browsing experience of web users.
Examples
| <link | attribute | = | "value(s)" | > | Examples | ||
|---|---|---|---|---|---|---|---|
| 12. | itemprop | = | item_property | < itemprop="url" href="http://www.imdb.com/name/nm0185819/"> |
Video demonstration link itemprop attribute
HTML5 link itemprop attribute Tutorial
| min | video details |
|---|---|
| 00:16 | in this video tutorial we will make a part of the content of an HTML5 page machine-readable too, by adding microdata on HTML elements: link.. |
| 00:23 | microdata = a micro(small) data about the existing data on page, easily readable by user agents (search engine spiders) |
| 00:29 | The purpose of using microdata is to provide more information about your page's content to the search engine spiders, thus enriching the browsing experience of web users. |
| 00:39 | This part of code is human-readable and understandable. We, the humans, know that: - we are talking about a person - Daniel Craig represents the name of the person - Actor represents the profession (job) of that person - and we refer to that Daniel Craig who performed the James Bond's role in Skyfall, Quantum of Solace... |
| 01:05 | so, for us, the humans, it's clear; but what about the machines ? The search engine spiders? what do they 'understand'? How can we connect all this information in a logical manner so a spider to be able to make the same connections we did?? |
| 01:14 | microdata is the answer |
| 01:18 | Adding microdata - Process: 1. create the item through itemscop attribute 2. specify the item type through itemtype attribute 3. add properties for that item through itemprop attribute |
| 01:33 | schema.org provides different item types |
| 01:39 | the text on our page 'Actor Daniel Craig' refers to a person → the item we created through itemscop attribute will pe Person type |
| 01:47 | copy ⁄ pasting the url of this type as value of the itemtype attribute |
| 01:50 | Recap: so far we've created the item and supply item's type url; now we can strat adding properties to this item = Person |
| 01:52 | 'Person' type has lots of properties which can be added to our item in our HTML5 document |
| 01:58 | the text 'Daniel Craig' represents a name → the corresponding property is: name which is added as value of the itemprop attribute |
| 02:03 | note: each property has a description: e.g. the description of 'name' property is: "The name of the item" |
| 02:20 | the text 'Actor' represents a profession ⁄ job → the corresponding property is: jobTitle which is added as value of the itemprop attribute applied to the text 'Actor' |
| 02:40 | in our HTML5 document we refer to this Daniel Craig, so we can add this link to our page, which will be invisible to users (won't display in browser) but visible to spiders |
| 02:49 | the corresponding property for the IMDB url is: url |
| 02:54 | adding the corresponding property for the IMDB url, url, to our item through itemprop attribute on a link element, thus creating a visible link for search engine spiders only |
| 03:06 | INTERPRETATION: <span itemprop="name">Daniel Craig<⁄span> the search engine spiders will associate the text 'Daniel Craig' with the value of the name property, which is "The name of the item", and since the item = the Person → Daniel Craig is the name of the Person (for search engine spiders too, not only for us) |
| 03:24 | INTERPRETATION: <span itemprop="jobTitle">Actor<⁄span> the search engine spiders will associate the text 'Actor' with the value (description) of the jobTitle property, which is "The jonb title of the person", and since the Person = Daniel Craig → Daniel Craig job's title is: actor (for search engine spiders too, not only for us) |
| 03:37 | INTERPRETATION: <link itemprop="http://www.imdb.com/name/nm0185819/"> the search engine spiders will associate the IMDB url with the description of the url property, which is "the url of the item", and since the item = the Person and the Person's name is Daniel Craig who's job is: actor → search engine spiders will 'understand better' which Daniel Craig we are referring to in our document |