Open Graph tags for LinkedIn and Facebook previews

Open graph tags tell LinkedIn, Facebook, and many chat apps what title, description, and image to show when someone pastes your URL. Without them, scrapers invent a card from random page text or leave the preview blank. With them, you control the share story before the post goes live. This guide covers the social preview scenario: which properties matter, how Facebook and LinkedIn read the same markup, how to paste tags from the Open Graph tags generator, and how to re-scrape after deploy. For pixel size and aspect ratio, use the companion OG image size guide instead of repeating that math here.

Why LinkedIn and Facebook previews fail without tags

You ship a landing page. In the browser it looks finished. Someone pastes the link into LinkedIn or Facebook, and the card shows a wrong headline, a random footer logo, or no image at all. That mismatch is almost always missing or broken Open Graph markup on the live URL the scraper fetched.

Scrapers do not “see” your CSS layout the way you do. They read a small set of meta properties in the HTML head, then fetch the image URL you declare. If those properties are absent, they fall back to heuristics: the first large image, the <title> tag, or a snippet of body text. Heuristics are fine for a personal blog. They are unreliable for a product launch, a press URL, or a paid campaign landing page.

Caches make the problem feel random. You fix the tags, refresh your own browser, and the feed still shows yesterday’s card. Facebook and LinkedIn store prior scrapes. Until you force a re-fetch, the old preview wins. Teams waste hours redesigning the PNG when the real issue is stale cache or a relative image path the scraper cannot resolve.

People search open graph tags and open graph meta tags after a share already looked bad. The fix is a complete tag set on the public URL, then a debugger pass. Image size matters too, but size alone does not invent og:title or og:url.

What open graph tags control on the share card

Open Graph is a small vocabulary of meta properties. For link previews you care about a core set: og:title, og:description, og:image, og:url, and usually og:type. Optional width and height hints describe the image file. Twitter/X card tags often ride along so X previews stay aligned, but LinkedIn and Facebook still center on the OG properties.

Each property maps to a piece of the card. Title is the bold line. Description is the supporting sentence under it. Image is the large visual. URL is the canonical page the network should attribute. Type tells some consumers whether this is a website, article, or product-style object. You do not need every obscure OG extension for a marketing page. You need the core set present, absolute, and consistent.

These tags do not replace Google title and meta description. Search results use different fields and different length budgets. Social cards and SERP snippets can diverge on purpose. Write OG copy for a feed thumb; write Google titles for a blue link. Pair those Google fields with meta title length and meta description truncation when you edit both in one sitting.

Core properties you should set every time

Set og:title to the share headline you want on the card, not a stuffed keyword string. Set og:description to one or two plain sentences that finish the promise. Set og:image to a full https:// URL you already host. Set og:url to the canonical page URL people should land on. Set og:type to website for most marketing pages or article for blog posts when your stack supports it.

Match og:image:width and og:image:height to the real file when your template makes that easy. Those hints help some scrapers reserve layout. They do not fix a 404 or a relative path. Keep og:site_name if you want a consistent brand label across pages; skip it if your CMS already injects noise.

Duplicate OG blocks are a common failure. Two plugins both inject og:title, and scrapers pick the wrong one. View source on production and count how many times each property appears. One clear set beats three competing sets.

How Facebook and LinkedIn read the same markup

Both networks consume the Open Graph properties on your page. Facebook’s Sharing Debugger (often found via searches for facebook open graph debugger or sharing debugger) shows the tags it parsed and lets you scrape again. LinkedIn’s Post Inspector does the same job for LinkedIn cards. A clean scrape in one tool does not auto-clear the other network’s cache.

Facebook feed cards lean on title, description, and a large landscape image. LinkedIn adds its own chrome and professional feed habits: busy collage images and tiny captions look worse there. Company page composers sometimes apply default images that override a page’s OG tags in specific flows. If a URL looks wrong only from the company composer, check page settings before you rebuild markup.

Messenger, WhatsApp, Slack, and iMessage often read OG data too, then render smaller thumbnails. Design for the large LinkedIn/Facebook card first. Accept that chat apps will shrink the same asset.

Write og:title, og:description, and og:url for the card

Treat the share card as a tiny ad for the page. The title should name the outcome or offer in plain language. The description should add one concrete detail: who it is for, what they get, or why the link is worth a click. Leave room for the network’s truncation. Long paragraphs become ellipses in the feed.

Do not paste your full Google title tag into og:title by default. Google titles often end with | Brand and sit near a pixel budget for SERPs. Social titles can be shorter and more conversational. Likewise, og:description can differ from the meta description you tune for search. Sync them when one story serves both; split them when the feed needs a sharper hook.

