Ravi Kumar Profile picture
Web Developer | Technical Writer @lambdatesting | Sharing β€’ Web Dev Tips β€’ resources β€’ AI β€’ No-code tools β€’ | DM for Collaboration

Jan 24, 2022, 7 tweets

Do you know about the HTML Meta tag for social media cards?

πŸ§΅πŸ‘‡

1⃣ Introduction

β€” A social media card is a visual representation of the content of a specific web page on a social media platform it is being shared on.

β€” If your website has a social media card, it looks more appealing and provides additional information for people.

2⃣ Twitter card tag

β€” The Summary Card can be used for many kinds of web content, from blog posts and news articles to products and restaurants.

β€” It gives the reader a preview of the content before clicking through to your website.

3⃣ Meta tag attribute

Twitter: title - represents the web page title
Twitter: description - the description of your web page
Twitter: image - an image URL

NoteπŸ’‘
all meta tags should be placed at the head of your web page.

4⃣ Open Graph meta tags

β€” The Open Graph meta tags are used by most of the social media platforms, most known are Facebook and LinkedIn.

β€” Open Graph meta tags to take control over how your content appears on Facebook & LinkedIn like image, content, etc.

5⃣ Attributes

These meta tags have a property attribute that contains a value with the og: prefix and the content attribute:

og: title - represents the web page title
og: description - the description of your web page
of: image - an image URL
og: URL - the URL of your web page

Thanks for reading the thread, if you found it useful give the first one a retweet and if you have any suggestions tell me in a comment

πŸ”—πŸ‘‡

Share this Scrolly Tale with your friends.

A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.

Keep scrolling