Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Understanding & Facilitating Semantic Search - #SearchFest 2016

5,592 views

Published on

Learn about semantic search and, most importantly, how to facilitate it! My talk at SearchFest will dive deep into the implementation angle so that marketers and developers can not only learn about why structured data is important, but how to implement it on their sites using microdata and/or JSON-LD.

Published in: Marketing

Understanding & Facilitating Semantic Search - #SearchFest 2016

  1. 1. @SEMpdx #SearchFest @mike_arnesen upbuild.io Understanding and Facilitating Semantic Search
  2. 2. @SEMpdx #SearchFest @mike_arnesen upbuild.io Get this deck bit.ly/structure-all-the-data
  3. 3. @SEMpdx #SearchFest @mike_arnesen upbuild.io Hey SearchFest 2016!!! Mike Arnesen Founder & CEO at UpBuild Semantic Markup Geek
  4. 4. @SEMpdx #SearchFest @mike_arnesen upbuild.io Hey SearchFest 2016!!! <link itemprop="sameAs" href="..." />
  5. 5. @SEMpdx #SearchFest @mike_arnesen upbuild.io Hey SearchFest 2016!!! <link itemprop="sameAs" href="..." />
  6. 6. @SEMpdx #SearchFest @mike_arnesen upbuild.io If you know HTML, you know semantic markup! It’s Just Semantics!
  7. 7. @SEMpdx #SearchFest @mike_arnesen upbuild.io An Understanding of HTML W3Schools http://www.w3schools.com/html/ Code Academy https://www.codecademy.com/learn/web Prerequisites
  8. 8. @SEMpdx #SearchFest @mike_arnesen upbuild.io But HTML is Just the Beginning <h1>SearchFest</h1>
  9. 9. @SEMpdx #SearchFest @mike_arnesen upbuild.io But HTML is Just the Beginning WEBPAGE has the property LEVEL 1 HEADING which is equal to SEARCHFEST.
  10. 10. @SEMpdx #SearchFest @mike_arnesen upbuild.io Ambiguity Strikes! Is it… an article about the subject, “SearchFest”?
  11. 11. @SEMpdx #SearchFest @mike_arnesen upbuild.io Ambiguity Strikes! Is it… a page about an org. called “SearchFest”?
  12. 12. @SEMpdx #SearchFest @mike_arnesen upbuild.io Ambiguity Strikes! Is it… an offer to sell tickets for “SearchFest”?
  13. 13. @SEMpdx #SearchFest @mike_arnesen upbuild.io Ambiguity Strikes! Is it… discussing this “SearchFest” or some other “SearchFest”?
  14. 14. @SEMpdx #SearchFest @mike_arnesen upbuild.io Ambiguity Strikes! Is it… a list of events on a page where “SearchFest” is one of many topics.
  15. 15. @SEMpdx #SearchFest @mike_arnesen upbuild.io Ambiguity Strikes! Is it… a piece about an epic pilgrimage of wanderers searching for inner meaning?
  16. 16. @SEMpdx #SearchFest @mike_arnesen upbuild.io Ambiguity Strikes! Is it… a piece about an epic pilgrimage of wanderers searching for inner meaning?
  17. 17. @SEMpdx #SearchFest @mike_arnesen upbuild.io Ambiguity Strikes! Or is it just about this thing we’re at RIGHT NOW?!
  18. 18. @SEMpdx #SearchFest @mike_arnesen upbuild.io Semantic Markup vs. HTML Semantic markup takes us a level deeper than good old HTML markup
  19. 19. @SEMpdx #SearchFest @mike_arnesen upbuild.io Semantic Markup vs. HTML Semantic markup takes us a level deeper than good old HTML markup
  20. 20. @SEMpdx #SearchFest @mike_arnesen upbuild.io a level deeper
  21. 21. @SEMpdx #SearchFest @mike_arnesen upbuild.io
  22. 22. @SEMpdx #SearchFest @mike_arnesen upbuild.io
  23. 23. @SEMpdx #SearchFest @mike_arnesen upbuild.io
  24. 24. @SEMpdx #SearchFest @mike_arnesen upbuild.io
  25. 25. @SEMpdx #SearchFest @mike_arnesen upbuild.io to achieve a greater level of detail & specificity! Semantic markup allows us
  26. 26. @SEMpdx #SearchFest @mike_arnesen upbuild.io to achieve a greater level of detail and specificity! Semantic markup allows us to focus in on a single point
  27. 27. @SEMpdx #SearchFest @mike_arnesen upbuild.io no common language A web without semantic markup has
  28. 28. @SEMpdx #SearchFest @mike_arnesen upbuild.io Fashion axe brooklyn truffaut, poutine tacos farm-to-table readymade selfies pop-up. Mlkshk ennui fashi axe offal, ugh flannel ramps listicle. Locavore kale chips pickled selvage PBR&B. Slow-carb scenester chambray four dollar toast authentic, dreamcatcher church-key polaroid fanny pack PBR&B. Freegan for tumblr, narwhal cornhole you probably haven't heard of them beard 8-bit celiac. Put a bird on it salvia kog listicle selfies venmo, single-origin coffee humblebrag hashtag chambray kitsch vegan pug mlkshk. Gastro vice forage umami, mumblecore vegan messenger bag retro pinterest you probably haven't heard of them organic cornhole art party leggings. Fixie fap mustache, authentic knausgaard butcher scenester gentrify hammock cred man bun. Single-origin coffee art party cold-pressed, iPhone direct trade leggings next lev taxidermy pop-up blog squid thundercats disrupt. Mustache synth green juice, DIY tote bag farm-to-table humblebrag knausgaard ethical dreamcatcher squid banjo. Keffiyeh fixie flexitarian, umami venmo godar poutine 8-bit chartreuse chillwave. Banjo deep v ethical you probably haven't heard of them, man braid p
  29. 29. @SEMpdx #SearchFest @mike_arnesen upbuild.io Semantic markup is like a Rosetta Stone
  30. 30. @SEMpdx #SearchFest @mike_arnesen upbuild.io Again, common language <h1>SearchFest</h1> <div>SearchFest</h1> <p>Search<span class="blue">FEST</></p> <h2>SearchFest</h2> <a href="/">SearchFest</a>
  31. 31. @SEMpdx #SearchFest @mike_arnesen upbuild.io Again, common language <h1 itemprop="name">SearchFest</h1> <div itemprop="name">SearchFest</h1> <p itemprop="name">Search<span class="blue">FEST</></p> <h2 itemprop="name">SearchFest</h2> <a itemprop="name" href="/">SearchFest</a>
  32. 32. @SEMpdx #SearchFest @mike_arnesen upbuild.io
  33. 33. @SEMpdx #SearchFest @mike_arnesen upbuild.io Data Models vs. Vocabularies Microdata RFDa Your Data schema.org JSON-LD Dublin Core GoodRelations
  34. 34. @SEMpdx #SearchFest @mike_arnesen upbuild.io Schema.org Our dictionary of choice.
  35. 35. @SEMpdx #SearchFest @mike_arnesen upbuild.io In Your Toolbox - Itemscope - Itemtype - Itemprop
  36. 36. @SEMpdx #SearchFest @mike_arnesen upbuild.io In Your Toolbox - Itemscope - Itemtype - Itemprop - Itemref - Itemid
  37. 37. @SEMpdx #SearchFest @mike_arnesen upbuild.io What is Itemscope? “I’ve got something to say!”
  38. 38. @SEMpdx #SearchFest @mike_arnesen upbuild.io What is Itemtype? Now that you have everyone’s attention… “Okay, I want to talk about _______.”
  39. 39. @SEMpdx #SearchFest @mike_arnesen upbuild.io What is Itemprop? All the details about what you just said you’d be talking about. “And another thing!” You can (and will) use many itemprops.
  40. 40. @SEMpdx #SearchFest @mike_arnesen upbuild.io What is Itemprop? These are specific data points about the thing (itemtype) you’re talking about.
  41. 41. @SEMpdx #SearchFest @mike_arnesen upbuild.io What is Itemprop? Many itemprops appear across all itemtypes. NAME DESCRIPTION URL IMAGE
  42. 42. @SEMpdx #SearchFest @mike_arnesen upbuild.io What is Itemprop? Others are unique to one or a few itemtypes. DIRECTOROFFERS DURATION MANUFACTURERSKU CONTAINSPLACE BREADCRUMB ARRIVALBUSSTOP BIRTHDATE
  43. 43. @SEMpdx #SearchFest @mike_arnesen upbuild.io What are Embedded Entities? Itemscopes within itemprops!
  44. 44. @SEMpdx #SearchFest @mike_arnesen upbuild.io
  45. 45. @SEMpdx #SearchFest @mike_arnesen upbuild.io
  46. 46. @SEMpdx #SearchFest @mike_arnesen upbuild.io What are Embedded Entities? An Event entity is declared with an itemtype. A PostalAddress entity is, too.
  47. 47. @SEMpdx #SearchFest @mike_arnesen upbuild.io What are Embedded Entities? An Event entity has a location itemprop which should be an PostalAddress. The value of the parent entity’s itemprop is another entity embedded within in.
  48. 48. @SEMpdx #SearchFest @mike_arnesen upbuild.io Event Location Place City State Name SearchFest Name Address The Sentinel Hotel Portland Oregon
  49. 49. @SEMpdx #SearchFest @mike_arnesen upbuild.io Implementation That’s all well and good, but how do we do it?
  50. 50. @SEMpdx #SearchFest @mike_arnesen upbuild.io Finding Your Schema Use schema.org/docs/schemas.html
  51. 51. @SEMpdx #SearchFest @mike_arnesen upbuild.io Finding Your Schema A) Use “Full List of Types” B) Find a good starting point and drill down as much as required
  52. 52. @SEMpdx #SearchFest @mike_arnesen upbuild.io
  53. 53. @SEMpdx #SearchFest @mike_arnesen upbuild.io
  54. 54. @SEMpdx #SearchFest @mike_arnesen upbuild.io
  55. 55. @SEMpdx #SearchFest @mike_arnesen upbuild.io Pro Tips ● More is better - except hidden text ● Pay attention to “Text” vs. “Expected Types” ● Test with multiple tools
  56. 56. @SEMpdx #SearchFest @mike_arnesen upbuild.io No Hidden Text Don’t apply semantic markup to text that’s not visible to users. When it’s okay: Dates/times Implicit information References to entities
  57. 57. @SEMpdx #SearchFest @mike_arnesen upbuild.io Text vs. Expected Types Some itemprops can just be text. Some itemprops must refer to other itemtypes(entities).
  58. 58. @SEMpdx #SearchFest @mike_arnesen upbuild.io Test with Multiple Tools Structured Data Testing Tool https://developers.google.com/structured-data/testing-tool/ Structured Data Linter http://linter.structured-data.org/
  59. 59. @SEMpdx #SearchFest @mike_arnesen upbuild.io Overcoming Common Issues Microdata (aka, inline markup) is restrictive and breaks easily. It’s not uncommon for information to be in different locations on the page.
  60. 60. @SEMpdx #SearchFest @mike_arnesen upbuild.io Enter Itemref & Itemid Bringing us all together
  61. 61. @SEMpdx #SearchFest @mike_arnesen upbuild.io Itemref & Itemid These tools allow you to bridge the gap between <divs>, structures, and even pages and websites.
  62. 62. @SEMpdx #SearchFest @mike_arnesen upbuild.io Itemref Reference data points to use as properties in your main entity. Itemid Link to other identified entities as properties for to your main entity.
  63. 63. @SEMpdx #SearchFest @mike_arnesen upbuild.io Using Itemref TL;DR - Create an independent “data blob” that you can refer to from your main entity using itemref.
  64. 64. @SEMpdx #SearchFest @mike_arnesen upbuild.io Using Itemref 1) Wrap a <span> or <div> around your data to form your data blob. Give it an itemscope but not an itemtype.
  65. 65. @SEMpdx #SearchFest @mike_arnesen upbuild.io Using Itemref 2) Markup the data you want to reference using an itemprop, just like it was part of your main entity. Give it a unique id as well.
  66. 66. @SEMpdx #SearchFest @mike_arnesen upbuild.io Using Itemref 3) On your main entity, add an itemref attribute to the main itemscope and itemtype declaration. Specify the unique id that you gave your “data blob”
  67. 67. @SEMpdx #SearchFest @mike_arnesen upbuild.io
  68. 68. @SEMpdx #SearchFest @mike_arnesen upbuild.io Using Itemid TL;DR - Give a whole entity a unique identifier that you can link to in order to fill out a property.
  69. 69. @SEMpdx #SearchFest @mike_arnesen upbuild.io Using Itemid 1) Markup the entity like normal. Start with itemscope and itemtype and then get into the specific itemprops.
  70. 70. @SEMpdx #SearchFest @mike_arnesen upbuild.io Using Itemid 2) Add itemid with a fragment identifier.
  71. 71. @SEMpdx #SearchFest @mike_arnesen upbuild.io Using Itemid 3) Within your main entity, include a <link> tag. Specify both the itemprop that the entity will relate to and the fragment identifier.
  72. 72. @SEMpdx #SearchFest @mike_arnesen upbuild.io
  73. 73. @SEMpdx #SearchFest @mike_arnesen upbuild.io Itemref & Itemid In Action Visit: http://codepen.io/mike_arnesen/pen/jqWzgb
  74. 74. @SEMpdx #SearchFest @mike_arnesen upbuild.io
  75. 75. @SEMpdx #SearchFest @mike_arnesen upbuild.io No email for the org! Missing offers!
  76. 76. @SEMpdx #SearchFest @mike_arnesen upbuild.io Email & offers have been integrated!
  77. 77. @SEMpdx #SearchFest @mike_arnesen upbuild.io JavaScript Object Notation for Linked Data
  78. 78. @SEMpdx #SearchFest @mike_arnesen upbuild.io Supported Types ● Organizations ○ Logos ○ Social Profiles ○ Contact Points ● Events ● Music & Movie Actions ● Articles & Recipes ● (NEW!) Reviews ● (NEW!) Products
  79. 79. @SEMpdx #SearchFest @mike_arnesen upbuild.io JSON-LD vs. Inline Microdata JSON-LD A method of encoding structured data using Javascript Object Notation Microdata A method of encoding structured data using HTML attributes
  80. 80. @SEMpdx #SearchFest @mike_arnesen upbuild.io JSON-LD vs. Inline Microdata Microdata RFDa Your Data schema.orgJSON-LD
  81. 81. @SEMpdx #SearchFest @mike_arnesen upbuild.io Breaking Down JSON-LD Context @context": "http://schema.org/" It’s the front half of “itemtype”. Set it and forget it.
  82. 82. @SEMpdx #SearchFest @mike_arnesen upbuild.io Breaking Down JSON-LD Type "@type": "Product" It’s the back half of “itemtype”. Set a new one anytime you need to create another entity - nested or separate.
  83. 83. @SEMpdx #SearchFest @mike_arnesen upbuild.io Breaking Down JSON-LD Properties & Values "name": "SearchFest", "startDate" : "2016-03-10T08:30"
  84. 84. @SEMpdx #SearchFest @mike_arnesen upbuild.io Breaking Down JSON-LD Nested Entities "location" : { "@type" : "Place", "sameAs" : "http://sentinelhotel.com", "name" : "The Sentinel Hotel" } No need redeclare @context; just start a new @type in {}
  85. 85. @SEMpdx #SearchFest @mike_arnesen upbuild.io ItemID!!! Using “@id” to identify entities "@type": "Organization", "@id": "#organizer", "name": "SEMpdx", This entity can now be referenced from within other entities!
  86. 86. @SEMpdx #SearchFest @mike_arnesen upbuild.io ItemID!!! This entity can now be referenced from within other entities! "organizer": { "@id": "#organizer" }
  87. 87. @SEMpdx #SearchFest @mike_arnesen upbuild.io JSON-LD in Action Visit: http://codepen.io/mike_arnesen/pen/jqWzgb
  88. 88. @SEMpdx #SearchFest @mike_arnesen upbuild.io JSON-LD in Action
  89. 89. @SEMpdx #SearchFest @mike_arnesen upbuild.io Separate Entity Separate Entity
  90. 90. @SEMpdx #SearchFest @mike_arnesen upbuild.io One Mega Entity!
  91. 91. @SEMpdx #SearchFest @mike_arnesen upbuild.io Which one?
  92. 92. @SEMpdx #SearchFest @mike_arnesen upbuild.io
  93. 93. @SEMpdx #SearchFest @mike_arnesen upbuild.io “Use structured data. Google can get information without it, but we can make the processes easier.” - Ian Lurie, @portentint
  94. 94. @SEMpdx #SearchFest @mike_arnesen upbuild.io
  95. 95. @SEMpdx #SearchFest @mike_arnesen upbuild.io Thank you! Get this deck bit.ly/structure-all-the-data Resources upbuild.io/blog/searchfest-links/

×