og:url should match the canonical URL you want shared. If the page redirects from www to apex, or from HTTP to HTTPS, put the final URL in the tag. Scrapers that land on a redirect chain sometimes cache the wrong variant. Keep UTM parameters out of og:url when you can; put campaign tracking on the shared link in the composer instead, or accept that some teams deliberately put UTMs in OG and live with noisier analytics.

Titles and descriptions that work in a feed

Lead with the human-readable claim. “Q3 pricing update for existing customers” beats “Pricing | Acme | Official.” Avoid ALL CAPS. Avoid stuffing three keywords into one line. The card already shows your domain or site name in many surfaces.

Keep og:description under a few short sentences. Front-load the useful clause. Mentions of “click here” waste space. Mentions of the date or version help when the page changes often and you need people to notice a refresh.

If legal requires a disclaimer, put it on the landing page, not in the OG description. Disclaimers truncate into nonsense on mobile cards.

Absolute URLs only

Every image and page URL in OG tags must be absolute: scheme, host, and path. Relative paths like /images/share.png fail for scrapers that resolve against unexpected bases. Protocol-relative //cdn.example.com/... is brittle; prefer explicit https://.

Host the image on a public HTTPS origin the scrapers can fetch without a login cookie. Staging sites behind basic auth produce empty cards for everyone outside the VPN. If you must preview from staging, use a public temporary URL or a tunnel that does not demand credentials for the image fetch.

When you replace art, prefer a new filename so caches cannot serve old bytes under the same path. Update og:image, redeploy, then scrape again.

Point og:image without redoing size math here

og:image is required for a strong card, but the pixel recipe lives in a dedicated guide. Use a landscape share file around 1200×630 and keep important art in the center safe zone. Read OG image size and aspect ratio for dimensions, crops, and file-weight habits. This article assumes you already have a stable HTTPS image URL.

Paste that URL into the tags. Confirm it opens in a private window. Confirm it is not blocked by hotlink rules or a robots rule that only your browser bypasses. Size guides cannot rescue a URL that returns 403 to Meta’s crawler.

If the debugger shows the right tags and a broken image, fix hosting first. If the image loads but looks crushed, fix the artboard using the size guide, then return here to re-scrape.

Generate and paste the markup

Once title, description, page URL, and image URL are decided, build the HTML. Toolsy’s Open Graph tags generator assembles the meta properties in your browser. You paste the four fields, copy the block, and drop it into your page <head>, CMS custom-head field, or framework metadata API. The tool does not host your image.

For ordinary search tags in the same edit session, use the Meta tags generator for title, description, robots, and canonical. Keep OG and classic meta in one pull request when your team reviews head changes together. That reduces the “we fixed Google but forgot LinkedIn” launch bug.

After paste, deploy to the public URL. View source on production, not only on localhost. CDNs, edge middleware, and CMS “SEO” toggles often strip or duplicate tags between environments.

What to verify in view-source

Search for og:title, og:description, og:image, and og:url. Each should appear once with the values you expect. Confirm the image URL is absolute. Confirm og:url matches the canonical you intend.

If your framework injects tags from a template and a plugin, disable one path. Competing injectors are the usual source of “debugger shows old title” tickets after a rename.

Soft check before the official debuggers

Fetch the page with a simple HTTP client or open it logged out. Confirm the response HTML contains the tags. Some SPAs only inject OG tags in the browser after JavaScript runs; social scrapers often do not execute your full app. Prefer server-rendered or prerendered OG tags for share-critical URLs.

Verify with Facebook and LinkedIn scrapers

Open Facebook’s Sharing Debugger and submit the public page URL. Read the scraped properties. If they are wrong, fix the live HTML, then scrape again. If they are right in the debugger but wrong in a feed, wait for cache expiry or reshare after another scrape. Overwriting the same image path without a re-scrape is the classic way to fight a stale card for a week.

Run LinkedIn’s Post Inspector on the same URL when LinkedIn is part of the launch. Inspectors are navigational tools people also find under linkedin post inspector and open graph checker searches. They validate; they do not generate your markup for you.

Test the networks you actually use. Send the URL to yourself in LinkedIn messaging and a Facebook post or messenger thread after the debugger looks clean. A green debugger row is necessary, not sufficient, when a campaign depends on first impression.

When the card still shows an old image, change the image filename, update og:image, redeploy, and scrape both networks again. Document that step in your launch checklist so the next person does not “fix” the PNG five times.

Related head work next to Open Graph

