Please support me with,
Would you like to provide more information when your website link is shared? The HTML meta tag makes this possible. You can display the information of the website using the meta tags of Twitter and Opengraph.
Twitter Meta Tags
Have you ever seen links shared on Twitter in the form above? This is because the website used Twitter's meta tag.
To display the above, you need to add the following meta tags inside the <head></head> of your website HTML.
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="{{username}}">
<meta name="twitter:creator" content="{{username}}">
<meta name="twitter:title" content="{{title}}">
<meta name="twitter:description" content="{{description}}">
<meta name="twitter:image" content="{{image}}">
| Name | Content | Description |
|---|---|---|
| twitter:card | summary_large_image | It should be summary_large_image for now. |
| twitter:site | {{username}} |
The @username of website. |
| twitter:creator | {{username}} |
The @username of content creator. |
| twitter:title | {{title}} |
Title of content (max 70 characters). |
| twitter:description | {{description}} |
Description of content (maximum 200 characters). |
| twitter:image | {{image}} |
URL of image to use in the card. Images must be less than 5MB in size. JPG, PNG, WEBP and GIF formats are supported. |
This is meta tags for Summary with large image. You can also set tags for a Player or an App. For more details, see Twitter Cards Documentation.
Open Graph Meta Tags
The Open Graph protocol enables developers to integrate their pages into Facebook's global mapping/tracking tool Social Graph.
- from Wikipedia
Open Graph is a meta tag that works in a broader area. This is used when sharing your pages not only on Facebook, but also on most platforms such as LinkedIn, Discord, and KakaoTalk.
<meta property="og:type" content="website">
<meta property="og:url" content="{{url}}">
<meta property="og:title" content="{{title}}">
<meta property="og:description" content="{{description}}">
<meta property="og:image" content="{{image}}">
| Property | Content | Description |
|---|---|---|
| og:type | website | It should be website for now. |
| og:url | {{url}} |
The canonical URL of your object that will be used as its permanent ID in the graph. |
| og:title | {{title}} |
The title of your object as it should appear within the graph. |
| og:description | {{description}} |
A one to two sentence description of your object. |
| og:image | {{image}} |
An image URL which should represent your object within the graph. |
Note that Open Graph define metadata with property attribute unlike Twitter.
And Open Graph also display various contents not only the website.
For more details, see Open Graph Documentation.
Test Twitter Card
To test your Twitter meta tags, use Twitter Card Validator.
Test Open Graph
You can also test Open Graph with Share Debugger.
Conclusion
Social meta tags are an important element if your website or web application is to be shared with people. This can help people get more information about your site and spark their interest.