Let’s say you’re building a website. Once you’ve completed the process of designing, developing, and publishing your masterpiece, what is the best next step to get it out into the world? In order for your web development project to be successful, you need your users or customers to find it! That’s where Search Engine Optimization (SEO) comes in handy. Simply put, SEO is a toolkit of techniques to help search engines like Google understand your content and get it in front of the right audience.

There are many, many guides out there (most written better than this one) full of tips and tricks for improving your website’s SEO by focusing on quality content, adding image tags, accessibility fixes, optimizing your experience for mobile, and more. Along with these important changes, it is vitally important to consider another technique - directly marking up your webpages with invisible “signposts” to help search engines find exactly what they are looking for.

To do this, it helps to think like a search engine. Let’s break that down a bit. Most search engines, like Google, deploy scripts called “bots” or “crawlers” to index the internet (Google’s is called “Googlebot” - go figure). These scripts are tasked with visiting every web page they can find and simulating a real user to find and catalog all the content on the website. This information is then tagged with keywords, making it easier for the content to show up on search results for real users. This is why quality content is so important for SEO - it determines the keywords that help users find your content. Alongside the visible content on your website, crawlers take cues from the invisible tags that make up your website’s HTML as well. These are typically “meta” tags, which allow developers to specify the title, description, language, and other specific information about a web page in a language that crawlers can understand. There is another family of markup tags that we can use to highlight even more detailed information about a webpage - microdata. Adding microdata tags to standard HTML content tags (like div, h1, p, etc.) helps search engines distinguish between a specific entity, like an event, product, coupon, etc., and more general marketing content on your website. This is where schema.org comes in.

A little background: schema.org was created by a collaborative group of internet industry leaders and researchers who wanted a better way to talk to search engines. That’s the short story anyway. Now, the protocol is used on over 10 million websites across the internet. Schema.org uses a vocabulary of microdata to help us specify which specific entity we are referring to in our HTML, and what properties to highlight. It does this using three primary tags: itemscope, itemtype, and itemprop. Let’s look at an example:

<div>

<h1>Avatar</h1>

<span>Director: James Cameron (born August 16, 1954)</span>

<span>Science fiction</span>

<a href="../movies/avatar-theatrical-trailer.html">Trailer</a>

</div>

This small snippet of HTML displays a movie on a webpage. To human users, it is pretty clear that this snippet references a specific movie: Avatar, directed by James Cameron. However, to a search engine, it may not be immediately clear what the snippet is referring to without additional context. If your target audience is searching for Avatar or James Cameron, then you want to make sure to provide that context to increase the chance that they find your website.

<div itemscope itemtype ="https://schema.org/Movie">

<h1 itemprop="name">Avatar</h1>

<span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>

<span itemprop="genre">Science fiction</span>

<a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>

</div>

Here is the same snippet with schema.org markup added. The itemscope tag lets the search engine know that the enclosed content is a specific entity, and should be reviewed. Next, the itemtype tag provides more specific context about what standard schema.org entity type the scope is, and what data parameters to look for. Finally, each piece of content referring to the entity is tagged with its corresponding itemprop tag to provide these specific data parameters about the entity.

Getting Started With Your First Schema.org Object

The easiest way to give search engines a head start on understanding your website is with an Organization schema.org object. This object provides structured information about your organization, including the name, website, address, and any other websites that represent your company or brand. This is a good place to add all of your organization’s social media links, to let search engines know that they can associate the information and traffic on one website with the other.When creating an organization object on your website, it is often difficult to find a visible snippet to mark up with microdata, since rarely do we display our organization’s name, website, and full address in one place on a webpage. To get around this issue, we employ a second kind of snippet that search engines understand - an application/ld+json script tag. This is the same as the tagging technique used above, but instead of structured data, we are building a JSON object with all of the itemprops set as keys in the object, like this:

<script type="application/ld+json">

{

"@context": "http://schema.org",

"@type": "Organization",

"name": "Lithios Apps",

"url": "https://lithiosapps.com/",

"address": "310 S Harrington St. Raleigh NC 27603",

"sameAs": [

"https://www.facebook.com/lithiosapps",

"https://twitter.com/lithiosapps",

"https://www.linkedin.com/company/lithios",

"https://www.instagram.com/lithiosapps"

]

}

</script>

Other Schema.org Usage Ideas

Along with defining your organization, schema.org markup can be used to highlight all kinds of data on your website. There are hundreds of entity types, from the general to the industry-specific, including:

• Movies
• Books
• Trips
• Reviews
• Festivals
• Comics
• Hackathons
• Molecular Entities

By adding markup to each important entity on your website, you can help search engines rank your content higher in search results. It also allows search engines to display rich, actionable snippets for your audience to interact with.

In this example (a shameless plug), the search engine is pulling the average review rating and total number of reviews from the schema.org microdata and displaying it on the search results page. This helps users find the information they’re looking for at a glance. Rich snippets are created by search engines for many kinds of schema.org markup, from details about a song or artist to pricing information about a product. Check out the full documentation here. You’ll find the complete list of @type tags, helpful tips for rich snippets, and more.

To help you get started adding schema.org to your website, Google even has an online helper tool that will guide you through marking up your website. Simply paste in the URL of your website, select the data types you are interested in, and the tool will walk you through adding microdata tags.

Final Thoughts

Planning and optimizing your project’s search engine presence is one of the most important pieces of the product development process. A well thought out SEO strategy can boost your search rankings, making it easier for your target audience to find your product quickly and easily. Alongside traditional, effective SEO techniques like creating quality, relevant content and optimizing your website experience for mobile, enhancing your project with schema.org markup will allow you to directly communicate important information to search engines that visit your site. Get started with a simple Organization object and then visit the schema.org documentation to find the most relevant itemtypes and itemscopes for your project. Include these in your website’s HTML and you’ll directly help search engines find your content, boost your visibility, and display rich content snippets alongside your product in search results.

Here at Lithios, we strive to incorporate SEO best practices into our clients’ projects in every step of our product development process: Discovery, Design, and Development. This includes selecting the right technical stack and tools for your product and designing pages to deliver the most relevant content for both users and search engines. During the development process, we consult closely with our clients to add relevant schema.org markup directly into their project code to boost their search rankings, increase clickthrough rate, and support future growth. If you have any questions about our process or want to get in touch, drop us a line here.