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.