OpenGraph and Twitter card enhancements

[max-arnold]

After trying new previewimage meta tag with Nikola 7.2, I'd like to suggest some improvements.

• Make final rendered template url absolute (<meta property="og:image"> tag). All examples I've seen always use absolute url and Twitter validation tool fails on relative one.
• Add support for https://dev.twitter.com/cards/types/summary-large-image card (document that it is actually possible to change default card type using TWITTER_CARD = {'card': '...'} configuration parameter).
• Add support for twitter:title, twitter:description, twitter:image and twitter:image:src tags (for both summary and summary_large_image)
• There is also og:locale and og:locale:alternate meta tags which can be used to support multilanguage posts, but I'm not sure it is possible to provide appropriate locale names (Nikola uses 2-letter language codes).

Below is the partial patch to add necessary markup (no doc patch, no absolute url patch):

diff --git a/nikola/data/themes/base-jinja/templates/post_helper.tmpl b/nikola/data/themes/base-jinja/templates/post_helper.tmpl
index bc6cab2..45471da 100644
--- a/nikola/data/themes/base-jinja/templates/post_helper.tmpl
+++ b/nikola/data/themes/base-jinja/templates/post_helper.tmpl
@@ -79,6 +79,16 @@
     {% elif 'creator' in twitter_card %}
     <meta name="twitter:creator" content="{{ twitter_card['creator'] }}">
     {% endif %}
+    <meta property="twitter:title" content="{{ post.title()[:70]|e }}">
+    {% if post.description() %}
+    <meta property="twitter:description" content="{{ post.description()[:200]|e }}">
+    {% else %}
+    <meta property="twitter:description" content="{{ post.text(strip_html=True)[:200]|e }}">
+    {% endif %}
+    {% if post.previewimage %}
+    <meta property="twitter:image" content="{{ url_replacer(permalink, post.previewimage, lang) }}">
+    <meta property="twitter:image:src" content="{{ url_replacer(permalink, post.previewimage, lang) }}">
+    {% endif %}
 {% endif %}
 {% endmacro %}

diff --git a/nikola/data/themes/base/templates/post_helper.tmpl b/nikola/data/themes/base/templates/post_helper.tmpl
index 9ba58d1..484df75 100644
--- a/nikola/data/themes/base/templates/post_helper.tmpl
+++ b/nikola/data/themes/base/templates/post_helper.tmpl
@@ -79,6 +79,16 @@
     %elif 'creator' in twitter_card:
     <meta name="twitter:creator" content="${twitter_card['creator']}">
     %endif
+    <meta property="twitter:title" content="${post.title()[:70]|h}">
+    %if post.description():
+    <meta property="twitter:description" content="${post.description()[:200]|h}">
+    %else:
+    <meta property="twitter:description" content="${post.text(strip_html=True)[:200]|h}">
+    %endif
+    %if post.previewimage:
+    <meta property="twitter:image" content="${url_replacer(permalink, post.previewimage, lang)}">
+    <meta property="twitter:image:src" content="${url_replacer(permalink, post.previewimage, lang)}">
+    %endif
 %endif
 </%def>

Also there is a tool to validate such markup: http://smo.knowem.com/ It also supports G+ metadata.

[Kwpolska]

Make the patch into a Pull Request. It looks solid.

Documentation is not hard, and we can produce absolute links (though I think we might need to make some changes to url_replacer to allow for that…)

[da2x]

Add support for twitter:title, twitter:description, twitter:image and twitter:image:src tags (for both summary and summary_large_image)

Should not be needed. Twitter will use OpenGraph when these are not provided. Only thing you achieve is to fatten the head.

[Kwpolska]

There is also og:locale and og:locale:alternate meta tags which can be used to support multilanguage posts, but I'm not sure it is possible to provide appropriate locale names (Nikola uses 2-letter language codes).

We can easily create locale codes if we needed some. Does anyone really care about having those tags? Or reading their contents?

[max-arnold]

Should not be needed. Twitter will use OpenGraph when these are not provided.

Only if there are no Twitter Card related tags at all, and I haven't tested how they are displayed. Since Nikola has explicit support for Twitter Cards, it is worth adding them. Another option is to drop support completely and rely on OpenGraph only.

[max-arnold]

Regarding locale codes, I do not have any strong need to have them right now (just noticed some warnings while using validation tool).

[Kwpolska]

Should not be needed. Twitter will use OpenGraph when these are not provided.

Only if there are no Twitter Card related tags at all, and I haven't tested how they are displayed. Since Nikola has explicit support for Twitter Cards, it is worth adding them. Another option is to drop support completely and rely on OpenGraph only.

According to the getting started guide, you can mix og: and twitter: tags.

[da2x]

I have tested, and whats on master now works with Twitter Cards.

[max-arnold]

I did some more testing, and can confirm this too. The problem is that Twitter ignores relative urls for og:image. While it is extremely convenient to use them in source markup:

previewimage: /images/2014/11/post-header.jpg

But final meta tag should be absolute:

<meta property="og:image" content="http://example.com/blog/2014/11/post-header.jpg">

Then Twitter validates both summary and summary_large_image cards correctly and pulls image link from og:image.

[Kwpolska]

Add support for https://dev.twitter.com/cards/types/summary-large-image card (document that it is actually possible to change default card type using TWITTER_CARD = {'card': '...'} configuration parameter).

Is e4cf54c enough?

[Kwpolska]

There, all done with two issues fixed and two rejected.

[max-arnold]

Is e4cf54c enough?

It think it is worth adding one-liner to manual.txt:

.. code-block:: python
TWITTER_CARD = {
'use_twitter_cards': True, # enable Twitter Cards / Open Graph
'site': '@website', # twitter nick for the website
# 'site:id': 123456, # Same as site, but the website's Twitter user ID instead.
# 'creator': '@username', # Username for the content creator / author.
'creator:id': 654321, # Same as creator, but the Twitter user's ID.
# 'card': 'summary', # Card type, you can also use 'summary_large_image', see https://dev.twitter.com/cards/types
}

[Kwpolska]

there, fixed and also revamped the thing a little more.

also, the syntax on GitHub is:

```python
code goes here
```

[max-arnold]

This was simply copy-pasted as is from the manual, which is in rst format :)

[martin-ueding]

It seems that with the current boot4 theme the URL is a relative one again. So now the card on Twitter does not work again, because it cannot find the image. I presume that the theme has to be changed such that it uses the full URL?

[Kwpolska]

@martin-ueding Cannot reproduce with v8.1.1:

.. previewimage: /hello.png
<meta property="og:image" content="https://example.com/hello.png">

.. previewimage: hello2.png
<meta property="og:image" content="https://example.com/posts/welcome-to-nikola/hello2.png">

(We recommend to use a path starting with /.)

[martin-ueding]

I have found the issue! In the conf.py I had set SITE_URL = '/' because the logo would always redirect me to the production site, even when testing locally using nikola serve. This meant that without realizing it I would switch to production and get confused as why changes did not show up. Now with the full URL there, it works like a charm.

[Kwpolska]

(The behavior you’re referring to was fixed 5 months ago, in 440583c/#3229/#3355).

[martin-ueding]

I also found that this has improved and I am very happy out it! Now everything works just fine. And since the switch to Nikola, I have been blogging so much more 😊.