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.
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.
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
<meta> tags use the attribute
name and some
<meta property="og:description" content="..." /> <meta property="article:description" content="..." /> <meta name="twitter:description" content="..." />
I looked up on MDN's page on
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
It seems though that linkedin cuts UTM parameters from the URL I pasted in there. Why?