how to implement schemas using schema.org on your website >> smx london 2015

May 21, 2015

Schema Modelling

Sante J. Achille

Search Marketing Consultant

@sjachille

From Documents & Data To Information & Entities

searchmarketingexpo.com@sjachille

#SMX #22B

• Search Marketing Specialist

• Has analysed and optimized countless websites of all sizes and types in 20 years of professional activity

• Loves proverbs

• His motto: Why Be Normal?

http://achille.name/

Today I’m going to show you how to take your website to a New Level with Schema Markup

https://www.evernote.com/pub/sjachille/cv




#SMX #22B

Data

Information

What is the biggest challenge Search Engines face?

“Reduce Uncertainty” and “Reduce Equivocality”


#SMX #22B

Data

Information

Requirements

Available

Consistent

Unambiguous

Reliable


#SMX #22B

Data

Information

Attributes

Properties (person, animal, or thing)

Characteristics (dimensions, weight, name, … )

Features (aspect, peculiarities, … )

Location(Continent, Country, City … )


#SMX #22B

Data

Information

Entity


#SMX #22B

http://schema.org/docs/full.html








#SMX #22B

“Your web pages have an underlying meaning that people understand when they read the web pages.

But search engines have a limited understanding of what is being discussed on those pages.”

Why Use Structured Data?


#SMX #22B

Why Use Structured Data?

By adding additional tags to the HTML of your web pages … you can help search engines and other applications better understand your content and display it in a useful, relevant way.


#SMX #22B

Itemscope & Itemtype

<div><h1>Avatar</h1>Director: James Cameron (born August 16, 1954) Science fiction<a href="../movies/avatar-theatrical-trailer.html">Trailer</a></div>

“To begin, identify the section of the page that is "about" the movie Avatar. To do this, add the itemscope element to the HTML tag that encloses information about the item, like this:”


#SMX #22B


<div itemscope><h1>Avatar</h1>Director: James Cameron (born August 16, 1954) Science fiction<a href="../movies/avatar-theatrical-trailer.html">Trailer</a></div>

By adding itemscope, we are specifying that the HTML contained in the <div>...</div> block is about a particular item.


#SMX #22B


<div itemscope itemtype=“http://schema.org/Movie”><h1>Avatar</h1>Director: James Cameron (born August 16, 1954)Science fiction<a href="../movies/avatar-theatrical-trailer.html">Trailer</a></div>

But it's not all that helpful to specify an item is being discussed without specifying what kind of an item it is. We can specify the type of item using the itemtype attribute immediately after the itemscope.


#SMX #22B


<div itemscope itemtype=“http://schema.org/Movie”><h1 itemprop=“name”>Avatar</h1>Director: <span itemprop=“director”> James Cameron</span> (born August 16, 1954) Science fiction<a href="../movies/avatar-theatrical-trailer.html” itemprop=“trailer”>Trailer</a></div>We can give search engines additional information: Movies have properties such as actors, director, ratings. The itemprop attribute is used, for example, to identify the director of a movie, and the URL of the trailer…


#SMX #22B


#SMX #22B

Nesting…Before…

<div itemscope itemtype="http://schema.org/Movie"><h1 itemprop=“name”>Avatar</h1> Director: <span itemprop=“director”> James Cameron</span> (born August 16, 1954) Science fiction <a href="../movies/avatar-theatrical-trailer.html” itemprop=“trailer”>Trailer</a></div>


#SMX #22B

Nesting…After…

<div itemscope itemtype="http://schema.org/Movie"><h1 itemprop="name">Avatar</h1>

<div itemprop="director" itemscope itemtype="http://schema.org/Person">

Director: <span itemprop="givenName"> James</span> <span itemprop="familyName">Cameron</span> (born August 16, 1954)

<meta itemprop="birthDate" content ="1954-08-16" /></div>

<span itemprop="genre">Science fiction</span> <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a></div>


#SMX #22B

https://developers.google.com/structured-data/testing-tool/


#SMX #22B


#SMX #22B

Using Meta Tags with Schema

“Sometimes, a web page has information that would be valuable to mark up, but the information can't be marked up because of the way it appears on the page.”

http://schema.org/docs/gs.html#advanced

This technique should be used sparingly. Only use meta with content for information that cannot otherwise be marked up.

http://schema.org/docs/gs.html%23advanced







#SMX #22B

Schema Markup Model for IMAGES


#SMX #22B

Schema Markup for Documents<div itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject"><meta itemprop="description" content="I-797, Notice of Action: I-601, application for travel document: approval notice. " /><div itemprop="exampleOfWork" itemscope="" itemtype="http://schema.org/CreativeWork" ><meta itemprop="isBasedOnUrl" content="http://www.uscis.gov/i-601" /></div> [caption]<a itemprop="url" href="XXX"><img itemprop="image" src="XXX" alt="XXX" width="" height="" class="XXX" /></a> [/caption]</div>


#SMX #22B

It will take a number of iterations before you get this right and fit it into your corporate CMS

The more you markup, the better it is!

Test test and test again!


#SMX #22B

how to implement schemas using schema.org on your website >> smx london 2015

Internet