Example Page

--- title: 'Meta Property og:image: Correct HTML for Social Preview Images' meta_title: 'Meta Property og:image Guide for HTML' meta_description: 'Learn the correct meta property og:image HTML syntax, where to place it, what URL to use, and how to fix broken social preview images.' excerpt: 'Use the correct meta property og:image tag to control social preview images. See syntax, examples, mistakes, and a reliable setup checklist.' categories: - 'Guides' - 'Technical SEO' keywords: - 'meta property og image' - 'meta property og:image' - 'meta property og image content' - 'og image html tag' - 'open graph image html' --- The correct **meta property og image** tag looks like this: ```html ``` Place it inside the `` of your HTML document. The `content` value should be a full, publicly accessible image URL. That image is what social platforms and messaging apps use when someone shares your page. If your shared links show the wrong image, no image, or an old cached image, the issue is often in this one line. ## What Does meta property="og:image" Do? `meta property="og:image"` is an Open Graph tag. It tells link preview crawlers which image should represent the page. When someone shares a URL on Facebook, LinkedIn, Slack, Discord, WhatsApp, iMessage, or another app that supports rich previews, the crawler looks for Open Graph metadata in the page source. The image tag answers one question: **Which image should appear in the preview card?** Without it, platforms may guess by choosing a random image from the page. That fallback can work by accident, but it is not reliable. ## The Correct HTML Syntax Use this: ```html ``` The tag has two important attributes. `property="og:image"` tells crawlers this is the Open Graph image field. `content="https://example.com/images/page-preview.jpg"` gives crawlers the exact image URL to fetch. Do not write it like this: ```html ``` For Open Graph tags, use `property`, not `name`. Twitter Card tags usually use `name`, but Open Graph tags use `property`. ## Where to Put the og:image Tag Add it inside the `` section of the page: ```html Example Page ... ``` The tag should be present in the initial HTML response. If your app only injects it after client-side JavaScript runs, some crawlers may not see it. ## Use a Full Image URL The `content` value should be an absolute URL. Good: ```html ``` Risky or broken: ```html ``` A browser may understand relative paths in normal page rendering, but social crawlers need a URL they can request directly. Use the full HTTPS URL. ## Recommended Image Size For most pages, use: **1200 x 630 pixels** That size uses a 1.91:1 aspect ratio and works well for standard Open Graph previews. A practical setup is: ```html ``` The width and height tags help crawlers understand the image dimensions. The alt tag gives accessibility context and a better fallback description. For more sizing detail, read the [OG image size guide](/blog/og-image-size-guide). ## The Complete Open Graph Image Setup If you want a reliable page preview, do not stop at the image tag. Add the core Open Graph fields together: ```html ``` That gives platforms the page title, summary, preview image, canonical URL, and object type. ## Common Mistakes With meta property og:image ### Using `name` instead of `property` Wrong: ```html ``` Right: ```html ``` Open Graph uses the `property` attribute. ### Using a private image URL The image must be public. Avoid URLs that require: - login - cookies - signed sessions - internal network access - temporary permissions If the crawler cannot fetch the image, the preview cannot show it. ### Using the same fallback image everywhere One generic logo image is better than no image, but it is not a strong marketing asset. Product pages, blog posts, landing pages, and docs pages should each have a preview that matches the page. ### Making text too small The image may be displayed as a small card on mobile. If the image contains text, keep it large, high contrast, and short. ### Forgetting cache behavior Social platforms cache Open Graph metadata. If you change the tag and still see the old image, use the platform's preview debugger or change the image URL. ## How to Check If Your og:image Tag Works Use this quick checklist: - View page source and confirm `meta property="og:image"` is inside ``. - Open the image URL directly in a private browser window. - Confirm the image is 1200 x 630 or close to that ratio. - Check that the image is not blocked by robots rules, auth, or firewall settings. - Test the page with social preview debugging tools. - Re-scrape the URL after changing the tag. If the image still does not appear, create a new image URL rather than overwriting the same file repeatedly. Caches can be stubborn. ## How OGDynamic Helps The hard part is not adding one meta tag. The hard part is creating a good image for every page. OGDynamic gives you reusable templates for product pages, blog posts, articles, landing pages, and documentation pages. You can create a branded preview image, get a hosted URL, and place that URL in your `meta property="og:image"` tag. For dynamic workflows, you can pass values such as title, price, description, product image, badge text, and brand fields into the template. That lets you generate page-specific Open Graph images without manually designing each one. See the [documentation](/docs) for URL parameters and JSON payload examples, or start from the [template gallery](/designs). ## Final Answer Use this HTML inside your page ``: ```html ``` Use `property`, not `name`. Use a full HTTPS image URL, not a relative path. Make the image public, stable, and ideally 1200 x 630 pixels. If you want the broader technical guide, read the [og:image meta tag guide](/blog/og-image-meta-tag). If you need a reusable image workflow, [create an OG image](/designs) with OGDynamic.