DEV Community

Irina
Irina

Posted on

Adding social share tags to your website

If we want to share our website on social media such as Twitter, FB or LinkedIn, we may need to ensure our site is shareable and has a preview image, title and description.

In order to do so, we need to include special metatags into our HTML head. Tags that have twitter: keyword are required for Twitter cards, and tags with og: keyword are for Facebook and LinkedIn cards.

Here's an example of tags I added for a website I just finished and wanted to share on social.

    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@irinakramer" />
    <meta name="twitter:title" content="Evaluate News with NLP" />
    <meta name="twitter:description"
        content="Check an article for sentiment such as positivity, subjectivity and irony. Powered by MeaningCloud API." />
    <meta name="twitter:image" content="https://evaluate-news-nlp-17.netlify.app/evaluate-news-screenshot.png" />
    <meta property="og:title" content="Evaluate News with NLP" />
    <meta property="og:description"
        content="Check an article for sentiment such as positivity, subjectivity and irony. Powered by MeaningCloud API." />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://evaluate-news-nlp-17.netlify.app/" />
    <meta property="og:image" content="https://evaluate-news-nlp-17.netlify.app/evaluate-news-screenshot.png" />
Enter fullscreen mode Exit fullscreen mode

This is how this tweet appears in my feed:
Alt Text

Just to make sure our tags work correctly, we can validate them on Twitter and Facebook developer sites:
https://cards-dev.twitter.com/validator
https://developers.facebook.com/tools/debug/

There are more options for these tags and details can be found here:
https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup
https://ogp.me/

PS: This was my first ever blog post, so please forgive if something isn't perfect. Feedback is appreciated!

Top comments (2)

Collapse
 
andypiper profile image
Andy Piper

This is great! Also worth noting that you can validate your links with Twitter at cards-dev.twitter.com/validator and with Facebook at developers.facebook.com/tools/debug/

Collapse
 
irinakramer profile image
Irina

Very good suggestion! Thanks!