Adding Schema Markup
How I implemented structured data for this site.
Schema markup has eluded me for the better part of a year now. It’s included jargon just seemed too befuddled for me to dive into. This post is about me fixing that and hopefully illuminating somethings for you along the way.
First, I’ve never seen the word Schema before and have no model of what it means. Schema is an outline applicable to a general conception; as, five dots in a line are a schema of the number five.
That helps, kinda?
Schema markup tells search engines (i.e. Google) what your data says and means. This data is also referred to as “structured data.”
Google defines structured data as:
a standardized format for providing information about a page and classifying the page content; for example, on a recipe page, what are the ingredients, the cooking time and temperature, the calories, and so on.”
While HTML tags allow you to define objects like headers
<h1>Lukas Murdock<\h1>, Schema allows you to define that header as a Person with extra information tied to that person (this extra information is referred to as properties):
- An additional name
- Organization affiliation
- Organization alumni
- Birth place
- Contact point
- Death date
- Death place
- DUNS number
- Family name
- Fax number
- Given name
- GLN/ILN number
- Educational Credential
- Available Offer Catalog
- Has Point of Sales (POS)
- Home location
- Honorific Prefix (Dr/Mrs/Mr)
- Honorific Suffix (M.D./PhD)
- Job Title
- Knows about
- Knows language
- Member of
- NAICS code
- Net worth
- Performer in
- Publishing principles
- Related to
- Tax ID
- Work Location
- Works for
Schema can get… quite detailed… Schema powers Google Knowledge graphs among many other search features, the information presented in a box next to Search results.
There are 3 primary ways of implementing Schema markup:
- Resource Descriptive Framework in Attributes (RDFa)
- Micro data
- JSON-LD (Recommended)
This method nests structured data into corresponding HTML tag attributes to name properties.
This method is similar to the RDFa method where HTML tag attributes embed metadata. It seems to just have different attributes and I’m not quite sure on the difference but it doesn’t matter because you should use the next one.
This method uses JSON in a
<script> tag in the page head or body to declare schema markup. This provides a better experience as it’s not woven into HTML, making nested data easier to express.
Google recommends using JSON-LD for structured data whenever possible.
Now let’s add some structured data! First we’ll need to decide on what structured data to use.
CreativeWork > Article: An article, such as a news article or piece of investigative report. Newspapers and magazines have articles of many different types and this is intended to cover them all.
CreativeWork > Article > SocialMediaPosting: A post to a social media platform, including blog posts, tweets, Facebook posts, etc.
It looks like BlogPosting is the Schema entity of choice. Interestingly enough the BlogPosting Schema Entity has experienced a significant uptick in adoption during the COVID-19 quarantines.
With this we can define:
- Date Published
- Date Created
- Date Modified
- Article Body
- Word count
First I’ll create an if statement in the
<head> tag to include a
postSchema.html file if the page is a post. Then in the
postSchema.html I can format all the post schema!
The Google Structured Data Testing Tool flags my posts with a warning and error because I don’t include images, however this just means that Google recommends an image property for Non-AMP Article Rich Snippets. Note that for AMP pages the image property is required. Now I see why people use random stock photos for every single post, Google! Alas, I decline. The Schema data is perfectly valid.
Next is setting up Person schema, I can exist! This was a little tricky and took me some searching around to figure out how to use both in the same
<script> call. Turns out there is a
@graph function that I discovered from this blog post that says it best:
I removed the
<script> tags from
postSchema.html and the structured data with Jekyll templating now looks like this:
I’ll update after committing and further testing.