Understanding Open Graph (OG) and Twitter Card Meta Tags
2 min readJul 4, 2023
Open Graph (OG) and Twitter Card Meta Tags are used to improve the appearance and functionality of shared links on social media platforms.
Open Graph (OG) Meta Tags
Here are the commonly used OG meta tags:
- og:title: The title of the shared link.
- og:description: A brief description of the content.
- og:image: The image to be displayed in the link preview.
- og:url: The URL of the shared link.
- og:type: The type of content, such as article, video, or product.
- og:site_name: The name of the website.
- og:locale: The language and country of the content.
Twitter Card Meta Tags
Here are the commonly used Twitter Card meta tags:
- twitter:card : The type of Twitter card, such as summary, summary_large_image, or app.
- twitter:title: The title of the shared link.
- twitter:description: A brief description of the content.
- twitter:image: The image to be displayed in the link preview.
- twitter:url: The URL of the shared link.
- twitter:site: The Twitter handle of the website.
- twitter:creator: The Twitter handle of the content creator.
Here is an example code snippet of how to include OG and Twitter Card meta tags in the HTML head section of your web page:
<head>
<meta property="og:title" content="Title of the shared link">
<meta property="og:description" content="Description of the content">
<meta property="og:image" content="URL of the image">
<meta property="og:url" content="URL of the shared link">
<meta property="og:type" content="Type of content">
<meta property="og:site_name" content="Name of the website">
<meta property="og:locale" content="Language and country of the content">
<meta name="twitter:card" content="Type of Twitter card">
<meta name="twitter:title" content="Title of the shared link">
<meta name="twitter:description" content="Description of the content">
<meta name="twitter:image" content="URL of the image">
<meta name="twitter:url" content="URL of the shared link">
<meta name="twitter:site" content="Twitter handle of the website">
<meta name="twitter:creator" content="Twitter handle of the content creator"></head>
Make sure to replace the values in the content attribute with the appropriate content for your web page.
That’s all for now. 😊
