BTrem

add syndication links with 11ty

Suppose you publish an article in more than place — for example on medium and on your own website. If you want to alert readers about the other copy, you can do so with a rel=syndication link element. Here's how you can add syndication links to your pages using 11ty and nunjucks.

add a link block to your template

Find the template used by pages that you want to add syndication links to. A very simple template might look like this:

<!DOCTYPE html>
<html lang="en">
    <head>

        <title>{{ title }}</title>

    </head>

    <body>

        <h1>{{ title }}</h1>

        {{ content | safe }}

    </body>
</html>

Below the <title> element, add this block:

{% if syndication %}
    {% for syndicationUrl in syndication %}
    <link rel="syndication" href="{{ syndicationUrl }}">
    {% endfor %}
{% endif %}

The template should now look like this:

<!DOCTYPE html>
<html lang="en">
    <head>

        <title>{{ title }}</title>

        {% if syndication %}
            {% for syndicationUrl in syndication %}
            <link rel="syndication" href="{{ syndicationUrl }}">
            {% endfor %}
        {% endif %}

    </head>

    <body>

        <h1>{{ title }}</h1>

        {{ content | safe }}

    </body>
</html>

add syndication urls to the front page of your article

In the front matter of an article that has been syndicated, add the url of the other copy:

---
syndication:
- https://example.com/foo
---

Voilà! your <head> element should now include a <link> pointing to the other copy:

<!DOCTYPE html>
<html lang="en">
    <head>

        <title>foo</title>

        <link rel="syndication" href="https://example.com/foo">

    </head>

    <body>
        foo
    </body>
</html>

multiple syndicated copies

You can add more than one syndication link to a page:

---
syndication:
- https://example.com/foo
- https://othersite.example.com/foo
---

The resulting markup includes both urls in separate link elements:

<!DOCTYPE html>
<html lang="en">
    <head>

        <title>foo</title>

        <link rel="syndication" href="https://example.com/foo">
        <link rel="syndication" href="https://othersite.example.com/foo">

    </head>

    <body>
        foo
    </body>
</html>