SEO stands for "Search Engine Optimization", and is a set of rules and best practices to make your content discoverable and well-ranked by search engines.
Page speed, sitemaps, robot.txt are all automatically taken care of by Motif, so in this section, we'll be focused on metadata, which is a set of tags that give hints about your content to search engines.
Set a title
By default, the title of your page is given by its file name. For our Index page, we likely want to change that. But the file needs to be called Index in order for it to be accessible at the root path /, as explained in the section on file-based routing. So instead of changing the file name, we will provide a title tag. We can do this in the page's frontmatter, which is a section at the top of the page delimited by three dashes ---. We already have a cover defined there, and will just add a line for the title:
---title:"Welcome to my blog!"cover:"https://tinyurl.com/3m36recy"---
Set a description
Similarly to the title, we can set a page description:
---title:"Welcome to my blog!"description:"My thoughts on design, code, and magical machines."cover:"https://tinyurl.com/3m36recy"---
Use Open Graph tags
In the frontmatter, you can add a section named meta, under which you can provide any metadata tags you want. For instance, you can specify Open Graph tags, which provide a standard way for a page to expose data to search engine and on social media. Here is an example with Twitter cards data:
---title:"Welcome to my blog!"description:"My thoughts on design, code, and magical machines."cover: https://tinyurl.com/3m36recy
Set common tags for all pages
In addition to specific page tags, you can set tags that apply to all the pages of your website. This is done in your Motif project configuration file. Hit ⌘P to bring up the instant file search, and type motif.json to jump to the file.
Alternatively, you can access the file by heading over to your project settings (⌘,) and hitting the Open motif.json button.
Your Motif configuration file is a JSON file that looks like this:
The part that we are interested in is the head part. It contains a list of HTML tags that will go into all your pages' <head> section – which is where metadata belongs. Let's set a Twitter website username here, such as a company Twitter handle, as it will be common to all our content. We also set a global title and description metadata tags, which will be used in case a specific page does not set the tags in their frontmatter: