BTrem

add syndication microformat with 11ty

If you publish an article in more than place — for example on your website and on a community blog ‐ you may want to inform readers and search engines about the other copy. One way to do that is by adding a rel=syndication link element in the article's head. Another is with the u-syndication property from the microformats h-entry vocabulary.

Building off of "add syndication links with 11ty", this article shows how you can add syndication anchor links to pages and article/post lists using 11ty and nunjucks.

limitations of <link rel=syndication>

Suppose you have a template to display a list of articles:

<!DOCTYPE html>
<html lang="en">
<head>
<title>articles</title>
</head>

<body>

{% for post in collections.all %}
<article class="h-entry">
<h1 class="p-name">
{{ post.data.title }}</h1>
<p class="p-summary">

{{ post.data.summary }}
</p>
<a class="u-url" href="
{{ post.url }}">more {{ post.data.title }}...</a>
</article>

{% endfor %}
</body>
</html>

Given two articles to process, titled "foo" and "bar", that template would produce a page like this:

<!DOCTYPE html>
<html lang="en">
<head>
<title>articles</title>
</head>

<body>
<article class="h-entry">
<h1 class="p-name">foo</h1>
<p class="p-summary">
foo summary
</p>
<a class="u-url" href="foo">more foo...</a>
</article>

<article class="h-entry">
<h1 class="p-name">bar</h1>
<p class="p-summary">
bar summary
</p>
<a class="u-url" href="bar">more bar...</a>
</article>
</body>
</html>

Now suppose the first article, "foo", has been republished, or syndicated, at https://example.com/foo. In foo's front matter, you add the syndicated url:

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

Now, you follow the directions in "how to add syndication links with 11ty" and add a <link> element:

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

Unfortunately, that tells search engines that example.com/foo is a copy of the entire page, that is, the list of articles. So, while rel=syndication link is useful in a standalone article, it doesn't work in a list of articles.

Which leads to this question: how, in a list of artciles, do you point to syndicated copies of one of those articles?

microformats u-syndication

That's where the u-syndication property comes in handy, because the property will only apply to the h-entry that it appears in.

Let's modify our 11ty template by adding the following code below the <a> element:

{% if post.data.syndication %}
{% for url in post.data.syndication %}
<p>
this article has also been published at
<a class="u-syndication" href="
{{ url }}">{{ url }}</a>
</p>

{% endfor %}
{% endif %}

The template now looks like this:

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

<head>
<title>articles</title>
</head>

<body>

{% for post in collections.all %}
<article class="h-entry">
<h1 class="p-name">
{{ post.data.title }}</h1>
<p class="p-summary">

{{ post.data.summary }}
</p>
<a class="u-url" href="
{{ post.url }}">more {{ post.data.title }}...</a>
{% if post.data.syndication %}
{% for url in post.data.syndication %}
<p>
this article has also been published at
<a class="u-syndication" href="
{{ url }}">{{ url }}</a>
</p>

{% endfor %}
{% endif %}
</article>
{% endfor %}
</body>
</html>

Now, given the same two articles ‐ "foo" and "bar", with a syndication url attached to "foo" — our modified template would produce a page like this:

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

<head>
<title>articles</title>
</head>

<body>
<article class="h-entry">
<h1 class="p-name">foo</h1>
<p class="p-summary">
foo summary
</p>
<a class="u-url" href="foo">more foo...</a>
<p>
this article has also been published at
<a class="u-syndication" href="https://example.com/foo">https://example.com/foo</a>
</p>
</article>

<article class="h-entry">
<h1 class="p-name">bar</h1>
<p class="p-summary">
bar summary
</p>
<a class="u-url" href="bar">more bar...</a>
</article>
</body>
</html>

The <a class="u-syndication"> link in that page says there's a syndicated copy of the "foo" article. Exactly what we want.