How to Add Open Graph Tags to Your Website

To add Open Graph tags, put five meta properties in the HTML <head> on every public page: og:title, og:description, og:image, og:url, and og:type. Those tags tell Slack, LinkedIn, iMessage, and other apps how to build the link preview when someone pastes your URL. They do not replace the title tag for Google search, and they are not a ranking shortcut. They are a shipping task for the same layout or template that already emits canonical URLs and meta descriptions.

What Open Graph Tags Do for Link Previews

Open Graph is a small vocabulary of meta elements with a property attribute instead of a name attribute. Facebook published the protocol so shared links could show a consistent card: headline, summary, image, and destination URL. Most modern apps read the same tags even when they never call Facebook APIs.

That job is different from what the Open Graph checker landing page does on Orchory. The checker is a free URL tool that reads live HTML. This article is the implementation guide: which tags to add, where they live in the repo, and how to validate them before merge. It is also separate from a JSON-LD schema tutorial. Structured data helps search engines understand entities; Open Graph helps humans preview a link in chat.

When previews fail, marketing notices first. The fix still belongs in code: the layout, the CMS field map, or the static site generator template that renders the head. Treat Open Graph like any other deploy-time contract, alongside canonical tags and index controls covered in the SEO for developers guide.

The Core Open Graph Properties You Need

You can add optional tags later. These five are the baseline for a marketing site, docs page, or blog post.

Optional tags such as og:site_name and og:locale help when you publish in multiple languages or need the site name repeated on every card. Add them when your template already knows those values. Do not block shipping the five core tags while you debate locale codes.

A minimal head example

<meta property="og:title" content="How to Add Open Graph Tags to Your Website" />
<meta property="og:description" content="Add og:title, og:description, og:image, og:url, and og:type in your HTML head, then validate before you ship." />
<meta property="og:image" content="https://example.com/og/pricing.png" />
<meta property="og:url" content="https://example.com/pricing" />
<meta property="og:type" content="website" />

Keep Open Graph in the server-rendered head. If tags appear only after a client bundle runs, many scrapers never see them. That failure mode is common on single-page apps that hydrate metadata too late.

Numbered Steps to Add Open Graph Tags

These steps assume you ship through a shared layout. The same sequence works for Laravel Blade, Next.js layouts, or Astro front matter mapped into the head.

1. Pick one source of truth per field. Map page title, summary, hero or OG image URL, canonical URL, and page type from the same data that drives the visible H1 and meta description. Avoid a spreadsheet that drifted from production.
2. Extend the head partial. Add the five meta property="og:*" tags next to your existing title and description tags. Escape dynamic values so quotes in titles do not break HTML.
3. Resolve absolute image URLs. If your CMS stores /images/og.png, prepend the site origin in the template so scrapers receive https://example.com/images/og.png.
4. Set og:type from the route. Use article for blog posts with a publish date, and website for marketing and product routes unless you have a more specific type that matches the content.
5. Align og:url with the canonical. The share URL and the canonical link should usually match. Parameterized campaign URLs can still share, but the card should point at the durable page you want indexed.
6. Add a default fallback image. When a page has no custom art, point og:image at a branded default so empty previews do not leak random screenshots.
7. Validate in CI or pre-merge review. Run the page through Orchory's Open Graph checker or the meta tag checker on a staging URL before you merge.

If you maintain separate Twitter Card tags, generate them from the same fields so title and description cannot diverge silently between protocols.

Common Open Graph Mistakes

Most broken previews are boring implementation bugs, not missing strategy.

• Relative og:image URLs. Scrapers resolve against the shared page, not your CDN assumptions. Always emit absolute URLs.
• Images that require cookies or redirect loops. The fetch must return 200 with a real image content type. Login walls and hotlink protection can block preview bots.
• Duplicate or empty titles. Reusing the site name three times wastes the card headline. Leaving og:title blank forces apps to guess from the URL.
• Stale cache on the platform side. Your HTML can be correct while Slack or LinkedIn still shows an old image. Fix the HTML first, then use each network's debugger when you need a forced refetch.
• Replacing the title tag. Open Graph does not remove the need for a descriptive <title> and meta description for search snippets.
• Confusing Open Graph with schema markup. JSON-LD describes the page for search features. Open Graph describes the share card. Keep both accurate, but do not copy FAQ schema into og:description.

Teams that publish often also keep a short internal doc listing which routes use custom OG art versus the default image. That prevents every new landing page from shipping with an accidental blank card.

Validate Open Graph Tags Before You Ship

Validation is two layers: confirm the tags exist in HTML, then confirm the image URL returns a usable file.

Start with Orchory's free tools on a public staging or production URL. The Open Graph checker focuses on the seven common Open Graph properties in the first HTML response. The meta tag checker shows standard meta tags and Open Graph together, which helps when you are auditing a template change that touched both.

Both tools read the page at request time. They do not replace Facebook's Sharing Debugger when you need Facebook to refresh its cache, but they are faster for day-to-day engineering review. Browse the full set on the free SEO tools page when you want related checks in one place.

A lightweight manual pass still helps:

1. Fetch the URL with curl -sL and confirm the og:* lines appear inside <head>.
2. Open the og:image URL in a private window and confirm it loads without authentication.
3. Paste the URL into the chat app your customers actually use and inspect the preview.

Document the staging URL you used in the pull request so reviewers can repeat the check without guessing.

Put Open Graph Tags in Your Release Checklist

Open Graph work pays off when it rides along with every new route, not as a one-time audit. Add three lines to your definition of done for public pages:

• Head partial renders all five core tags from page data.
• Checker output attached or linked in the pull request for priority URLs.
• Default OG image exists for routes without custom creative.

When you want the tags to ship as part of a broader SEO cadence, not only ad hoc fixes, send your site to Orchory. Your first page is free and set up with you on a call before you pay anything. Orchory ranks page opportunities and hands your coding agent prompts that open pull requests, while your team keeps merge control.

For ongoing self-serve checks, keep the free tools bookmarked next to Search Console. Visit Orchory when you are ready to connect preview polish with a page pipeline your repository can review.

FAQs