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" />
This is how this tweet appears in my feed:
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)
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/
Very good suggestion! Thanks!