Your website should help search engines and social networks understand it. Your content is designed and written for your visitors. Typically website owners expect Google, Facebook, Twitter, and others to just understand that content and display it logically. That usually works. Search engine crawlers have become quite advanced and social networks can often just pull an image and a text snippet. But what if you could ensure which title, description, and image show on Google, Facebook, Twitter, and beyond? Well you can with structured metadata!
Help search engines understand your website
Structured metadata is important content but it isn’t visible to your visitors. Metadata is content written specifically for search engines and social networks.
Structured metadata can be used to inform search engines what title and description to use for a page, what your hours are, what your logo is, who wrote an article, what a recipe’s content is, and more. Structured metadata can also be used to tell Facebook and Twitter what titles, descriptions, and images to use. With different metadata styles you can even force your pages to appear differently on different platforms.
Metadata doesn’t directly improve your search rankings. However, it does eliminate the element of chance in how your links display. Usually if you can define how your links appear you can increase your click through rate. You know, perhaps better than anyone else, what your audience is looking for. Make sure that Google, Facebook, Twitter, and others are displaying your site the way you want them to.
Structured metadata is quickly transcending its once exclusive purpose as a search engine tool. If you send a link to an iPhone user they now see a preview of the webpage (if the page contains structured meta-data).
From Google and Bing! previews to Facebook posts and tweets structured metadata has become an essential element of an outstanding website.
What is structured metadata?
Structured metadata pairs info tags (like title and description) with content. It allows you to define info in a way that search engines and social networks can parse instantly. Search engines and social networks like it because it increases the accuracy of their results. Website owners like it because it puts them in control and makes their links appear richer.
All structured metadata goes in the head of an HTML webpage. Thus it doesn’t show to a visitor but is immediately accessible to those looking for it (like Google).
Metadata may be written in HTML, RDF, or JSON.
Title and description – the basics
The original form of metadata was amazingly simple: define a title and description.
Example:
<title>Rystedt Creative - Improving your online influence - Maryland</title>
<meta name="description" content="We improve the online influence of our clients through creative and professional web development and copywriting. Click here to improve your online presence"/>Every webpage should have an implementation of simple title and description metadata.
If either of these are left out Google will algorithmically choose how to display your site. Sometimes that works but usually it isn’t pretty. Social networks will often just have a link without any title or description!
Ensure that your site includes a title and meta description. These should be short enough to display on most devices without being cut off (about 70chs for a title and one or two sentences for a description). Most importantly, make sure that your title and description both summarizes the content and invites clicks.
Schema
Schema metadata is being developed by Google, Bing!, and Yahoo. So it’s important! Schema built upon standard structured metadata, standardized it for search engines, and expanded its capabilities. If your webpage contains schema metadata most search engines will default to using it. Schema can be used to define everything from your organization type and hours to the steps of a recipe.
In the following example we tell search engines the organization type, related social network accounts, company name, and logo:
<script type='application/ld+json'>
{
"@context": "http://schema.org",
"@type": "Organization",
"url": "https://www.rystedtcreative.com/",
"sameAs": ["http://fb.com/rystedtcreative","https://www.linkedin.com/in/joshua-rystedt-b894a0a6/","https://twitter.com/rystedtcreative"],
"@id": "#organization",
"name": "Rystedt Creative Services",
"logo": "https://www.rystedtcreative.com/wp-content/uploads/2017/07/RystedtCreativeLogo_Blue_JPG.jpg"
}
</script>Use Schema to tell search engines how to display your organization’s info and webpage’s content.
Open Graph
Sure, social networks can use simple title and description metadata but you can do one better. Facebook has developed their own metadata style called Open Graph. Now open graph is being used by most social networks as well. You can use Open Graph to define a social network specific title, description, image, and content type.
In the following example we tell social networks the type of content, title, description, url, company name, linked Facebook account, author, tags, categories, time published, and image to use:
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Quiz Powered Lead Generation - Rystedt Creative Services" />
<meta property="og:description" content="An increasing number of websites are now including interactive quizzes in their content marketing strategies. Use Interact to build your own quiz:" />
<meta property="og:url" content="https://www.rystedtcreative.com/online-marketing/quiz-powered-lead-generation/" />
<meta property="og:site_name" content="Rystedt Creative Services" />
<meta property="article:publisher" content="http://fb.com/rystedtcreative" />
<meta property="article:author" content="fb.com/JoshuaRystedt" />
<meta property="article:tag" content="Online Marketing" />
<meta property="article:tag" content="Plugins" />
<meta property="article:tag" content="Value added content" />
<meta property="article:section" content="Online Marketing" />
<meta property="article:published_time" content="2017-11-21T01:00:47+00:00" />
<meta property="article:modified_time" content="2017-11-21T13:17:46+00:00" />
<meta property="og:updated_time" content="2017-11-21T13:17:46+00:00" />
<meta property="og:image" content="https://www.rystedtcreative.com/wp-content/uploads/2017/11/InteractMacBook.png" />
<meta property="og:image:secure_url" content="https://www.rystedtcreative.com/wp-content/uploads/2017/11/InteractMacBook.png" />
<meta property="og:image:width" content="1170" />
<meta property="og:image:height" content="673" />Use Open Graph to define precisely how your content appears on social networks.
Twitter Cards
Twitter has adopted Open Graph but it also maintains its own metadata style: Twitter Cards. So if you want to define precisely how your content displays on Twitter you can add Twitter Card markup to your pages.
In the following example we tell Twitter what type of “card” to display our link as; what title description, and image to use; and which Twitter accounts to link to:
<meta name="twitter:card" content="summary" />
<meta name="twitter:description" content="Value added content will keep your website fresh, provide sharable content, and increase conversions. Here are five types of value added content..." />
<meta name="twitter:title" content="5 Types of Value Added Content - Rystedt Creative Services" />
<meta name="twitter:site" content="@rystedtcreative" />
<meta name="twitter:image" content="https://www.rystedtcreative.com/wp-content/uploads/2017/10/FiveTypesofValueAddedContent-r3.jpg" />
<meta name="twitter:creator" content="@JoshuaRystedt" />Use Twitter Card metadata to define precisely how your content displays on Twitter.
Implementing structured metadata on your site
You can implement structured meta data on your site in three steps:
1) Check what metadata (if any) your site already has
If you have access to your website’s files you could just check each webpage’s head for any structured metadata. Or, when using Chrome or Firefox, you can view the source code for your webpage by holding down command+u on Mac or ctrl+u on Windows.
Google also has a Schema validation tool you can use to preview any Schema metadata on your webpage. You can use that tool here.
Not sure how to tell if you’re using structured metadata? Contact your web developer or contact us for some help.
2) Write your metadata
Your next step is to write the metadata you want. We recommend starting with a standard title and description and working your way through this list.
Here is the official documentation for each common form of structured metadata:
Want structured metadata but intimidated with writing your own? Contact your web developer or contact us for some help.
3) Insert into your webpage’s head
Finally, once your structured metadata has been written you can add it to the head section of your HTML webpage. Don’t know how to do this? Contact your web developer or contact us for some help.
