DEV Community

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

Posted on

8 3

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

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay