Umbraco SEO Meta Tags & Open Graph

What every page needs

A unique <title> of about 50–60 characters.
A meta description of about 120–160 characters. It's the text under your link in search results.
A canonical URL, so duplicates such as tracking links don't compete with the real page.
Open Graph and Twitter tags, so links look good when shared.
A way to noindex pages that shouldn't appear in search.

Step 1: An SEO composition

Create a document type (no template) called SEO with:

Meta title (metaTitle, Textstring): leave empty to use the page name.
Meta description (metaDescription, Textarea).
Social image (socialImage, Media Picker): 1200 × 630 works best.
Hide from search engines (noIndex, True/false).

Add it to every page type via Compositions.

Step 2: The partial view

Views/Partials/SeoMeta.cshtml

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
@using Umbraco.Cms.Core.Models
@{
    var siteName = "Example Ltd";
    var title = Model.Value<string>("metaTitle") is { Length: > 0 } t ? t : $"{Model.Name} | {siteName}";
    var description = Model.Value<string>("metaDescription");
    var canonical = Model.Url(mode: UrlMode.Absolute);
    var image = Model.Value<MediaWithCrops>("socialImage");
    var imageUrl = image?.GetCropUrl(width: 1200, height: 630, urlMode: UrlMode.Absolute);
}
<title>@title</title>
@if (string.IsNullOrWhiteSpace(description) == false)
{
    <meta name="description" content="@description">
}
@if (Model.Value<bool>("noIndex"))
{
    <meta name="robots" content="noindex, follow">
}
<link rel="canonical" href="@canonical">
<meta property="og:type" content="website">
<meta property="og:site_name" content="@siteName">
<meta property="og:title" content="@title">
<meta property="og:url" content="@canonical">
@if (description is not null) { <meta property="og:description" content="@description"> }
@if (imageUrl is not null)
{
    <meta property="og:image" content="@imageUrl">
    <meta name="twitter:card" content="summary_large_image">
}

Use it in the <head> of your layout, in place of your existing <title>:

Views/Master.cshtml

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    @await Html.PartialAsync("SeoMeta")
</head>

Step 3: Add structured data

Structured data helps search engines understand your site and can earn richer results. Add organisation details to your home page:

Views/Home.cshtml

<script type="application/ld+json">
{
  "@@context": "https://schema.org",
  "@@type": "Organization",
  "name": "Example Ltd",
  "url": "https://example.com/",
  "logo": "https://example.com/img/logo.png"
}
</script>

In Razor, write @@ to output a literal @.

Writing good titles and descriptions

Lead with what the page is about, and put your brand at the end: "Contact form tutorial | Example Ltd".
Make each one unique. Duplicate titles confuse search engines and searchers.
Write descriptions for people. Say what they'll get and why it's worth the click.
Check your work with Google's Rich Results Test, and preview how links look when shared on LinkedIn or Facebook.

Need a hand?

umbraco.ninja has more than 20 years of Umbraco experience. If you'd rather not do this yourself, we'll set it up, test it and hand it over.

Get a fixed-price quote