![\"The](\"https:\/\/whitespark.ca\/wp-content\/uploads\/2024\/06\/JSONLD2.jpg\")
<\/p>\n<\/p>\n
Schema.org\u2026<\/p>\n
Love it or hate it, schema is an essential part of optimizing your website for local search. For me, it\u2019s a love-hate relationship.<\/p>\n
Microdata is an HTML specification, a form of semantic mark-up used to encode data through vocabularies such as schema.org and is a great method for communicating metadata to search engines. Search engines such as Google and Bing use this mark-up to extract information from web pages. The specification is often used to create a \u201cricher\u201d experience for web users via nifty rich snippets and interactive elements.<\/p>\n
<div itemscope=\"\" itemtype=\"http:\/\/schema.org\/LocalBusiness\">\n\t<span itemprop=\"name\">Gene's Delicious Donuts<\/span><br>\n\t<link itemprop=\"url\" href=\"http:\/\/www.example.com\">\n\t<span itemprop=\"address\" itemscope=\"\" itemtype=\"http:\/\/schema.org\/PostalAddress\">\n\t\t<span itemprop=\"streetAddress\">123 Happy Lane<\/span><br>\n\t\t<span itemprop=\"addressLocality\">Irvine<\/span>, <span itemprop=\"addressRegion\">CA<\/span> \n\t\t<span itemprop=\"postalCode\">92618<\/span>\n\t<\/span><br>\t\n\t<a itemprop=\"telephone\" href=\"tel:+15551112345\">(555) 111-2345<\/a><br>\n\t<span itemprop=\"faxNumber\">(555) 111-2345<\/span><br>\n\t<span itemprop=\"email\">you@domain.com<\/span>\n\t<link itemprop=\"logo\" href=\"image\/path\/file-name.jpg\">I \n\t<link itemprop=\"sameAs\" href=\"https:\/\/plus.google.com\/your-google-url\">\n\t<link itemprop=\"hasMap\" href=\"https:\/\/www.google.com\/maps\/place\/link-to-your-business\">\n\t<span itemprop=\"geo\" itemscope=\"\" itemtype=\"http:\/\/schema.org\/GeoCoordinates\">\n\t\t<meta itemprop=\"latitude\" content=\"111.00000\">\n\t\t<meta itemprop=\"longitude\" content=\"-96.012345\">\n\t<\/span><br>\n\t<time itemprop=\"openingHours\" datetime=\"Mo, Tu, We, Th, Fr 09:00-17:00\">9AM - 5PM<\/time> \n<\/div><\/code><\/pre>\nExample of Google\u2019s Knowledge Graph extracting information from Microdata:<\/h4>\n
![\"Markup](\"https:\/\/whitespark.ca\/wp-content\/uploads\/2024\/06\/markup-example.jpg\")
<\/p>\n
Difficulties with Microdata<\/h3>\n
Since Microdata often uses visual markup to style actual elements on the page, I often find myself messing with CSS and HTML in an effort to make everything look visually appealing on a client\u2019s website. The unnecessary layout problems created by Microdata result in unproductive use of time that could be spent on other important tweaks.<\/p>\n
What is JSON-LD?<\/h2>\n
JSON-LD<\/a> is a markup data-linking format that allows for easy embedding of data in a script<\/em> tag. Unlike Microdata, JSON-LD data runs in the background so to speak. There\u2019s no need to tweak actual HTML elements which creates a much faster experience<\/strong> for marketing professionals. With scripts<\/em>, there\u2019s no need to worry about a missing opening span<\/em> or a closing div <\/em>\u2013 everything just works. Think of JSON-LD as a faster, cleaner, more simple<\/strong> delivery vehicle for schema. Search engines love it as they are able to crawl the code with ease to understand the data more quickly.<\/p>\nBenefits of Using JSON-LD<\/h3>\n\n- Nested values <\/strong>\u2013 allows for display of complex information in an easy to understand fashion.<\/li>\n
- Variable-based<\/strong> \u2013 to mark up a new element, simply add a variable.<\/li>\n
- Saves a lot of time<\/strong> \u2013 visual markup is easy to mess up and difficult to troubleshoot unless you\u2019re experienced with visual editors.<\/li>\n
- Easy to mark up reviews<\/strong> \u2013 keep the styling on your current reviews without having to make changes to your CSS file.<\/li>\n<\/ul>\n
Types of Useful Local Business Data Available for Markup<\/h3>\n
For most local businesses, the typical NAP, business hours, and geo-location information are the most important elements. A savvy developer may utilize structured data<\/a> to include:<\/p>\n\n- Business Name<\/li>\n
- Address<\/li>\n
- Phone Number<\/li>\n
- Email Address<\/li>\n
- Business Hours<\/li>\n
- Geo-location Information (coordinates and map)<\/li>\n
- Reviews<\/li>\n
- Logo<\/li>\n
- Business Description<\/li>\n
- Social Profile Links via sameAs <\/em>property.<\/li>\n
- Site Name<\/li>\n<\/ul>\n
Additional useful local markup types include:<\/p>\n
\n- Products<\/li>\n
- Media (images and videos)<\/li>\n
- Events<\/li>\n
- Corporate Contacts<\/li>\n
- Sitelinks Search Box<\/li>\n<\/ul>\n
A Basic Schema.org Example using JSON-LD for a Local Business<\/h3>\n
In this basic LocalBusiness<\/em> example, we are including the business type, PostalAddress, description, business name, telephone, opening hours, geo coordinates and social profile links:<\/p>\n<script type=\"application\/ld+json\">\n\t{\n \t\"@context\": \"http:\/\/schema.org\",\n \t\"@type\": \"LocalBusiness\",\n \t\"address\": {\n \"@type\": \"PostalAddress\",\n \"addressLocality\": \"Irvine\",\n \"addressRegion\": \"CA\",\n \"postalCode\":\"92618\",\n \"streetAddress\": \"123 Happy Lane\"\n \t},\n \t\"description\": \"This is your business description.\",\n \t\"name\": \"Gene\u2019s Delicious Donuts\",\n \t\"telephone\": \"555-111-2345\",\n \t\"openingHours\": \"Mo,Tu,We,Th,Fr 09:00-17:00\",\n \t\"geo\": {\n \"@type\": \"GeoCoordinates\",\n \"latitude\": \"40.75\",\n \"longitude\": \"73.98\"\n \t\t}, \t\t\t\n \t\"sameAs\" : [ \"http:\/\/www.facebook.com\/your-profile\",\n \"http:\/\/www.twitter.com\/your-profile\",\n \"http:\/\/plus.google.com\/your-profile\"]\n\t}\n<\/script><\/code><\/pre>\nHow to Implement schema.org Markup Using JSON-LD for a Local Business<\/h2>\n
Before I dive right into it, a brief disclaimer:<\/p>\n
I am not an expert on schema or JSON-LD and have no affiliation with Google. This article is intended to show you how I personally implement schema in my projects, in hopes that this information will be helpful to you. Please read all of Google\u2019s guidelines<\/a> carefully prior to implementing similar code. Don\u2019t forget to test, test, test!<\/p>\nIt\u2019s also worth pointing out a few helpful links and tools:<\/p>\n
\n- Structured Data Testing Tool<\/a> \u2013 Google\u2019s own tool to help you troubleshoot your code. Use it to test your code before publishing it to your website. I can\u2019t recommend it enough, it\u2019ll make your life so much easier.<\/li>\n
- Schema Types Spreadsheet<\/a> \u2013 this amazing resource put together by Phil Rozek<\/a> and David Deering<\/a> will pump up your schema<\/a>. Instead of specifying a LocalBusiness, use this spreadsheet to find your schema type<\/strong> to replace the \u201c@type\u201d: \u201cLocalBusiness\u201d,<\/em> line. Not sure how to pick the right type? No worries, Phil and David wrote a post to help with this task<\/a>.<\/li>\n
- Structured Data<\/a> examples by Google \u2013 this resource has many explanations and examples of the types of data available for markup.<\/li>\n
- Google Webmaster Tools<\/a> \u2013 a properly embedded code will be crawled and displayed in your GWT dashboard. Aaron Bradley<\/a>, the author of SEOSkeptic confirmed that GWT understands JSON-LD<\/a>. You can find this section in GWT under Search Appearance > Structured Data.<\/em><\/li>\n
- A list of structured data markup visualization, validation and testing tools<\/a> may also come in handy.<\/li>\n<\/ul>\n
Step 1: Determine Your Schema Type<\/h3>\n
![\"determine](\"https:\/\/whitespark.ca\/wp-content\/uploads\/2024\/06\/determine-the-right-schema-type.jpg\")
<\/a><\/p>\nUse Phil and David\u2019s handy spreadsheet<\/a> to determine which schema type describes your business most accurately – instead of using the generic \u201cLocalBusiness\u201d schema.<\/p>\nStep 2: Customize and Add Your Code Anywhere<\/h3>\n
Customize our basic example (below) with your own information, including the schema type picked in step 1, then add the code anywhere on your website. It doesn\u2019t matter if you place it in the <head> or the <body> section, Google will have no problem reading the code. Since JSON-LD is a data linking format, there are no additional requests to the server, therefore it doesn\u2019t matter if the script is loaded at the top or bottom of the page \u2013 there is no render delaying whatsoever.<\/p>\n
Customize your Schema Type:<\/h4>\n \"@type\": \"LocalBusiness\",<\/code>\n<\/pre>\nFor example, your @type<\/em> may read:<\/p>\n\"@type\": \"HVACBusiness\",\n\"@type\": \"Attorney\",\n\"@type\": \"Physician\",\n\"@type\": \"RealEstateAgent\",\n\"@type\": \"Dentist\",<\/code><\/pre>\nCustomize Your Geo Coordinates:<\/h4>\n
To find your business geo-coordinates search for your business in Google Maps and look at the URL to find the latitude and the longitude. Alternatively, you could use http:\/\/www.latlong.net\/<\/a> to search your business address:<\/p>\n![\"Grab](\"https:\/\/whitespark.ca\/wp-content\/uploads\/2024\/06\/grab-geo-coordinates.jpg\")
<\/p>\n
<\/h4>\nAdd a URL:<\/h4>\n \"url\": \"http:\/\/www.example.com\",<\/code>\n<\/pre>\n<\/h4>\nAdd a Logo:<\/h4>\n \"logo\": \"http:\/\/www.example.com\/images\/logo.png\",<\/code>\n<\/pre>\n<\/h4>\nAdd Email Contact Info:<\/h4>\n \"email\":\"mailto:you@example.com\",<\/code>\n<\/pre>\n<\/h4>\nAdd Social Profiles:<\/h4>\n
At this time Google supports Facebook, Twitter, Google+, Instagram, YouTube, LinkedIn and Myspace. To add a new profile, place the URL in quotes and separate by a comma.<\/p>\n
\n\"sameAs\" : [ \"http:\/\/www.facebook.com\/your-profile\",\n \"http:\/\/www.twitter.com\/yourProfile\",\n \"http:\/\/plus.google.com\/your_profile\"]\n <\/code>\n<\/pre>\n<\/h4>\nLink to a Map<\/h4>\n\"hasMap\": \"https:\/\/www.google.com\/maps\/place\/Sushi+Imari\/@33.664141,-117.879423,17z\/data=!3m1!4b1!4m2!3m1!1s0x80dcdfaa9f9de2a5:0x48ad2abe6bb60a3b?hl=en\",<\/code><\/pre>\nTo get the link to your map, find your business in Google Maps<\/a>, and grab the code from the bottom right gear icon > Share or Embed Map<\/em>.<\/p>\n <\/p>\n
![\"Find](\"https:\/\/whitespark.ca\/wp-content\/uploads\/2024\/06\/map-settings-area.jpg\")
<\/p>\n
<\/p>\n
![\"Copy](\"https:\/\/whitespark.ca\/wp-content\/uploads\/2024\/06\/copy-paste-map-link.jpg\")
<\/p>\n
<\/h4>\nInclude Additional Type:<\/h4>\n
As an optional step for those who would like to include Product Ontology values in their code, include additionalType<\/em> like so:<\/p>\n\"additionalType\": \"http:\/\/www.productontology.org\/id\/Personal_injury_lawyer\",<\/code><\/pre>\nSee the post on LocalVisibilitySystem<\/a> on how to pick Product Ontology categories and why you\u2019d include it in your schema.<\/p>\n<\/h4>\nAdd Aggregate Rating:<\/h4>\n\"aggregateRating\": {\n \"@type\": \"AggregateRating\",\n \"ratingValue\": \"4\",\n \"reviewCount\": \"250\"\n },<\/code><\/pre>\n<\/h4>\nInclude Reviews with Aggregate Rating<\/h4>\n
To add more reviews, simply copy and paste the review item and adjust the aggregate reviewCount<\/em> and ratingValues<\/em>. Note that each review has 2 curly brackets and is separated by a comma.<\/p>\n<script type=\"application\/ld+json\">\n\t{\n \t\"@context\": \"http:\/\/schema.org\",\n \t\"@type\": \"Dentist\", \n \t\"name\": \"Family Dentistry\",\n \"aggregateRating\": {\n \"@type\": \"AggregateRating\",\n \"ratingValue\": \"4\",\n \"reviewCount\": \"2\"\n \t }, \t\n \"review\": [\n {\n \"@type\": \"Review\",\n \"author\": \"Ellie\",\n \"datePublished\": \"2011-04-01\",\n \"description\": \"I'm not entirely upset with this office, but the staff at the front desk could have been nicer in letting me know they have nothing available for the next 2 months.\",\n \"name\": \"Good services, poor communication\",\n \"reviewRating\": {\n \"@type\": \"Rating\",\n \"bestRating\": \"5\",\n \"ratingValue\": \"3\",\n \"worstRating\": \"1\"\n \t}\n },\n {\n \"@type\": \"Review\",\n \"author\": \"Lucas\",\n \"datePublished\": \"2011-03-25\",\n \"description\": \"I was finally able to get my old crown replaced with a new, porcelain one at a cost that doesn't break the bank.\",\n \"name\": \"Affordable Crowns\",\n \"reviewRating\": {\n \"@type\": \"Rating\",\n \"bestRating\": \"5\",\n \"ratingValue\": \"5\",\n \"worstRating\": \"1\"\n }\n }\n ]\n}\n<\/script><\/code><\/pre>\n<\/h3>\nStep 3: Test Your Code<\/h3>\n
Once you have your code, unless you\u2019re already tweaking in Structured Data Testing Tool<\/a>, go ahead and test it by copying and pasting the code and clicking on Validate<\/em>.<\/p>\nA green checkmark and the text \u201cAll good\u201d will show if the code validates without errors. If for some reason you seen an error, carefully check the syntax to make sure you didn\u2019t miss a comma, a curly bracket or quotations.<\/p>\n
![\"Test](\"https:\/\/whitespark.ca\/wp-content\/uploads\/2024\/06\/test-your-markup.jpg\")
<\/p>\n
<\/h3>\nExtended Properties JSON-LD Example for a Local Business<\/h3>\n
To add to our basic example, we\u2019ve included an email address<\/em>, addtionalType<\/em>, hasMap<\/em>, website URL<\/em> and a logo<\/em> image link:<\/p>\n<script type=\"application\/ld+json\">\n\t{\n \t\"@context\": \"http:\/\/schema.org\",\n \t\"@type\": \"LocalBusiness\",\n\t\"additionalType\": \"http:\/\/www.productontology.org\/id\/Genes_Donuts\",\n\t\"url\": \"http:\/\/example.com\/\",\n\t\"logo\": \"http:\/\/www.example.com\/images\/logo.png\",\n\t\"hasMap\": \"https:\/\/www.google.com\/maps\/place\/link-to-your-business\",\n\t\"email\": \"mailto:you@example.com\",\n \t\"address\": {\n \t\"@type\": \"PostalAddress\",\n \t\"addressLocality\": \"Irvine\",\n \t\"addressRegion\": \"CA\",\n \t\"postalCode\":\"92618\",\n \t\"streetAddress\": \"123 Happy Lane\"\n \t},\n \t\"description\": \"This is your business description.\",\n \t\"name\": \"Gene\u2019s Delicious Donuts\",\n \t\"telephone\": \"555-111-2345\",\n \t\"openingHours\": \"Mo,Tu,We,Th,Fr 09:00-17:00\",\n \t\"geo\": {\n \t\"@type\": \"GeoCoordinates\",\n \t\"latitude\": \"40.75\",\n \t\"longitude\": \"73.98\"\n \t\t}, \t\t\t\n \t\"sameAs\" : [ \"http:\/\/www.facebook.com\/your-profile\",\n \t\"http:\/\/www.twitter.com\/yourProfile\",\n \t\"http:\/\/plus.google.com\/your_profile\"]\n\t}\n<\/script><\/code><\/pre>\nNote:<\/strong> In this example, the product ontology category is completely made up for demonstration purposes. If this were Randy\u2019s Donuts<\/a>, they could include their name as additionalType<\/em>!<\/p>\nA Few Tips to Avoid Errors<\/h3>\n
If you have little or no web development experience, it\u2019s easy to run into an error when trying to customize the code examples with your own variables. I put together a few tips to help you validate your code without issues:<\/p>\n
\n- Each item<\/em> is declared in quotes: \u201ctelephone\u201d:<\/li>\n
- Each item type<\/em> is declared in the following format: \u201c@type\u201d:<\/li>\n
- Compounded entries such as the values within an address will always be placed in curly brackets: \u201caddress\u201d: { address values }<\/li>\n
- Each item is separated by a comma \u201caddressLocality\u201d: \u201cIrvine\u201d, \u201c<\/strong>addressRegion\u201d: \u201cCA\u201d<\/li>\n
- Repetitive properties such as multiple openingHours or social media links (sameAs property) are placed in brackets [].<\/li>\n
- Don\u2019t use Microsoft Word to format your code, as this will create formatting errors. I recommend notepad or making the edits in Google\u2019s Testing Tool itself.<\/li>\n<\/ol>\n
JSON-LD Markup Guidelines<\/h3>\n
Before you get excited and start making up data that is not visually present on your website, be aware that Google doesn\u2019t joke around with Rich Snippet spam. Algorithmic and manual penalties are a possibility when it comes to marking up data that your visitors can\u2019t see.<\/p>\n
Guidelines Summary Concerning Local Business Markup<\/h4>\n\n- Data must not deceive or mislead experience for search users.<\/li>\n
- Use only the most specific types and property names defined by schema.org<\/a>.<\/li>\n
- Marked-up content must be visible on the page where the script <\/em>is added.<\/li>\n<\/ul>\n
See Google\u2019s Structured Data Policies<\/a> for a full list of technical and quality guidelines if you are uncertain of permissible use.<\/p>\nGenerally speaking, to stay in the clear \u2013 make sure you mark up only the content that\u2019s already visible on your website. For example, if the page contains no reviews, don\u2019t add a script that marks up reviews.<\/p>\n
A Couple of FAQs<\/h3>\n
A few frequently asked questions and answers about implementing schema with JSON-LD:<\/p>\n
\n- Can I include data that is not shown on my website?<\/strong> No, however there are some exceptions. Google typically will not show any data that is not visibly present on your page. In fact, it\u2019s against their guidelines<\/a>. See the link for more details of permissible uses and exceptions.<\/li>\n
- My rich snippets aren\u2019t showing up, how come? <\/strong>Google makes no guarantees that your rich snippets will be displayed.<\/li>\n
- Can I use your code examples in my site-wide footer?<\/strong> Yes, as long as you don\u2019t forget to customize your values and each element is actually present visually. Does the footer contain all of the information? Is there a logo link to the same image file?<\/li>\n
- How do I format varying openingHours?<\/strong> If your business has different hours for different days, you can specify multiple openingHours on an individual line within enclosed in brackets. For a brief overview of openingHours, see the schema.org specification<\/a>. \u00a0Here\u2019s a quick example of a business that\u2019s open most of the week from 9-5 but takes a half day off on Friday:<\/li>\n<\/ul>\n
\"openingHours\": [ \"Mo-Th 09:00-17:00\", \"Fr 09:00-12:00\" ],<\/code>\n<\/pre>\n\n- Can I use this code in WordPress or some other content management system?<\/strong> Yes, the script works anywhere. To insert the code site-wide (to show across all pages) add it to your custom scripts section in the Settings (some themes may not have this). If your theme doesn\u2019t have a scripts area, find the header.php or footer.php file and insert it there.<\/li>\n
- Does JSON-LD<\/strong> delay CSS rendering? <\/strong>No. Unlike javascript there is no render delay with a data linking format. This means you can place the code anywhere you like without having to worry about slow loading times. The code will increase your HTML content size, but only by a tiny bit \u2013 completely negligible when it comes to page load times.<\/li>\n<\/ul>\n
You just spent way longer reading about JSON-LD than it will actually take you to put it to work for your business. You\u2019ll be way ahead of the curve.<\/p>\n
If you work with multiple clients, bookmark this page for quick reference.<\/p>\n