slop auditOpen Graph meta tags control how a page is represented when someone shares its URL on a service that reads the Open Graph protocol. They give the service a title, description, image, and canonical page URL to use in a link preview.
The Open Graph protocol defines the basic properties. Add them to the document head of every public page that people may share:
<meta property="og:title" content="Website launch checklist for developers">
<meta property="og:description" content="Check access, mobile layout, metadata, links, and evidence before you ship.">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/blog/website-launch-checklist">
<meta property="og:image" content="https://example.com/og/website-launch-checklist.png">Use a separate og:title and og:description when the shared preview needs different wording from the browser title. Keep both accurate to the visible page.
Set the page identity first
Use the same canonical URL in og:url and the page's canonical link. The value should be absolute, use HTTPS, and match the route you want people to open. Read canonical URLs and redirects before adding share metadata if your host or trailing-slash policy is still changing.
Set og:type to match the page. A blog article can use article; a product or home page can use website. Do not label every route as an article if the page does not contain an article.
Make the image useful
Use an image that still makes sense when the preview is cropped. Put the important text and subject away from the edges, and keep the design readable at a small size. Serve the image from a stable HTTPS URL with the correct image content type.
Give the image a descriptive alternative value when the platform supports it:
<meta property="og:image:alt" content="Slop Audit website launch checklist">Do not put a screenshot of an unfinished page in the preview. The share image is part of the first impression, so check it after the page copy and product name are final.
Add Twitter card fallbacks when needed
Some platforms use Open Graph tags. Others also read twitter:* metadata. A common fallback looks like this:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Website launch checklist for developers">
<meta name="twitter:description" content="Check a public page before you ship it.">
<meta name="twitter:image" content="https://example.com/og/website-launch-checklist.png">Keep the fallback values consistent with the Open Graph values. Do not maintain different claims in different tags. A crawler may choose one set based on the platform and page type.
Test the deployed HTML
Open the production URL with a clean request and inspect the head:
curl -s https://example.com/blog/website-launch-checklist | grep -E 'og:|twitter:'Then test the URL in the preview debugger for the platform where your users share links. Check the fetched image, title, description, route, and cache behavior. A local preview can work while the deployed image path returns a 404 or an HTML error page.
Check these cases:
- The page URL without query parameters.
- The page after a redirect.
- A page with a long title and description.
- A page that has no custom image and must use the site default.
- A page shared again after its metadata changes.
Open Graph is not search schema
Open Graph metadata helps sharing services build previews. It does not replace a page title, meta description, canonical link, or structured data. Keep each system accurate for its job.
Slop Audit checks the Open Graph title, description, URL, and image when it can read them from the public page. It reports missing or conflicting values as evidence. It does not guarantee how a third-party platform will cache or render a preview.
Use the website audit report guide to turn a missing tag into a release task. Record the exact page and tag value, update the template, deploy, and verify the response again.
Share metadata checklist
canonical URL → og:title → og:description → og:type
→ og:url → og:image → image response → preview debuggerSet metadata from the route data used to render the page. This prevents every page from sharing the same title or an image from an old deployment.