SEO page settings

Note

The title, meta description and share image all work today.

Each page has SEO settings that editors can change:

  • Title: the page's <title>, also used as its Open Graph title when it is shared.
  • Description: the meta description, also its Open Graph description.
  • Share image: the image social networks show when the page is shared, chosen from the media library. <sb-seo /> renders it as og:image, with an absolute address built from SunBird:SiteUrl. A page has no share image until an editor chooses one.

They are part of each version, so they are drafted, published, previewed and restored together with the page's slots.

Defaults in code

The page builder sets the defaults on the page key attribute. Saved values override them, and an editor who clears a field goes back to the default:

[SunBirdPage("home", Title = "Acme Plumbing", Description = "Plumbers in York since 1990.")]
public class IndexModel : PageModel
{
}

The title can be at most 200 characters, and the description 500.

Rendering

Put <sb-seo /> in the <head> of the site's layout, instead of a <title> tag:

<head>
    <meta charset="utf-8">
    <sb-seo />
    <link rel="stylesheet" href="~/css/site.css">
</head>

On a SunBird page it renders, for example:

<title>Acme Plumbing</title>
<meta content="Acme Plumbing" property="og:title" />
<meta content="Plumbers in York since 1990." name="description" />
<meta content="Plumbers in York since 1990." property="og:description" />
<link href="https://www.acmeplumbing.co.uk/" rel="canonical" />
<meta content="website" property="og:type" />
<meta content="https://www.acmeplumbing.co.uk/" property="og:url" />
<meta content="summary" name="twitter:card" />

The canonical link and og:url are the page's own address. They are built from SunBird:SiteUrl, the same setting the links in emails use, never from the request's host. The path is the page's route, so /about, /About and /about?utm_source=newsletter all give the same canonical address. A page created from a template uses its own lowercase address, such as /news/opening-day. When the page has a share image, og:image is built the same way and twitter:card is summary_large_image, so X shows a large card; otherwise it is summary.

It leaves out a title or description tag whose value is empty. On a page without [SunBirdPage] it renders nothing, so give such pages their own <title> (for example in a @section). Everything is HTML-encoded. <sb-seo /> is the one SunBird tag that belongs in a layout; slots do not.

For a signed-in editor in edit mode it shows the draft's settings, and when previewing an older version it shows that version's.

Editing

In edit mode, the Page settings button opens the settings in the rail on the right. Each field shows the default from code as its placeholder. Under each field is its length, or the default's when the field is empty, against where Google cuts it off in search results: about 60 characters for the title and 160 for the description. It turns red when the text is longer. The settings are saved with the page, by Save as draft or Save and publish.

Not page settings

noindex and canonical URLs are not editable settings. <sb-seo /> always renders the page's own canonical address. When a page needs noindex, the developer or agent puts it in the page itself.

There is no meta keywords tag: search engines ignore it.

Edit this page