Your page title

--- title: 'og:image Meta Tag: The Complete Guide to Social Preview Images' meta_title: 'og:image Meta Tag Guide for Social Previews' meta_description: 'Learn how the og:image meta tag works, the best image size, common implementation mistakes, and how to debug social preview images.' excerpt: 'The og:image tag controls the preview image for shared links. Learn the syntax, requirements, examples, and debugging workflow.' categories: - 'Guides' - 'Technical SEO' keywords: - 'og:image' - 'og:image meta tag' - 'og image tag' - 'open graph image tag' - 'social preview meta tag' --- The `og:image` meta tag tells social platforms which image to display when someone shares your URL. It is one of the most important Open Graph tags because the image usually dominates the preview card. A good `og:image` makes a link feel clear, credible, and worth opening. A missing or broken one often leaves platforms guessing, which can produce random thumbnails, cropped images, or no image at all. If you publish product pages, blog posts, landing pages, documentation, or changelog updates, this tag should be part of your publishing checklist. ## What Is og:image? `og:image` is an Open Graph meta property used inside the HTML `` of a page. The basic syntax looks like this: ```html ``` When a platform crawls your URL, it reads that tag and uses the image URL as the visual preview for the shared link. The image URL should be: - absolute - publicly accessible - served over HTTPS - stable enough for platform caches - sized for social preview cards Do not use a relative path like `/images/preview.jpg`. Use the full URL. ## The Minimum Open Graph Setup `og:image` works best with the rest of the core Open Graph tags: ```html ``` For articles, change `og:type` to `article` and include article metadata when your site supports it. ```html ``` The important part is that crawlers can read these tags in the initial HTML response. If your tags only appear after client-side JavaScript runs, some platforms may not see them. ## Best og:image Size For most pages, use: **1200 x 630 pixels** That gives you a 1.91:1 aspect ratio, which is the safest default for Open Graph cards across major platforms and messaging apps. Use this size for: - SaaS landing pages - ecommerce product pages - blog posts - documentation pages - comparison pages - portfolio pages - feature announcements For deeper sizing details, read the [OG image size guide](/blog/og-image-size-guide). If you need one default answer, start with 1200 x 630. ## Recommended og:image Tags The main tag is enough for some platforms, but adding width, height, and alt text gives crawlers more context. ```html ``` Use `og:image:alt` to describe the image. Keep it useful and concise, just like image alt text elsewhere on your site. ## og:image for X Cards X uses its own Twitter Card tags, but it can still fall back to Open Graph data in many setups. For better control, add explicit X card tags: ```html ``` You can use the same 1200 x 630 image for both `og:image` and `twitter:image` if the design keeps important text and visuals away from the edges. If X is a priority channel, consider generating a dedicated X variant with a slightly tighter 2:1 layout. ## Common og:image Mistakes ### Using a relative image URL This is one of the easiest ways to break previews. Bad: ```html ``` Good: ```html ``` Social crawlers do not browse your site like a user. Give them the full URL. ### Using an image behind authentication If a crawler cannot fetch the image, it cannot render the preview. Avoid images that require login, signed cookies, internal network access, or temporary permissions. ### Shipping one generic image for every URL A logo card is better than a broken preview, but it is still weak. A product page should show the product. A blog post should reflect the article topic. A feature page should communicate the feature. This is where dynamic OG image generation helps: one reusable template can create many page-specific preview images. ### Placing text too close to the edge Even with the correct image size, platforms can crop previews differently. Keep headlines, logos, prices, and product photos inside a generous safe area. ### Forgetting that platforms cache previews If you update the `og:image` tag and still see the old image, the platform may be showing cached metadata. Use platform debuggers to request a fresh scrape. ## How to Debug og:image When an image does not show, work through this checklist. ### 1. View the page source Open the rendered page source and confirm the tag exists in the ``. Look for: ```html ``` If it is missing from the initial HTML, fix your metadata rendering first. ### 2. Open the image URL directly Paste the image URL into a browser. It should load without: - login - redirects to private pages - certificate warnings - blocked robots rules - expired signatures ### 3. Check the image dimensions If the image is tiny, platforms may show a small thumbnail or ignore it. Use 1200 x 630 as the default. ### 4. Test the URL in platform debuggers Use the platform's preview or debugging tool to see what it reads. If you recently changed the image, request a re-scrape. ### 5. Change the image URL when caches are stubborn If a platform keeps showing an old image, changing the image filename or adding a versioned asset URL can force a fresh fetch. ## og:image Examples by Page Type ### Product page ```html ``` The image should show the product, product name, price or offer, and brand identity. ### Blog post ```html ``` The image should make the article topic visible without copying the full page title. ### SaaS feature page ```html ``` The image should show the feature, the product name, and a clear visual cue. ## A Better Workflow for og:image Manually designing an image for every page works when you publish rarely. It breaks down when you have many URLs. A better workflow is: 1. Create a template for each page type. 2. Keep dimensions at 1200 x 630. 3. Define dynamic fields like title, subtitle, price, product image, category, and logo. 4. Generate a unique image URL for each page. 5. Put that URL into the `og:image` tag. 6. Test the final page before sharing. That is the workflow OGDynamic is built around. With OGDynamic, you can create a branded template once, then reuse it across product pages, blog posts, landing pages, and documentation. Instead of treating `og:image` as a static file you remember at the end, it becomes a repeatable part of your publishing system. For implementation examples, see the [documentation](/docs). To create a preview manually, start from the [template gallery](/designs). ## Final Answer: How Should You Use og:image? Use the `og:image` meta tag to define the social preview image for each page: ```html ``` Use an absolute HTTPS URL, make the image publicly accessible, start with 1200 x 630 pixels, and keep the content readable on mobile. Most importantly, avoid using one generic fallback image for every page. A strong `og:image` should match the exact product, article, feature, or landing page being shared. If you want a broader non-technical overview, read [What Is an OG Image?](/blog/og-image). If you want to generate branded previews faster, [create an OG image](/designs) with OGDynamic.