SEO and Sharing

Preparing your pages for SEO and sharing.

SEO stands for Search Engine Optimization, and is a set of rules and best practices to make your content discoverable by search engines. Search engines, such as Google, look for hints in your page to better index your content. This can be the content itself, your page's title, but also special tags in the HTML page such as a description or an image. Recently, search engines have also started to rank results according to loading speed, accessibility and other factors — the more your page adheres to best practices, the more the search engine will want to bump it up in the results.

Open Graph metadata

One of the first things the search engine looks for is your page's Open Graph (OG) tags. These tags hold information such as your page's title, a description, an image, or a Twitter handle.

<meta property="og:url" content="" />
<meta property="og:title" content="Welcome to my page" />
<meta property="og:description" content="Metadata is fun!" />
<meta property="og:image" content=",w_800/v1606389990/te9lnivi10ioe25lryhf.jpg" />
<meta property="twitter:handle" content="@motifland" />

Site-wide configuration

To specify OG tags that should be included on all your pages, head over to the Motif configuration file (to access it, open search using P and type motif.json). Locate the head section, and add a line for each meta tag you want to add. For instance:

  "head": [
    "<meta property='og:title' content='My page title' />",
    "<meta property='og:description' content='My page description' />",
    "<meta property='og:image' content=',w_800/v1606389990/te9lnivi10ioe25lryhf.jpg' />",
    "<meta property='twitter:handle' content='@motifland' />",

Page-specific configuration

OG metadata can also be set for individual pages. For instance, if you have a blog post, you may want the OG title to match the title of your blog post, or have the OG image match the blog post's cover image. For page-specific OG metadata, simply set it in the page's metadata. You can do it either by exporting a JSON object named meta, and include a meta key in it:

export const meta = {
  meta: {
    "og:title": "My blog post",
    "og:description": "A description",

or using YAML syntax:

  "og:title": "My blog post",
  "og:description": "A description",
  "og:image": ""

Note that in case you are using YAML syntax, the section delimited by --- needs to be placed at the very top of your page, before any further content.

Title format

If the meta of your page contains a title key, e.g.

title: My page title

this is what will be used for the published page title. If it is not present, it will look for a title entry in your Motif configuration:

  title: "Default title"

If none of these are set, the file name will be used.

You may also specify a title template, for instance to automatically append your website's name to all your page titles. This is done by adding a titleTemplate entry to your Motif configuration:

  titleTemplate: "%s - My website"

The %s part is replaced by your individual page's title.

© 2022 Motif Land Inc. All rights reserved. This site is built with Motif.