56
Schema for Bloggers: mitch canter, @studionashvegas http://www.binarychurch.com #nmxschema Structured Content, Demystified

Schema for Bloggers: Structured Content, Demystified

Embed Size (px)

DESCRIPTION

My Session from #NMX (New Media Expo) 2014 in Las Vegas, NV.

Citation preview

Page 1: Schema for Bloggers: Structured Content, Demystified

Schema for Bloggers:

mitch canter, @studionashvegashttp://www.binarychurch.com

#nmxschema

Structured Content, Demystified

Page 2: Schema for Bloggers: Structured Content, Demystified

Who is this guy?

Page 3: Schema for Bloggers: Structured Content, Demystified

Mitch Canter, International Man of Mystery

Senior Designer, Medicare.comChief Creative Mercenary, studionashvegas.comBlogger, binarychurch.comInternational Speaker

Page 4: Schema for Bloggers: Structured Content, Demystified

An Introduction

Page 5: Schema for Bloggers: Structured Content, Demystified

Two AudiencesThe Web Has

Page 6: Schema for Bloggers: Structured Content, Demystified

humans…

Page 7: Schema for Bloggers: Structured Content, Demystified

…and robots!

Page 8: Schema for Bloggers: Structured Content, Demystified

Write For BothAs content creators, we have to

Page 9: Schema for Bloggers: Structured Content, Demystified

…However…

Page 10: Schema for Bloggers: Structured Content, Demystified

Confused.Sometimes the robots get

Page 11: Schema for Bloggers: Structured Content, Demystified

Two OptionsWe ultimately have

Page 12: Schema for Bloggers: Structured Content, Demystified
Page 13: Schema for Bloggers: Structured Content, Demystified

“Keyword Stuffing”

Page 14: Schema for Bloggers: Structured Content, Demystified

Structure Our Content…or we

Page 15: Schema for Bloggers: Structured Content, Demystified

Schema…which is best done through

Page 16: Schema for Bloggers: Structured Content, Demystified

HTML Tags that webmasters can use to markup their pages in ways recognized by major search providers.

<schema>

Page 17: Schema for Bloggers: Structured Content, Demystified

Defining human-readable content into search-engine readable content.

<schema>

Page 18: Schema for Bloggers: Structured Content, Demystified

MicrodataThis is done through

Page 19: Schema for Bloggers: Structured Content, Demystified

Microdata is an HTML5 specification that allows machine-readable data to be embedded in

HTML documents.

microdata

Page 20: Schema for Bloggers: Structured Content, Demystified

ExampleLet’s look at an

Page 21: Schema for Bloggers: Structured Content, Demystified

Event…You’re hosting an

Page 22: Schema for Bloggers: Structured Content, Demystified

On Your Website……you have the date of the event

Page 23: Schema for Bloggers: Structured Content, Demystified

Know It’s An Event Date?…how does your website

Page 24: Schema for Bloggers: Structured Content, Demystified

Take Chances?It could get lucky, but why

Page 25: Schema for Bloggers: Structured Content, Demystified

Define The InformationThe better option is to

Page 26: Schema for Bloggers: Structured Content, Demystified

SchemaImplementing

Page 27: Schema for Bloggers: Structured Content, Demystified

Define The FormatStep 1

Page 28: Schema for Bloggers: Structured Content, Demystified

Define The Format<article>

<img src=“thumbnail.jpg” /><h1>

<a href=“#”>Title</a></h1>

<p>by: Author’s Name</p><p>Published on Month, Date Year</p><div class=“entry”>

<p>Content</p></div><p class=“categories”>Categories: Cat 1</p>

</article>

Page 29: Schema for Bloggers: Structured Content, Demystified

Define The Format<article itemscope itemtype="http://schema.org/Article”>

<img src=“thumbnail.jpg” /><h1>

<a href=“#”>Title</a></h1>

<p>by: Author’s Name</p><p>Published on Month, Date Year</p><div class=“entry”>

<p>Content</p></div><p class=“categories”>Categories: Cat 1</p>

</article>

Page 30: Schema for Bloggers: Structured Content, Demystified

Creates a new “item” – a group of name-value pairs associated with microdata and schematic markup.

itemscope

Page 31: Schema for Bloggers: Structured Content, Demystified

An attribute that defines the microdata vocabulary in use.

itemtype

Page 32: Schema for Bloggers: Structured Content, Demystified

Assign The PropertiesStep 2

Page 33: Schema for Bloggers: Structured Content, Demystified

Assign The Properties<article itemscope itemtype="http://schema.org/Article”>

<img src=“thumbnail.jpg” /><h1 itemprop=“name headline”>

<a href=“#”>Title</a></h1>

<p>by: Author’s Name</p><p>Published on Month, Date Year</p><div class=“entry”>

<p>Content</p></div><p class=“categories”>Categories: Cat 1</p>

</article>

Page 34: Schema for Bloggers: Structured Content, Demystified

An attribute that labels the properties of the content

itemprop

Page 35: Schema for Bloggers: Structured Content, Demystified

Assign The Properties<article itemscope itemtype="http://schema.org/Article”>

<img src=“thumbnail.jpg” /><h1 itemprop=“name headline”>

<a itemprop=“url” href=“#”>Title</a></h1>

<p>by: Author’s Name</p><p>Published on Month, Date Year</p><div class=“entry”>

<p>Content</p></div><p class=“categories”>Categories: Cat 1</p>

</article>

Page 36: Schema for Bloggers: Structured Content, Demystified

Assign The Properties<article itemscope itemtype="http://schema.org/Article”>

<img src=“thumbnail.jpg” /><h1 itemprop=“name headline”>

<a itemprop=“url” href=“#”>Title</a></h1>