Social previews sit beside other on-page chores. After the card works, confirm Google title and description lengths still read in the SERP. Use the length guides linked above, then generate final head HTML with the Meta tags generator when you need a paste-ready block.

FAQ rich results are a separate track. If the page truly asks and answers questions, add FAQ JSON-LD with the FAQ schema without a plugin workflow. Do not dump marketing bullets into FAQ schema to “boost” a share card. Open Graph does not create FAQ rich results, and FAQ schema does not fix a blank LinkedIn preview.

Crawl rules still matter. If robots.txt blocks the page or the image path, scrapers may fail even when your browser can load them. Keep share-critical assets fetchable. Soft-private pages that should not be indexed belong on a noindex plan, not on hope that missing OG tags hide them.

Limits, caches, and platforms still spring on you

No blog post is a contract with Meta or LinkedIn. Card UIs, scrapers, and crop behavior change without a marketer-facing changelog. Re-check official debugger docs the week of a high-stakes launch.

Login walls, geo blocks, and bot challenges can hide tags from scrapers while your laptop sees a perfect page. Corporate CDNs that fingerprint user agents sometimes serve empty shells to Facebook’s crawler. If only one network fails, compare response HTML for that crawler instead of redesigning the brand mark.

Twitter/X cards overlap with OG but are not identical. Large image cards often reuse the same landscape master. If X is primary, validate with their card tools after OG is solid. Do not invent a second tag strategy until a live test proves the shared set fails.

Skip OG on pages you never share: thank-you URLs behind forms, internal tools, and thin tag archives. Focus effort on URLs that appear in campaigns, PR, and sales sequences.

Frequently asked questions

What are open graph tags?

Open graph tags are meta properties in your HTML head that describe how a link should look when shared. They typically include title, description, image, and URL fields scrapers read before building a preview card. Without them, LinkedIn and Facebook guess from page content and often guess wrong.

Which open graph meta tags do I need for Facebook and LinkedIn?

For most pages you need og:title, og:description, og:image, and og:url, plus a sensible og:type. Optional image width and height help when they match the real file. Extra protocol extensions rarely fix a blank card if the core four are missing or relative.

How do I add open graph tags to a website?

Decide the four field values, generate the meta HTML, and place that block in the page head on the public URL. The Open Graph tags generator builds the markup in the browser so you can paste it into a CMS field or template. Then deploy and confirm with view-source before you trust any debugger.

Why does my Facebook share preview still show the old image?

Facebook caches scrapes of your page and image URL. Replace the image with a new filename, update og:image, redeploy, and run the Sharing Debugger scrape again. Waiting without a re-scrape rarely clears a stubborn card, and redesigning the artboard alone will not flush the cache.

How do I check open graph tags after I publish?

View source on the live URL to confirm the properties exist once with the right values. Then run Facebook’s Sharing Debugger and LinkedIn’s Post Inspector on that URL. Finally send the link to yourself in each app so you see the real card chrome, not only the debugger table.

Do open graph tags replace my Google title and meta description?

No. Google primarily uses the <title> tag and meta description for search snippets, with its own truncation and rewrite habits. Open Graph controls social and many chat unfurls. You can sync the copy when one story works everywhere, or write separate strings when the feed needs a different hook.

Should og:title match my H1?

It can, but it does not have to. The H1 serves readers on the page. og:title serves skimmers in a feed. Keep them consistent enough that the click does not feel like bait, and different enough that each surface gets a clear line.

What is the difference between open graph tags and the Open Graph protocol docs?

The protocol is the broader specification and vocabulary. Day-to-day marketing work usually means the small set of meta tags that power link previews. You do not need to implement every optional object type to fix a LinkedIn or Facebook card.

Do I still need Twitter card tags if I set Open Graph?

Many apps fall back to OG properties, and some generators emit basic Twitter card tags alongside OG for consistency. If X is a primary channel, add or confirm Twitter card tags and validate with their tools. Start with solid OG for LinkedIn and Facebook, then extend.

Where should I learn og image size without mixing it into this guide?

Use the OG image size and aspect ratio article for 1200×630 defaults, safe zones, and crop quirks. Keep this page for the tag set and verification workflow. Wire the finished image URL through the Open Graph tags generator once the file is live on HTTPS. For a debugger pass without a Facebook developer login, see Open Graph debugger workflow without Facebook login.

When the share card reads cleanly, finish the rest of the head with the Meta tags generator, keep Google lengths honest via meta title length and meta description truncation, and leave FAQ work to FAQ schema without a plugin when the page truly answers questions.