What are Open Graph (OG) Meta Tags?
The Open Graph protocol was originally created by Facebook to standardize how web pages are represented in a social graph. When you share a link on Facebook, LinkedIn, Twitter, Slack, or Discord, the platform scrapes the page's HTML looking for specific <meta> tags. These tags tell the platform exactly what title, description, and image to use when constructing the clickable "card" preview.
Why Do You Need Them?
Without Open Graph tags, social platforms have to guess what your page is about. They might grab a random heading for the title, a navigation menu for the description, and a tiny logo for the image. This results in ugly, unclickable links that hurt your brand's credibility and drastically lower your Click-Through Rate (CTR).
The Structure of an OG Tag
Open graph tags are placed inside the <head> section of your HTML document. They look like this:
<meta property="og:title" content="Your Catchy Headline Here" />
Twitter Cards vs Open Graph
While Twitter supports standard Open Graph tags, they also have their own proprietary tags (e.g., twitter:card). It is best practice to include both sets of tags to ensure maximum compatibility. Setting twitter:card to summary_large_image guarantees that your link will generate a full-width image banner on Twitter instead of a small thumbnail.