Semantic data is increasingly important, but can be difficult to add to a site. This talk given at WordSesh 2013 shows WordPress site owners some easy ways that they can add semantic data to their sites...and make the great Google happy!

1. How to add semantic data to
your WP site
in 20 minutes or less!
By: Miriam Schwab
WordSesh 2013
WordSesh 2

2. WordSesh 2

3. What is Semantic Data?
WordSesh 2

4. I know you
are
important.
<h1>Jane Smith, CEO,
Widgets Inc. </h1>
<h1>Basic White Cake</h1>
WordSesh 2

5. <div itemscope itemtype="http://schema.org/Person"
>
<div itemprop="name"><strong>Jane
Smith</strong></div>
<div itemscope itemtype="http://schema.
org/Organization"><span itemprop="name">Widgets
Inc.</span></div>
<div itemprop="jobtitle">CEO</div>
</div>
WordSesh 2

6. I know you
are a
person.
WordSesh 2

7. WordSesh 2

8. <div class="entry-content">
<p>3 cups flour</p>
<p>2 cups sugar</p>
<p>1 tbsp. baking powder</p>
<p>1/2 tsp. salt</p>
<p>1 cup vegetable oil</p>
<p>1 cup orange juice or water</p>
<p>1 tsp. vanilla extract</p>
<p>4 large eggs</p>
<p>1 cup oil</p>
<p>Preheat oven to 350 F. Grease a 9 by 13 inch baking pan. Set aside.</p>
<p>Combine flour, sugar, baking powder, and salt in a large mixing bowl.
Stir until well mixed.</p>
<p>Add oil, juice or water, vanilla and eggs. Mix until well blended.</p>
<p>At this point you can mix in almost anything you want: sliced apples
mixed with sugar and cinnamon, chocolate chips, etc. It all works.</p>
<p>Pour into prepared pan and bake for 50 minutes or until an inserted
toothpick comes out clean.</p>
WordSesh 2
</div>

9. <div class="entry-content">
<div id="schema_block" class="schema_recipe"><div itemscope itemtype="http:
//schema.org/Recipe"><img class="schema_image" itemprop="image" src="http://upload.wikimedia.
org/wikipedia/commons/e/e6/Strawberry_Cake_Cropped.jpg" alt="Basic White Cake" /><div class="
schema_name header_type" itemprop="name">Basic White Cake</div><div class="schema_byline">By <span
class="schema_strong" itemprop="author">Miriam Schwab</span> on <span class="schema_pubdate"><meta
itemprop="datePublished" content="2013-12-06">12/06/2013</span></div><div class="
schema_description" itemprop="description">This is a very versatile, simple cake, that can be used
for almost any occasion.</div><div><p class="stacked"><span class="schema_strong">Prep Time:
</span> <meta itemprop="prepTime" content="PT20M">20 minutes</p><p class="stacked"><span class="
schema_strong">Cook Time:</span> <meta itemprop="cookTime" content="PT50M">50 minutes</p><p
class="stacked"><span class="schema_strong">Yield:</span> <meta itemprop="recipeYield"
>10</p></div><div><span class="schema_strong">Ingredients:</span><ul><li><span itemprop="
ingredients">3 cups flour</span></li><li><span itemprop="ingredients">2 cups
sugar</span></li><li><span itemprop="ingredients">1 tbsp. baking powder</span></li><li><span
itemprop="ingredients">1/2 tsp. salt</span></li><li><span itemprop="ingredients">1 cup vegetable
oil</span></li><li><span itemprop="ingredients">1 cup orange juice or water</span></li><li><span
itemprop="ingredients">1 tsp. vanilla extract</span></li><li><span itemprop="ingredients">4 large
eggs</span></li></ul></div><div class="schema_instructions" itemprop="recipeInstructions">
<span class="schema_strong">Instructions:</span><br />Preheat oven
to 350 F. Grease a 9 by 13 inch baking pan. Set aside. Combine flour, sugar, baking powder, and
salt in a large mixing bowl. Stir until well mixed. Add oil, juice or water, vanilla and eggs. Mix
until well blended. At this point you can mix in almost anything you want: sliced apples mixed
with sugar and cinnamon, chocolate chips, etc. It all works. Pour into prepared pan and bake for
50 minutes or until an inserted toothpick comes out clean.
</div></div></div>
</div>
WordSesh 2

10. I know you are
an easy and
versatile recipe.
WordSesh 2

11. Schema.org Microdata
● itemscope - new item within
● itemtype - type of item
● itemprop - gives the item properties and values
WordSesh 2

12. Other types of semantic markup
WordSesh 2

13. Why go semantic?
Because Google said so.
WordSesh 2

14. “On-page markup helps search
engines understand the information on
webpages and provide richer results.”
- Schema.org FAQ, Google
WordSesh 2

15. WordSesh 2

16. Matt Cutts: Will semantic data help my site rank
higher?
WordSesh 2

17. WordSesh 2

18. Ok, there are other reasons too
Accessibility
WordSesh 2
Semantic Data
SEO

19. Getting started with Schema
WordSesh 2

20. WordSesh 2

21. WordSesh 2

22. WordSesh 2

23. WordSesh 2

24. WordSesh 2

25. WordSesh 2

26. WordSesh 2

27. WordSesh 2
https://www.google.com/webmasters/markup-helper/

28. WordSesh 2

29. WordSesh 2

30. WordSesh 2

31. WordSesh 2

32. WordSesh 2

33. Adding social semantic data
Facebook, Google+, Twitter
WordSesh 2

34. Facebook Open Graph
WordSesh 2

35. <head>
<meta property="og:title" content="10 ways to
add Facebook Open Graph tags to your site" />
<meta property="article:publisher" content="
https://www.facebook.com/cnn" />
</head>
WordSesh 2

36. Twitter Cards
WordSesh 2

37. <head>
<meta name="twitter:card"
content="summary"/>
<meta name="twitter:site"
content="@wordsesh"/>
</head>
WordSesh 2

38. Google Authorship
WordSesh 2

39. https://plus.google.com/+YourProfile/about
WordSesh 2

40. https://plus.google.
com/b/115803197769204635376/+YourC
ompany/about
WordSesh 2

41. <head>
<link rel="publisher" href="https://plus.
google.com/115803197769204635376"/>
</head>
WordSesh 2

42. WordSesh 2

43. WordSesh 2

44. WordSesh 2

45. WordSesh 2

46. WordSesh 2

47. WordSesh 2

48. WordSesh 2

49. WordSesh 2

50. WordSesh 2

51. WordSesh 2

52. WordSesh 2

53. WordSesh 2

54. WordSesh 2

55. Google Structured Data Testing Tool
WordSesh 2

56. WordSesh 2

57. WordSesh 2

58. HTML5 semantic data
● rel=”prev”, rel=”
next”
● rel=”canonical”
● breadcrumb
microdata
● And more...
WordSesh 2
<section>
<header>
<footer>
<article>
<hgroup>
<aside>
<nav>

59. WordSesh 2

60. Thanks!
Miriam Schwab
@miriamschwab
miriam@illuminea.com
WordSesh 2