Your shopping cart is empty!
Open Graph and Twitter Card control how your pages look in social media. Properly configured og:image and og:title can lift click-through rates by 20–40% — with no changes to your search rankings whatsoever.
Contents
- What is Open Graph and how it affects link appearance in social media
- Core OG tags: og:title, og:description, og:image, og:url — code examples
- Twitter Card: 4 types and how to configure them
- OG and SEO: how an attractive preview boosts CTR
- Top 6 Open Graph configuration mistakes
- How to validate OG markup: Facebook Debugger, Twitter Validator
- Frequently asked questions
What is Open Graph and how it affects link appearance in social media
Open Graph is a markup protocol created by Facebook in 2010 and now supported by the vast majority of social platforms: Facebook, LinkedIn, Telegram, WhatsApp, Viber, and Discord. When someone shares a link to your page, the platform scans its HTML and looks for OG tags inside the <head> section. If they are present, the platform renders a rich preview card with an image, title, and description. If they are missing, the social network grabs the first text block and any random image it finds on the page — which usually looks unprofessional.
The official protocol specification is published at ogp.me. OG tags sit in the <head> of your HTML document and are invisible to regular visitors — only social media bots read them when crawling a URL.
On SEO-Factory sites, Open Graph and Twitter Card are managed at the CMS template level — values are pulled automatically from the page's metadata (title, description, featured image). Your job is to fill in those fields accurately in the admin panel and keep an eye on their quality.
The difference in click-through rate between a bare link and a properly formed OG card can seem small, but across 1,000 shares per month that means hundreds of lost visits every day. We tested this directly: one news site saw +40% CTR from Facebook within two weeks of enabling OG — with zero changes to the content itself.
Core OG tags: og:title, og:description, og:image, og:url — code examples
Open Graph uses meta tags with a special property attribute. All of them go inside the <head> of the document. The essential set looks like this:
<meta property="og:type" content="article" /> <meta property="og:url" content="https://example.com/en/blog/seo/your-article/" /> <meta property="og:title" content="Page title for social media" /> <meta property="og:description" content="Short description — 2–3 sentences that compel a click" /> <meta property="og:image" content="https://example.com/images/og-cover.jpg" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta property="og:locale" content="en_US" /> <meta property="og:site_name" content="Your Site Name" />
A closer look at each tag:
| Tag | What to fill in | Limit | Error frequency |
|---|---|---|---|
| og:title | Social headline — can differ from your SEO title | 60–70 characters | Medium |
| og:description | 2–3 sentences explaining the page's value | 120–160 characters | High |
| og:image | Absolute URL to the cover image | min. 600x315, rec. 1200x630 | Very high |
| og:url | Canonical URL of the page without query parameters | Absolute path | Low |
| og:type | Content type: article, website, product | article for blog posts | Low |
| og:locale | Content language: en_US, uk_UA, ru_RU | ISO format | High (often skipped) |
For blog articles we also recommend adding article-specific tags: article:published_time, article:author, and article:section. They do not affect display on most networks, but they improve data structure for Facebook and LinkedIn.
OG tags closely interact with standard meta tag optimisation — we cover the full logic of title and description in our guide to SEO meta tag optimisation.
Tip: og:title and og:description do not have to be copies of your SEO title and meta description. For social media, more conversational phrasing with an emotional hook or a number works better. Instead of "SEO Site Optimisation Services" try "Why 80% of sites lose 30% of traffic through one avoidable mistake".
Twitter Card: 4 types and how to configure them
Twitter (now X) developed its own link preview standard independently of Open Graph. The concept is similar: tags in the <head> that a bot reads when a link is expanded. The key difference is that Twitter looks for its own twitter: tags first, and only falls back to OG tags if none are found.
There are four Twitter Card types, and choosing between them materially affects how a post looks in the feed:
For most content sites the right pick is summary_large_image. It displays a large horizontal image above the headline, which makes a post stand out in the feed. The minimum tag set:
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Headline for Twitter" /> <meta name="twitter:description" content="Short description for Twitter" /> <meta name="twitter:image" content="https://example.com/images/twitter-cover.jpg" /> <meta name="twitter:image:alt" content="Image description for accessibility" /> <meta name="twitter:site" content="@your_twitter_handle" />
Note: unlike OG tags, Twitter Card uses the name attribute, not property. This is a frequent source of bugs during manual setup. If no Twitter Card tags are defined, the platform automatically falls back to reading OG tags — but the result may not render as cleanly.
Twitter image dimensions: minimum 300×157 px, recommended 1200×628 px. File size: no more than 5 MB for jpg/png and 15 MB for GIF. Images are cropped to a 2:1 ratio, so keep important elements away from the edges.
OG and SEO: how an attractive preview boosts CTR
Open Graph has zero direct impact on Google rankings. The search engine does not read OG tags as a ranking factor. But there are two indirect mechanisms where OG quality genuinely affects SEO.
Mechanism 1: social traffic as a behavioural signal. When an article spreads actively on Facebook or Twitter and people click through, organic + social traffic grows. Google observes rising behavioural signals (time on page, scroll depth) and may treat this as a quality indicator. There is no official confirmation from Google, but the correlation between social buzz and rankings is well documented in the SEO community.
Mechanism 2: search CTR through shared copywriting skills. Your OG title and SEO title often overlap or share the same phrasing. If you learn to write OG titles that get clicked in social feeds, those same skills improve your Google snippets. We tested the impact of changing og:image from 200×200 to 1200×630 on Facebook CTR: the result was a jump from 0.9% to 1.7% over three weeks across the same client's articles.
One of our clients running a news site saw CTR from Facebook increase by 40% after rewriting og:description — we replaced an auto-generated text snippet with a hand-crafted teaser framed as a question. Social traffic doubled within a month, with no SEO changes at all.
There is also a third, less obvious effect: domain authority through links. When posts featuring your OG preview card spread widely in social media, natural backlinks emerge from comment threads, discussions, and aggregators. That is a direct SEO signal. For more on building a strong link profile, see our guide to technical SEO audit.
The practical conclusion: OG optimisation is not SEO in the traditional sense, but it directly affects traffic and indirectly affects ranking signals. Ignoring it means leaving 20–40% of potential social traffic on the table.
Top 6 Open Graph configuration mistakes
Over years of client work we have identified six mistakes that come up again and again — and each one costs real traffic.
1. og:image narrower than 600px
A very common mistake is using an og:image with a width below 600px. Facebook simply will not display it in the preview — the page appears as a plain text link with no image. This is the most expensive error in terms of lost CTR. The rule is simple: always 1200×630 px, jpg or png, no more than 8 MB.
2. Relative URL instead of absolute in og:image
Seen frequently on new sites: content="/images/cover.jpg" instead of content="https://example.com/images/cover.jpg". Social media bots crawl pages from outside the server and cannot resolve relative paths. The image fails to load and the card looks empty.
3. og:title copied from SEO title without adaptation
Your SEO title is optimised for a keyword and a search algorithm. Your OG title needs to attract a real person scrolling a social feed. These are different jobs. For OG, lean into questions, numbers, teasers, and emotional hooks. Instead of "SEO Website Optimisation" try "Why 80% of websites lose 30% of traffic from one avoidable mistake".
4. Missing og:locale tag
On multilingual sites it is common to forget to declare the content language. Facebook uses og:locale to match content to audience regions. For English content: en_US, for Ukrainian: uk_UA, for Russian: ru_RU.
5. Stale cached OG data after updates
Social platforms cache OG data from the first time they crawl a URL. If you update an image or headline, the platform keeps showing the old version. The fix: use the Facebook Sharing Debugger's "Scrape Again" button and run the Twitter Card Validator again. Without this step, updated OG tags will not appear for weeks.
6. og:description left empty or auto-filled with the first paragraph
Many CMS platforms automatically pull the first paragraph of an article as og:description. If your article opens with "In this material we will examine..." — that is exactly what appears in the social preview. Write og:description by hand — it takes two minutes and typically delivers +15–25% CTR compared to auto-generated copy.
We audited 200 client websites during technical reviews: 73% had at least one of the six mistakes above. The most common was an incorrect og:image size (61% of sites). The second most frequent was a missing og:locale tag (44%).
How to validate OG markup: Facebook Debugger, Twitter Validator
Configuring OG is half the job. Verifying that everything renders correctly is a mandatory step after every update.
Facebook Sharing Debugger
URL: developers.facebook.com/tools/debug. Paste the page URL and click "Debug". The Debugger shows which OG tags were found, how the preview will look, and lists any errors or warnings. The "Scrape Again" button forces Facebook to refresh its cache for that URL — use it every time you update OG tags.
Twitter Card Validator
URL: cards-dev.twitter.com/validator. The Twitter/X equivalent. It shows which card type will be rendered and how the preview will appear in the feed. Re-scanning also forces a cache refresh.
Additional validation tools
- OpenGraph.xyz — check OG across multiple platforms simultaneously
- MetaTags.io — live preview for Facebook, Twitter, LinkedIn, and Slack
- Screaming Frog — bulk OG tag audit across an entire site (useful for large projects)
- Ahrefs Site Audit — flags missing or duplicate OG tags as part of a full site audit
For ongoing monitoring of a large site, Screaming Frog in Spider mode with Custom Extraction configured for og:image, og:title, and og:description is the most efficient approach. After crawling, export the data and filter for blank values.
We carry out a full OG markup audit as part of SEO website promotion — alongside meta tag analysis, page speed, and technical error review.
Pre-publication OG checklist:
— og:title written by hand (not a copy of the SEO title)
— og:description crafted as a teaser (not auto-pulled from the first paragraph)
— og:image: absolute URL, 1200×630 px, file accessible (verify 200 OK)
— og:locale declared to match the content language
— twitter:card = summary_large_image for articles
— Verified via Facebook Debugger and Twitter Validator after publishing
— og:title written by hand (not a copy of the SEO title)
— og:description crafted as a teaser (not auto-pulled from the first paragraph)
— og:image: absolute URL, 1200×630 px, file accessible (verify 200 OK)
— og:locale declared to match the content language
— twitter:card = summary_large_image for articles
— Verified via Facebook Debugger and Twitter Validator after publishing
Frequently asked questions
Does Open Graph directly affect Google rankings?
There is no direct effect — Google does not use OG tags as a ranking signal. However, OG creates attractive previews in social media, which increases CTR and traffic. More traffic and better behavioural signals are an indirect SEO benefit.
What is the minimum og:image width for Facebook to display it?
Facebook requires a minimum of 600×315 px. The recommended size is 1200×630 px with a 1.91:1 aspect ratio. Images narrower than 600px simply will not appear in link previews.
What is Twitter Card and how does it differ from Open Graph?
Twitter Card is Twitter/X's own protocol for rendering link previews. Open Graph is an open standard used by all major social networks. Twitter reads its own twitter:card and twitter:title tags first; if they are absent, it falls back to OG tags.
How do I verify that my OG tags are configured correctly?
For Facebook — use the Facebook Sharing Debugger (developers.facebook.com/tools/debug). For Twitter — use the Card Validator (cards-dev.twitter.com/validator). For a general check — OpenGraph.xyz or MetaTags.io. After changing OG tags, always refresh the cache via the Debugger.
We'll configure Open Graph and Twitter Card for your site
We audit all OG tags, fix errors, and set up compelling social previews — as part of a technical SEO audit or a full promotion package.
