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)

Top Heroku Alternatives (For Free!)

Recently Heroku shut down free Heroku Dynos, free Heroku Postgres, and free Heroku Data for Redis on November 28th, 2022. So Meshv Patel put together some free alternatives in this classic DEV post.