Enhance your search by using structured data on your website or progressive web app pages and test it using Google’s structured data testing tool.
Google Search structured data
Google is offering enhanced search features to help users find high quality content offerings by websites and progressive web apps.
- Recipes (Ex. Beef roast)
- Events (Ex. baseball game)
- Product (Ex. Car for sale)
- Courses (Ex. Learn to program)
Google will parse and index structured data that conforms to the schema.org standard. Developers can use the microdata format or the newer JSON-LD format. We recommend the use of the newer standard as it provides some additional meta-data benefits to developers.
JSON-LD (JavaScript Object Notation for Linked Data) is the preferred means by delivering this structured data in a consistent way. The consistency is combined with a semantic outline that Google can count on to deliver these new ‘rich cards’ in search. The syntax mandates linked data format that provides the idea and context it’s used within to determine vocabulary for types and properties.
Company logo example
{
"@context": "http://schema.org",
"@type": "Organization",
"url": "https://webdesignexperience.com",
"logo": "https://webdesignexperience.com/assets/images/logo.jpg"
}Product example
2016 Toyota Camry can show up in regular search results at the top of the page in the ‘rich cards’ results.
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Product",
"name": "2016 Toyota Camry",
"image": "http://toyotanews.pressroom.toyota.com/images/2015_Toyota_Camry_XLE_004_62109_42747_low.jpg",
"description": "Sleeker, more efficient with better mileage while boasting more power, the 2016 Toyota Camry is ready to reward your journey.",
"mpn": "23070",
"brand": {
"@type": "Car",
"name": "Toyota Camry"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.9",
"reviewCount": "89"
},
"offers": {
"@type": "Offer",
"priceCurrency": "USD",
"price": "22900.99",
"priceValidUntil": "2016-12-31",
"itemCondition": "http://schema.org/NewCondition",
"availability": "http://schema.org/InStock",
"seller": {
"@type": "Organization",
"name": "Ficticious Toyota Fort Wayne"
}
}
}
</script>Gmail supports JSON-LD data in HTML documents, embedded, using the @context of schema.org as in this example:
Gmail use of JSON-LD
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Person",
"name": "Ken W. Button",
"jobTitle": "Owner",
"affiliation": "Cloud Radix",
"additionalName": "Ken",
"url": "https://cloudradix.com",
"address": {
"@type": "PostalAddress",
"streetAddress": "107 E. 9th St",
"addressLocality": "Auburn",
"addressRegion": "Indiana"
}
}
</script> Notice the @context using the schema.org authoritative definitions and then the means of using the @type to define sets of data such as Person information with affiliation and Address information.
Web page use of JSON-LD
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"url": "https://cloudradix.com",
"contactPoint": [{
"@type": "ContactPoint",
"telephone": "+1-260-577-3009",
"contactType": "customer service"
}]
}
</script>Using @type “NewsArticle” with JSON-LD
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage": "https://webdesignexperience.com/2016/10/22/how-do-I-add-structured-data.html",
"headline": "How to add & test structured data?",
"datePublished": "2016-10-22T00:00:00-04:30",
"dateModified": "2016-10-22T00:00:00-04:30",
"description": "Enhance your search by using structured data on your website or progressive web app pages. Test your structured data using Google's Structured Data Testing Tool..",
"author": {
"@type": "Person",
"name": "Ken W. Button"
},
"publisher": {
"@type": "Organization",
"name": "Web Design Experience",
"logo": {
"@type": "ImageObject",
"url": "https://firebasestorage.googleapis.com/v0/b/appsradix.appspot.com/o/images%2Flogo.jpg?alt=media&token=ffa81bd2-ca41-4eb0-810d-3e7366ebf279",
"width": "60",
"height": "60"
}
},
"image": {
"@type": "ImageObject",
"url": "https://firebasestorage.googleapis.com/v0/b/appsradix.appspot.com/o/images%2Flogo.jpg?alt=media&token=ffa81bd2-ca41-4eb0-810d-3e7366ebf279",
"height": "60",
"width": "60"
}
}
</script>Video: Structured data testing tool
Showing how to test web page structured data. Test using Google’s free structured data testing tool.
Structured data testing tool
Testing page structured data can be tedious. If you get an error, click the error for instructions how to solve the issue.
Use Google structured data testing tool
Coming soon! Setup social structured data
Next article we’ll update the social structured data so when shared to these networks, it will provide a photo, title and description as defined by the schema. Click any of the below items to see they do not provide rich media in the social share. Furthermore, Facebook social share button below will not allow it to share as ‘app not setup’. Facebook requires an app be setup in addition to their OpenGraph meta data.