Example of WebPage markup
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "WebPage",
"name": "Umbraco"
}
</script>
Why use WebPage markup?
This is one of the simplest pieces of schema markup that you can implement because it’s the same across your entire website and doesn’t have to be updated. It’s used to tell search engine crawlers that this page is a web page, and to give more information about the page. It is typically used in association with other markups like with the next on our list: BreadcrumbList.
Example of BreadcrumbList markup
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"item": {
"@id": "https://umbraco.com/",
"name": "Home"
}
} ,
{
"@type": "ListItem",
"position": 2,
"item": {
"@id": "https://umbraco.com/blog/",
"name": "Blog"
}
} ,
{
"@type": "ListItem",
"position": 3,
"item": {
"@id": "https://umbraco.com/blog/how-to-implement-schema-markup-in-umbraco/",
"name": "How to implement Schema Markup in Umbraco"
}
}
]
}
</script>
Why use BreadcrumbList markup?
To give search engines a clear idea of how a page fits into the navigation of a website, you can implement this markup.
It’ll work just like a trail of breadcrumbs on a page where it shows the different levels that have to be taken to get to a certain page. These will be ordered in position and go up to position 1, which will be the root of your domain (your home page).
By adding BreadcrumbList to your pages, you’ll be able to get a breadcrumb trail in the search results.
Example of Organization markup
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Umbraco",
"url": "https://umbraco.com/",
"logo": "https://umbraco.com/media/ziikdjap/umbraco_social_og.png",
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+4570261162",
"contactType": "customer service",
"availableLanguage": ["English","Danish"]
},
"sameAs": [
"https://www.facebook.com/Umbraco/",
"https://twitter.com/umbraco",
"https://www.instagram.com/umbraco/",
"https://www.youtube.com/channel/UCcltXlJQ-U553MoOsP9p4wg",
"https://www.linkedin.com/company/umbraco/",
"https://en.wikipedia.org/wiki/Umbraco",
"https://github.com/umbraco"
]
}
</script>
Why use Organization markup?
This markup is similar to the one for WebPage, as it’s fairly simple to implement and doesn’t need to be updated once it has been implemented.
It’s used to add information about your organization to search engines, so they can tie things together and use it in results such as the Google knowledge panel.
Add as much relevant information about your organization as possible. We recommend adding links to your social media profiles as well as any contact information that you have available on your website.
Example of WebSite markup
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "WebSite",
"name": "Umbraco",
"url": "https://umbraco.com/",
"potentialAction": {
"@type": "SearchAction",
"target": "https://umbraco.com/search/?q={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>
Why use WebSite markup?
Search doesn’t only happen on Google - it can also happen on your website. If you have a search box that allows users to search for content on your website, then implementing it with the WebSite schema markup is well worth it. By adding the WebSite type, and the underlying SearchAction, you can be lucky enough to get a Sitelinks search box directly in the search results.
Example of Article markup
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://umbraco.com/knowledge-base/deployment/"},
"headline": "What is Deployment?",
"description": "<p>Deployment in software and web development means to push changes or updates from one deployment environment to another. When setting up a website you will always have your live website, which is called the live environment or production environment.</p><p>If you want the ability to make changes without these affecting your live website, then you can add additional environments. These environments are called development environments or deployment environments. The additional development environments will typically be a local environment, a development environment, and a staging environment (also known as a staging site). How many environments you need is up to you and depends on the complexity of the project you are working on.</p><p>While deployment models can vary, the most common is the classic “left to right” deployment model when working with multiple deployment environments. In this model, changes are made in local, development, or staging environments (depending on the setup) and pushed from left to right through the different environments ending up in the live environment. Once this deployment process has completed the new changes will be visible in the live environment.</p>",
"image": "https://umbraco.com/media/whajpu1r/deployment-left-to-right.png",
"author": {
"@type": "Organization",
"name": "Umbraco"
},
"publisher": {
"@type": "Organization",
"name": "Umbraco",
"logo": {
"@type": "ImageObject",
"url": "https://umbraco.com/media/ziikdjap/umbraco_social_og.png"
}
},
"datePublished": "2019-05-03",
"dateModified": "2021-08-27"
}
</script>
Why use Article markup?
If you’re publishing news articles or similar content, it is worth it to look into implementing the Article markup type.
It allows you to tell search engines more about each specific article and increases the chances of you getting extra information added to the search result, such as a better headline, publishing date, or images.
Note that there is a difference in appearance with this markup depending on whether or not you implement it on a regular web page or an AMP (Accelerated Mobile Pages) page.
Example of BlogPosting markup
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "BlogPosting",
"headline": "How to implement Schema markup in Umbraco",
"datePublished": "6/19/2019 12:00:00 AM",
"dateModified": "7/7/2021 11:12:14 AM",
"description": "Schema markup helps to improve your content’s visibility and click-through rate. Find out how to implement Schema on your Umbraco site.",
"image": {
"@type": "ImageObject",
"height": "2901",
"width": "4368",
"url": "https://umbraco.com/media/xp3na5q2/dsc_4536.jpg"
},
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://umbraco.com/blog/how-to-implement-schema-markup-in-umbraco/",
"name": "How to implement Schema markup in Umbraco"
},
"author": "Fraser Rowan",
"publisher": {
"@type": "Organization",
"logo": {
"@type": "ImageObject",
"url": "https://umbraco.com/media/ziikdjap/umbraco_social_og.png"
},
"name": "Umbraco"
}
}
</script>
Why use BlogPosting markup?
This markup is closely related to the Article markup mentioned above.
If you run a blog on your website, it can be a good idea to add a markup to your blog posts to get some of the same benefits as you get with the Article markup.
Example of FAQPage markup (from a template to keep it short)
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [{
"@type": "Question",
"name": "QUESTION 1",
"acceptedAnswer": {
"@type": "Answer",
"text": "ANSWER 1"
}
}, {
"@type": "Question",
"name": "QUESTION 2",
"acceptedAnswer": {
"@type": "Answer",
"text":"ANSWER 2" }
}, {
"@type": "Question",
"name": "QUESTION 3",
"acceptedAnswer": {
"@type": "Answer",
"text":"ANSWER 3" }
}, {
"@type": "Question",
"name": "QUESTION 4",
"acceptedAnswer": {
"@type": "Answer",
"text":"ANSWER 4" }
}]
}
</script>
Why use FAQPage markup?
We saved the best for last. If you have a page that contains questions and answers, it’s a very good idea to add the FAQPage markup to it. By adding this markup, you enable search engines to add these questions directly to the search results together with your result. This gives you additional content in the search results and lets your search result stand out more from the rest.
Example of BlogPosting markup added dynamically
If your website is using a fixed template for your blog, then there's a good chance you can create the markup dynamically for every single blog post.
We do that with our blog, and it's all handled by backend code.
Here is how the markup looks in the backend code:
<script type="application/ld+json">
{
"@@context": "http://schema.org/",
"@@type": "BlogPosting",
"headline": "@(string.IsNullOrWhiteSpace(Model.MetaTitle) ? Model.Name : Model.MetaTitle)",
"datePublished": "@Model.PublishDate",
"dateModified": "@Model.UpdateDate",
"description": "@Model.MetaDescription",
@if (Model.Thumbnail != null)
{
@:"image": {
@:"@@type": "ImageObject",
@:"height": "@Model.Thumbnail.Value("umbracoHeight")",
@:"width": "@Model.Thumbnail.Value("umbracoWidth")",
@:"url": "@(string.Format("https://umbraco.com{0}", Model.Thumbnail.Url()))"
@:},
}
"mainEntityOfPage": {
"@@type": "WebPage",
"@@id": "@Model.Url(null, UrlMode.Absolute)",
"name": "@(string.IsNullOrWhiteSpace(Model.MetaTitle) ? Model.Name : Model.MetaTitle)"
},
"author": "@(Model.Author != null && !string.IsNullOrWhiteSpace(Model.Author.Name) ? Model.Author.Name : "Umbraco")",
"publisher": {
"@@type": "Organization",
"logo": {
"@@type": "ImageObject",
"url": "https://umbraco.com/media/ziikdjap/umbraco_social_og.png"
},
"name": "Umbraco"
}
}
</script>
And here is how it ends up looking in the actual HTML for a blog post:
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "BlogPosting",
"headline": "How to implement Schema markup in Umbraco",
"datePublished": "6/19/2019 12:00:00 AM",
"dateModified": "7/7/2021 11:12:14 AM",
"description": "Schema markup helps to improve your content’s visibility and click-through rate. Find out how to implement Schema on your Umbraco site.",
"image": {
"@type": "ImageObject",
"height": "2901",
"width": "4368",
"url": "https://umbraco.com/media/xp3na5q2/dsc_4536.jpg"
},
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://umbraco.com/blog/how-to-implement-schema-markup-in-umbraco/",
"name": "How to implement Schema markup in Umbraco"
},
"author": "Fraser Rowan",
"publisher": {
"@type": "Organization",
"logo": {
"@type": "ImageObject",
"url": "https://umbraco.com/media/ziikdjap/umbraco_social_og.png"
},
"name": "Umbraco"
}
}
</script>