Open Graph Tags
Meta tags that control how your content appears when shared on social media platforms.
The Definition
Open Graph (OG) tags are HTML meta elements originally created by Facebook that control the title, description, image, and URL shown when your page is shared on social media. Twitter Cards serve a similar purpose for Twitter/X. Together, they define your content's social media preview appearance.
Why It Matters
Pages with properly configured OG tags get significantly more engagement when shared on social media. A compelling image and title can increase click-through rates from social shares by 2-3x. Missing OG tags result in poor-looking previews that discourage clicks.
Best Practices
Set og:image to at least 1200x630 pixels for optimal display on Facebook, LinkedIn, and other platforms
Include both Open Graph tags and Twitter Card tags — Twitter falls back to OG tags, but dedicated Twitter tags give you more control
Use unique og:title and og:description for each page rather than duplicating your SEO title and meta description
Test social previews with Facebook Sharing Debugger and Twitter Card Validator before sharing important pages
Include og:type (article, website, product) for proper content categorization on social platforms
Set og:url to the canonical URL of the page to avoid duplicate content signals in social graph
Mistakes to Avoid
- 1
Using images that are too small (under 200x200) resulting in no image preview on social platforms
- 2
Forgetting to update OG tags when page content changes, showing stale previews on social shares
- 3
Missing og:image:width and og:image:height, causing slow rendering of social previews
- 4
Not setting a fallback default OG image for pages without specific featured images
Audit Checks
How Digispot AI identifies and fixes related issues
The page has no preview image for social media (the og:image and twitter:image tags), so shared links show no picture.
Impact: Links shared on Facebook, LinkedIn, or X look bare and get far fewer clicks without an image.
Add an og:image meta tag pointing to a 1200×630px image. • Add a matching twitter:image tag for X/Twitter cards. • Use a full https:// URL so the image resolves everywhere.
The page has no social title tags (og:title / twitter:title).
Impact: Without them, shared links show a poor or missing headline, reducing clicks.
Add og:title and twitter:title meta tags. • Use a compelling, accurate headline. • Test with a social share debugger.
The page has no social description tags (og:description / twitter:description).
Impact: Shared links show no summary, which lowers click-through from social media.
Add og:description and twitter:description meta tags. • Summarize the page in one or two sentences. • Test with a social share debugger.
A social media tag (like og:url or og:image) uses an incomplete URL.
Impact: Social platforms can't build a proper preview from a broken URL, so shares look bare.
Use full, absolute https:// URLs in og: and twitter: tags. • Confirm the linked image and page resolve. • Test with a social share debugger.
You set a social share image but gave it no alt text (og:image:alt / twitter:image:alt).
Impact: Screen-reader users and some platforms get no description of the shared image.
Add an og:image:alt meta tag describing the share image. • Add a matching twitter:image:alt for Twitter cards. • Keep it concise and descriptive (what the image shows).
Your social share image isn't a recommended size.
Impact: Wrong dimensions can crop or distort the preview when your link is shared.
Use 1200×630px for og:image. • Use 1200×600px for Twitter cards. • Test with a social share debugger.