<p>by: <a href=“[plus-url]”

itemprop=“author”>Author’s Name</a></p><p>Published on Month, Date Year</p><div class=“entry”>

<p>Content</p></div><p class=“categories”>Categories: Cat 1</p>

</article>

Page 37: Schema for Bloggers: Structured Content, Demystified

Assign The Properties<article itemscope itemtype="http://schema.org/Article”>

<img src=“thumbnail.jpg” /><h1 itemprop=“name headline”>

<a itemprop=“url” href=“#”>Title</a></h1>

<p>by: <a href=“[plus-url]” itemprop=“author”>Author’s

Name</a></p><p>Published on <span itemprop=“datePublished”>Month, Date

Year</span></p><div class=“entry”>

<p>Content</p></div><p class=“categories”>Categories: Cat 1</p>

</article>

Page 38: Schema for Bloggers: Structured Content, Demystified

Assign The Properties<article itemscope itemtype="http://schema.org/Article”>

<img src=“thumbnail.jpg” /><h1 itemprop=“name headline”>

<a itemprop=“url” href=“#”>Title</a></h1>

<p>by: <a href=“[plus-url]” itemprop=“author”>Author’s

Name</a></p><p>Published on <span itemprop=“datePublished”>Month, Date

Year</span></p><div class=“entry” itemprop=“articleBody”>

<p>Content</p></div><p class=“categories”>Categories: Cat 1</p>

</article>

Page 39: Schema for Bloggers: Structured Content, Demystified

Assign The Properties<article itemscope itemtype="http://schema.org/Article”>

<img src=“thumbnail.jpg” /><h1 itemprop=“name headline”>

<a itemprop=“url” href=“#”>Title</a></h1>

<p>by: <a href=“[plus-url]” itemprop=“author”>Author’s

Name</a></p><p>Published on <span itemprop=“datePublished”>Month, Date

Year</span></p><div class=“entry” itemprop=“articleBody”>

<p>Content</p></div><p class=“categories”>Categories: <span itemprop=“keywords”>

Cat 1</span></p></article>

Page 40: Schema for Bloggers: Structured Content, Demystified

Assign The Properties<article itemscope itemtype="http://schema.org/Article”>

<img src=“thumbnail.jpg” /><h1 itemprop=“name headline”>

<a itemprop=“url” href=“#”>Title</a></h1>

<p>by: <a href=“[plus-url]” itemprop=“author”>Author’s

Name</a></p><p>Published on <span itemprop=“datePublished”>Month, Date

Year</span></p><div class=“entry” itemprop=“articleBody”>

<p>Content</p></div><p class=“categories”>Categories: <span itemprop=“keywords”>

Cat 1</span></p></article>

Page 41: Schema for Bloggers: Structured Content, Demystified

Types of Schema

Page 42: Schema for Bloggers: Structured Content, Demystified

An article, such as a news articleor piece of investigative report.

http://www.schema.org/Article

Article

Page 43: Schema for Bloggers: Structured Content, Demystified

A review of a restaurant, movie, or store.

http://www.schema.org/Review

Review

Page 44: Schema for Bloggers: Structured Content, Demystified

An event happening at a certain timein a certain location.

http://www.schema.org/Event

Event

Page 45: Schema for Bloggers: Structured Content, Demystified

A person (living, dead, undead, or fictional).

http://www.schema.org/Person

Person

Page 46: Schema for Bloggers: Structured Content, Demystified

Video, Audio, or other non-text embeddable media.(note: each media has a separate schema)

http://www.schema.org/AudioObjecthttp://www.schema.org/VideoObject

Embeds

Page 47: Schema for Bloggers: Structured Content, Demystified

Books, Movies, Recipes, or other creative works.(note: each type has a separate schema)

http://www.schema.org/Bookhttp://www.schema.org/Moviehttp://www.schema.org/Recipe

Creative

Page 48: Schema for Bloggers: Structured Content, Demystified

Google+Last question: Why bother with

Page 49: Schema for Bloggers: Structured Content, Demystified

Why Google+?<article itemscope itemtype="http://schema.org/Article”>

<img src=“thumbnail.jpg” /><h1 itemprop=“name headline”>

<a itemprop=“url” href=“#”>Title</a></h1>

<p>by: <a href=“[plus-url]” itemprop=“author”>Author’s

Name</a></p><p>Published on <span itemprop=“datePublished”>Month, Date

Year</span></p><div class=“entry” itemprop=“articleBody”>

<p>Content</p></div><p class=“categories”>Categories: <span itemprop=“keywords”>

Cat 1</span></p></article>

Page 50: Schema for Bloggers: Structured Content, Demystified

Google AuthorshipThis allows you to claim your

Page 51: Schema for Bloggers: Structured Content, Demystified

Rich Text Snippit…which gets you a

Page 52: Schema for Bloggers: Structured Content, Demystified

Verify Your EmailStep 1 (if your site and email address share a domain):

https://plus.google.com/authorship

Page 53: Schema for Bloggers: Structured Content, Demystified

Link to Google+ ProfileStep 1 (if your have a Gmail or Outlook address):

<a href=“[profile-url]?rel=author”>Real Name</a>

Page 54: Schema for Bloggers: Structured Content, Demystified

Link to Site in Google+Step 2

…under “Contributes To…”

Page 55: Schema for Bloggers: Structured Content, Demystified

Questions?

Page 56: Schema for Bloggers: Structured Content, Demystified

Thanks!

Twitter: http://www.twitter.com/studionashvegas/Google+: http://plus.google.com/+MitchCanterFacebook: https://www.facebook.com/mitchcanterspeaksURL: http://www.binarychurch.comDesign: http://www.studionashvegas.com