On a friend's linkedin profile I saw some links to his content and since linkedin picks up in traffic and professional relevance, I thought I need to get my site's traffic better shareable.

What am I Talking About?

Every website with content can be shared on other/social media, e.g. I can post a link to a video, blog post, tweet on linkedin or twitter, or any other online site. Most of those sites have a preview of the content.

To provide the data for those previews, I need to add certain tags to my website, so that those "consuming sites" can build their previews.

TL;DR
See these two files (the base template and the blog post template) for the code I use in the templates for allowing these previews for my blog posts.

Resources

There are a lot of resources out there, and I had a hard time finding the right and relevant ones. I want to list them here. As usual, I do that so I will find them later again, because I will forget these kinda things.

Twitter, LinkedIn, Facebook, Pinterest - One Preview Tool 🤷🏽‍♂️

On socialsharepreview.com one can check these four social media previews. The tool is nice to get a quick overview and feeling for what tags to have on the site. I also had the impression not all info here are fully accurate. So better use multiple tools and double check.

The Open Graph protocol 💡

The Open Graph protocol was introduced by Facebook in 2010. It mainly defines how to built the property attributes in meta tags like this <meta property="og:title" content="..." />. It seems to be used by multiple sites, but I didn't investigate that any deeper.

LinkedIn Preview Tool 👍🏿

They call their tool "Post Inspector". Here you get a preview of your link and good hints how to improve it.

Twitter Preview Tool 👎🏽

They call it the "Card validator". Here you get a preview of your link and no real hints how to improve it.

A Good Summary 👌🏾 👩🏼‍💻

"The Essential Meta Tags for Social Media" on css-tricks - is an article from 2016 (so it might not be the most up to date) stating very well what needs to be implemented and which tags can also be used to reduce the page size. This article lacks linkedin completely though, which I note because it was what got me started.

Parsers and publishing tools

On the Open Graph page there are some tools listed. The most useful ones are the testing tools. Though those of competitors like twitter and linkedin are missing here.

Medium's Help

On Medium's Help page there are some info about the three major social media sites making it easy to test links and their previews, but all the above tools should have covered it already.

Meta Tag is Strange

Some <meta> tags use the attribute name and some property.

<meta property="og:description" content="..." />
<meta property="article:description" content="..." />
<meta name="twitter:description" content="..." />

I looked up on MDN's page on <meta> what the different attributes mean, but property is not even listed there. It is important to use the right ones, otherwise it won't work. I had broken my linkedin previews (see the breaking commit) because I tried to apply only what MDN states (and what I assume is standard). The fixing commit is here. The reason seems to be RDF, as someone stated on stackoverflow.

Plausible Supports UTM Parameters

At the same time I discovered that plausible.io the analytics tool on the site supports UTM parameters so I can better analyze which traffic source the readers came from.

It seems though that linkedin cuts UTM parameters from the URL I pasted in there. Why?