SEO – How to – Implement Schema markup on client sites
Purpose of this How To Guide: To ensure all SEOs Executives know the process for implementing Schema markup and best practices both in terms of SQDigital specifics and Schema markup in general.
Applicable to: SEO Executives
Customers: Any clients whose website has been built by SQDigital
Timescale: Basic Local Business Schema markup usually possible to do in one hour. More advanced application may take several hours.
Introduction
Schema is the vocabulary that has been agreed upon by all major search engines as a standard baseline for marking up website content in machine readable format and thus make its semantic identity, ontology and content clear to search algorithms.
JSON-LD (JavaScript Object Notation – Linked Data) has very recently (2018) emerged as the endorsed markup language (others being RDFa, Microformat and OWL) preferred by search engines and also the easiest to implement as it can all be contained discreetly within HTML <script> tags anywhere in a page, rather than the inline method used by the other languages.
Having been in existence since 2009 the RDFa, Microformat versions of Schema markup have crept into many website themes and builds though it is often incomplete or incorrect, in that it wont validate against various Structured Data testing tools. This has implications for working on any sites not built by SQDigital as any changes made means getting involved with the presentation and framework layers (Design and Development) of a website (in other words, editing the theme php templates and/or HTML) and so Schema work is generally to be eschewed on client sites unless they have been built in-house.
Furthermore, there are generally two ways of implementing JSON-LD markup (in WordPress, which accounts for the vast majority of SQDigital sites): plugins and handwritten code. In order to minimise the need for D&D to oversee every change to Schema markup it has been suggested that D&D provide a Custom Field in WordPress admin panels that raw JSON-LD can be pasted into. [As of writing this has been implemented on the SQDigital site, so have a look at the WP backend there for an example].
It may be that there are instances where expediency demands the use of plugins and in these cases D&D will set them up. A recommended list follows in the resources section below.
First actions
Check the website
Use the OpenLink Structured Data Sniffer and Google Structured Data Testing Tool (SDTT) to have a look at what Schema markup already exists in a site. Determine if it is inline or JSON-LD. It may be necessary to get D&D to strip out any existing inline markup from template files, especially if it is not valid. If there is any existing Structured Data it can sometimes be added to rather than replaced.
Google Search Console and Data Highlighting
As a baseline fundamental action always try and markup as much as you can on the sites home page in the GSC Data Highlighter. This will register certain parts of content as structured data with Google without any markup having to be added, though it is very basic. Definitely worth doing first, though.
As a rule of thumb only try and markup what is visible on a page.
Never try and put Schema markup into a page for anything that the user cannot see. Hidden and/or irrelevant/mis-matched structured data in a page will eventually incur a penalty at worst and at best lead to the page turning up in the wrong searches, leading to low CTR or page-view duration, further driving down performance in search engines. Avoid.
Start with the Index page.
Structured Data and the Semantic Web centres around establishing Entities in the Semantic Web and supporting their authority by linking them to other Nodes/Entities. So first of all concentrate on defining the sites ontological identity in Schema terms. At its broadest and most common this usually means marking up what kind of business the site represents. This will have already been done in the GSC Data Highlighter but defining it explicitly in JSON-LD will help later as a reference for other pages.
As a default use LocalBusiness as the @type. More specific is better, if there is an appropriate sub-category of LocalBusiness. Organization can also be used (and is a more general definition than LocalBusiness) though it is most suitable for large entities.
Define the @id. This establishes the Node by giving it a URI. There are other instances where giving Schema @types an @id/URI might be useful but as far as providing markup that might qualify for Rich Cards/Snippets they are not necessary. However, giving the site as a whole and the company as a whole its own URI is worthwhile. Generally, use the URL of the website appended with #localbusiness (or some other appropriate term) as the @id. The URL doesn’t have to resolve. Further reading.
If you put the @context, @type and @id into the code and then test it in the SDTT it will give you all the definitions that are missing for that Type as far as Google is concerned. Put these in as a minimum so that there are no Errors or Warnings.
After that it is a case of comparing what is available in the Google Search Gallery and what the website contains and seeing what you can provide markup for that will make it eligible for Rich Cards. JSON-LD examples are provided on the Google Search Gallery pages. As of writing (May 2018) the main Rich Cards that are actually used seem to be Recipe, Course, Movie, Jobs, Fact Check. There are other Rich Snippets that will also be worth trying to activate.
The SQDigital site itself should by now contain some examples of JSON-LD markup.
As you go keep testing with the SDTT until you arrive at the markup that satisfies all the requirements. Markup that qualifies for Rich Cards/Snippets will have a “Preview” button.
JSON-LD primer
JSON-LD can be written in any plain text editor (e.g. notepad). There are a number of plugins for Atom that help and this is recommended. In Atom search for JSON-LD in the package manager and install the helpers. Set the language of the document to json or save with .json extension and the formatting theme will change to help with the markup.
If you know Javascript at all this will be fairly straightforward. If not don’t panic. It doesn’t take long to get used to the look of JSON-LD and start to be able to “read” it.
Some basic rules:
- Enclose in <script> tags
- Enclose all the JSON-LD with { }
- { } can be nested
- enclose lists with [ ]
- , at the end of each statement if something follows
All of these rules are demonstrated in the following example.
<script type=”application/ld+json”>
{
“@context”: “http://schema.org”,
“@type”: “LocalBusiness”,
“sameAs”:
[
“http://www.facebook.com/profile”,
“http://www.twitter.com/profile”,
“http://www.instagram.com/profile”
],
“makesOffer”:
{
“@type”: “Offer”,
“itemOffered”:
{
“@type”: “Service”,
“name”: “Digital Marketing”,
“sameAs”: “https://en.wikipedia.org/wiki/Digital_marketing”
}
},
}
</script>
What does the markup say?
“This LocalBusiness makes the Offer of a Service – Digital Marketing.”
The “SameAs” in the Offer unambiguously points to what Digital Marketing is by referencing a Wikipedia page.
The “SameAs” of the LocalBusiness references other online identities in order to reinforce identity.
This example demonstrates pretty much all of the basic principles of Schema markup using JSON-LD.
@context defines the vocabulary. Usually this can simply contain “http://schema.org“. It can also be used to specify a shorthand or customise terms (but leave that to begin with).
Although it is possible to contain many @type statements in one page it is usually best to stick to one at the base level. Other @types may be included in the property declarations of the initial @type specified at the base level.
Run the various pages of the SQDigital website through the Structured Data Testing Tool for other examples.
Resources for various Schema issues
Rather than prescriptive actions here are a list of problems, issues and topics that you are likely to encounter whilst writing Schema markup for sites along with resources to help find solutions.
Essential
Schema.org – (the following pages are particularly useful: Full Hierarchy Data Model)
Browser Plugins (for detecting and checking Schema markup)
OpenLink Structured Data Sniffer
Examples and Tools
Steal our JSON-LD – loads of examples for common Schema cases.
WordPress Plugins for generating Semantic Markup
NB: the choice of plugin may be limited by the server configuration (e.g. which version of php is running etc).
This page has a good list.
Other interesting pages
A Website’s Structured Data Success Story – well worth a read; goes through how to form RDF Triples using Schema in order to get Rich Snippet results. (NB: This site has several excellent articles on Schema).
How to Combine Multiple Schema.org Itemtype Declarations
– encapsulate them in “@graph” is one way.