The Open Graph Tags a Shared Page Needs
When a shared link shows the wrong title or a random image, the social platform is usually guessing from the page. Open Graph metadata gives it a much better set of choices.
The core tags belong in the document <head>:
<meta property="og:title" content="The Secret to Perfectly Fluffy Pancakes">
<meta property="og:description" content="Learn the technique for light and fluffy pancakes.">
<meta property="og:url" content="https://www.mypancakesite.com/fluffy-pancake-recipe">
<meta property="og:image" content="https://www.mypancakesite.com/images/fluffy-pancakes-stack.jpg">
<meta property="og:type" content="article">
Use absolute URLs for og:url and og:image. Crawlers do not necessarily resolve your relative asset path the way a browser on the page does.
Each tag has one job
og:title is the preview headline. Keep it accurate and readable rather than stuffing it with another version of every keyword.
og:description is a short reason to open the link. Platforms may truncate or ignore it, so do not hide essential meaning at the end.
og:url should be the canonical URL for this piece of content. It helps platforms group interactions around one address.
og:image supplies the preview image. Add og:image:alt so the image has a text alternative, and include width and height when your publishing system knows them.
og:type describes the object, commonly website or article. The Open Graph protocol documents the vocabulary and additional structured properties.
Useful optional context
The original example included a site name and locale:
<meta property="og:title" content="The Secret to Perfectly Fluffy Pancakes" />
<meta property="og:description" content="Learn the ultimate technique for light and fluffy pancakes every time. Simple recipe and expert tips included!" />
<meta property="og:url" content="https://www.mypancakesite.com/fluffy-pancake-recipe" />
<meta property="og:image" content="https://www.mypancakesite.com/images/fluffy-pancakes-stack.jpg" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="The Pancake Enthusiast" />
<meta property="og:locale" content="en_US" />
There is no single image size guaranteed to look perfect on every platform. Use a large, simple image with the subject away from crop-sensitive edges, then test it in the sharing debuggers for the platforms you care about.
Remember that previews are cached. Fixing the HTML may not change an old share until the platform fetches the URL again. I would generate these tags from the same title, description, canonical URL, and image data used by the page; duplicate hand-edited metadata has a habit of becoming confidently stale.