Configure your websites for sharing on social media

While introducing social media integrations into Otto, we had to add functionality to our redirects and landing-pages to fully support sharing on social media. I wanted to share a few tips with our users to help you configure your websites better for social media as well.

It’s all about the meta

So to make your websites look better on social media, you need to add a couple of meta tags.

Metadata is data (information) about data.
The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.
Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.

Quote from: www.w3schools.com/tags/tag_meta.asp

To make your posts and websites look better on social media, you need to make sure they have a couple of og-tags:

For Facebook and LinkedIn:

og:title – The title of the page
og:description – The description of the page
og:url – The direct link to your page
og:image – The absolute url to the preview image of your link

Here is an example:

<meta property="og:title" content="My Shared Article Title" />
<meta property="og:description" content="Description of shared article" />
<meta property="og:url" content="http://example.com/my_article.html" />
<meta property="og:image" content="http://example.com/foo.jpg" />

Twitter also has some extra tags that you can add:

twitter:card – The card type. Usually “summary”
twitter:site – @username of website. Either twitter:site or twitter:site:id is required.
twitter:site:id – Same as twitter:site, but the user’s Twitter ID. Either twitter:site or twitter:site:id is required.
twitter:creator – @username of content creator

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@twitter-site" />
<meta name="twitter:creator" content="@twitter-creator" />

All of these tags needs to be added into the <head></head> tag of your website to work.

You can read more here:

Twitter tags: https://dev.twitter.com/cards/markup
Facebook: https://developers.facebook.com/docs/sharing/webmasters/#markup
LinkedIn: https://www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin

Leave a Reply

Your email address will not be published. Required fields are marked *