Configuring SEO-relevant meta tags for every page can be a tedious task. This plugin can automate that task, as well as generate robots.txt
files and an up-to-date sitemap
.
You can be as little or as much hands-on in the process as you want to be.
read full documentationFor optimal results, configure these values in your metadata.yaml
:
1 2 3 4 5 6 7 8 9 | site_url: the URL at which you plan on publishing your website site_name: name of your website site_description: optional (fallback) if no page-specific description is found site_keywords: - keywords - befitting to all pages favicon: favicon.ico twitter_site: your twitter user (optional) twitter_creator: what twitter user to attribute content to. better specified on a per-page-basis. |
All of these values are optional. Some meta tags can not be generated if a specific piece of information is missing, of course: if site_url
is not set, the og:url
tag (among others) for OpenGraph that provides the link to your site can't be generated, and so on.
Inside of every page you can (again, not must!) set these additional values:
The top-level attributes are used for the title of browser tabs, SEO-relevant tags (and are therefore displayed in the Google & Co search results), and so on; while the SEO
tags allow you to override these values for OpenGraph- and Twitter-tags.
Generally, when a specific value is not found, the less-specific version is used as fallback, and the global version as a last resort.
An exception is the title_image
. Displaying an image when your page is shared on social media is hugely important, which is why the plugin will go to extra lengths to find one:
title_image
is set, use it (obviously)Note that you can also set a fallback title_image
in metadata.yaml
, in which case steps 2 and 3 will never be necessary.
All the tags are neatly packaged into one seo_tags
variable. Use it like any other variable in your jinja templates.
The best way to do this is to include the variable in the very base template of your site:
1 2 3 4 5 6 7 | <html> <head> {{ seo_tags }} ... </head> ... </html> |
Let's look at a concrete example. The setup looks like this:
metadata.yaml
:
1 2 3 4 5 6 | site_url: https://test.com site_name: Test Site site_description: Description of test site site_keywords: - one favicon: favicon.ico |
page-specific config:
1 2 3 4 | title: Test Page summary: just a simple page for testing SEO: - description: AMAZING TEST PAGE!! |
inside the page's markdown an image is included somewhere: ![Test Image One](first.png)
From this rather simple setup, the plugin can already generate the following tags:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Test Page | Test Site</title> <meta name="description" content="just a simple page for testing" /> <meta name="keywords" content="one" /> <meta name="robots" content="all" /> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> <meta property="og:title" content="Test Page"> <meta property="og:description" content="AMAZING TEST PAGE!!"> <meta property="og:image" content="https://test.com/subpage/first.png"> <meta property="og:url" content="https://test.com/subpage/index.html"> <meta property="og:site_name" content="Test Site"> <meta name="twitter:image:alt" content="AMAZING TEST PAGE!!"> <meta name="twitter:card" content="summary_card_large"> |