DEV Community

Cover image for Add SEO to you 11ty website
Mihir Kumar
Mihir Kumar

Posted on

Add SEO to you 11ty website

Add Front Matter in all pages

---
title: "Page Title"
metatitle: "Page Meta Title"
metadescription: "Page Meta Description"
image: Image Address
---
Enter fullscreen mode Exit fullscreen mode

Add Site Url in data

Make a site.json file in _data

{
"url": "https://yoursiteurl.com"
}
Enter fullscreen mode Exit fullscreen mode

Primary Tags

Add these in your base.njk or your main njk in which you have added <head>

<title>{{ title }}</title>
<meta name="title" content="{{ metatitle }}">
<meta name="description" content="{{ metadescription }}">
Enter fullscreen mode Exit fullscreen mode

Open Graph / Facebook

<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com{{page.url}}">
<meta property="og:title" content="{{ metatitle }}">
<meta property="og:description" content="{{ metadescription }}">
<meta property="og:image" content="{{ site.url + image }}">
Enter fullscreen mode Exit fullscreen mode

If you want to automatically generate open graph images you can read this post .

Twitter

<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://example.com{{page.url}}">
<meta property="twitter:title" content="{{ metatitle }}">
<meta property="twitter:description" content="{{ metadescription }}">
<meta property="twitter:image" content="{{ site.url + image }}">
Enter fullscreen mode Exit fullscreen mode

SiteMap

Make sitemap.njk in your root directory. It will automatically become sitemap.xml.

---
permalink: /sitemap.xml
eleventyExcludeFromCollections: true
---
<?xml version="1.0" encoding="utf-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    {% for page in collections.all %}
        <url>
            <loc>{{ site.url }}{{ page.url | url }}</loc>
            <lastmod>{{ page.date.toISOString() }}</lastmod>
        </url>
    {% endfor %}
</urlset>
Enter fullscreen mode Exit fullscreen mode

Robots

Make robots.txt

Sitemap: https://www.yoursitename.com/sitemap.xml
User-agent: *
Disallow:
Enter fullscreen mode Exit fullscreen mode

Top comments (0)