Social media is key to sharing and promoting web content.
OG Tags help you control how your content appears when shared on social media.
In this blog post, we'll dive into OG Tags and how to use them to enhance your website's social presence.
What Are Open Graph Meta Tags?
OG Tags are HTML meta tags that provide structured information about web pages for social media.
They allow you to control how your shared links appear on social platforms like Facebook, Twitter, and LinkedIn.
OG Tags include metadata such as the title, description, image, and type of content.
How to use Open Graph Meta Tags?
To use Open Graph Meta Tags, you need to add them to the <head> section of your HTML code.
Basic Open Graph Meta Tags
og:title - The title of your web page.
og:type - The type of content on your web page, such as "article", "blog post", or "website".
og:image - The URL of an image that you want to represent your web page on social media.
og:description - A brief description of your web page.
og:site_name - The name of your website.
og:url - The canonical URL of your web page.
og:locale - The language code of your web page.
Twitter meta tags
twitter:title - The title of the page.
twitter:description - A short description of the page.
twitter:image - The image to be displayed when the page is shared.
twitter:card - The type of Twitter Card to use. The most common value is "summary", but there are other types of Twitter Cards available.
twitter:site - The Twitter handle for your website.
twitter:creator - The Twitter handle for the author of the page (username).
Example of Open Graph and Twitter meta tags in HTML:
<head>
<meta property="og:title" content="My Awesome Blog Post" />
<meta property="og:description" content="This is a really great blog post about all sorts of awesome things." />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/my-awesome-blog-post" />
<meta property="og:type" content="article" />
<meta property="og:locale" content="en_US" />
<meta property="og:site_name" content="My Awesome Blog" />
<meta property="twitter:title" content="My Awesome Blog Post" />
<meta property="twitter:description" content="This is a really great blog post about all sorts of awesome things." />
<meta property="twitter:image" content="https://example.com/image.jpg" />
<meta property="twitter:card" content="summary" />
<meta property="twitter:site" content="@myawesomeblog" />
<meta property="twitter:creator" content="@janedoe" />
</head>
Reference: Visit more og meta tags
Conclusion
Open Graph Meta Tags (OG Tags) are snippets of code that you can add to your website to control how your content appears when it is shared on social media. OG Tags provide social media platforms with information such as the title, description, and image of your content. This information is then used to generate a preview of your content when it is shared on social media.
Top comments (0)