Missing og image

Moderate effort

Found on 75% of audited stores.

Add an og:image meta tag to every page so that social media platforms and messaging apps display a rich, branded image preview whenever someone shares your store's link.

What it is

The og:image tag is a small snippet of HTML code placed in the invisible "head" section of your web pages. It tells social networks (Facebook, LinkedIn, Pinterest, X/Twitter, iMessage, WhatsApp, Slack, and more) which image to show when someone shares or previews a link to your page. Without it, those platforms either show no image at all, pick one randomly from your page (often a logo, icon, or a totally irrelevant graphic), or display a plain grey box — all of which look unprofessional and untrustworthy. The Open Graph protocol (the "og:" prefix) is a widely adopted web standard originally created by Facebook and now used by virtually every major platform.

Why it matters

When a customer shares your product page in a Facebook group, on Pinterest, or in a WhatsApp message, the link preview is often the first visual impression a new potential buyer gets — before they ever visit your site. A missing or broken og:image means that preview is blank, random, or ugly, dramatically reducing click-through rates and undermining trust in your brand. Studies consistently show that posts with compelling images receive far more clicks, shares, and engagement than text-only links. For ecommerce stores especially, a crisp product image in a shared link can directly drive impulse purchases and word-of-mouth traffic at zero extra ad spend. There is also a secondary SEO benefit: platforms like Pinterest drive significant referral traffic, and proper og:image tagging is required for Rich Pins, which surface your product price and availability alongside the image.

How to fix it

  1. Identify which pages are missing the og:image tag — at minimum your homepage, all product pages, collection/category pages, and any key landing pages.
  2. Choose or create a high-quality image for each page type: use the primary product photo for product pages (ideally 1200×630 px, under 8 MB, JPG or PNG), a brand hero image for the homepage, and a representative category image for collection pages.
  3. Ensure the image is hosted on a publicly accessible, absolute URL (starting with https://) — social crawlers cannot access password-protected or localhost images.
  4. Add the og:image meta tag inside the <head> element of each page, along with og:image:width and og:image:height for faster rendering: <meta property="og:image" content="https://yourdomain.com/images/your-image.jpg"> and companion tags for width and height.
  5. Also add og:title, og:description, and og:url if they are missing — og:image works best as part of a complete Open Graph block.
  6. After deploying, validate each URL using Facebook's Sharing Debugger (developers.facebook.com/tools/debug) and LinkedIn's Post Inspector to confirm the correct image is detected and cached.

Fix it on your platform

Pick your platform for the exact steps.

How to fix missing og image on Shopify
  1. In your Shopify admin, go to Online Store → Themes → click 'Customize' on your active theme.
  2. For a site-wide default og:image (homepage and pages without a specific image), go to Online Store → Preferences → scroll to 'Social sharing image' → upload your 1200×630 px brand image and save.
  3. For product pages: each product's featured image is automatically used as og:image by most modern Shopify themes. Ensure every product has a high-quality featured image set.
  4. To customize the og:image tag in code, go to Online Store → Themes → Actions → Edit code → open 'theme.liquid' (or your theme's layout file) and locate the <head> section. Most themes already include {% if page_image %} logic — verify it outputs a full og:image tag.
  5. For finer control or to add og:image to collection and blog pages, install a free SEO app such as 'SEO King' or 'Yoast SEO for Shopify' which provide per-page og:image fields in the page editor.
  6. Validate using Facebook's Sharing Debugger after saving changes.
Full Shopify guide →Official Shopify docs ↗
How to fix missing og image on WooCommerce
  1. Install the free 'Yoast SEO' plugin (Plugins → Add New → search 'Yoast SEO' → Install → Activate) — it is the most reliable way to manage og:image across all WooCommerce page types.
  2. Go to Yoast SEO → Social → Facebook tab → enable 'Add Open Graph meta data' → save.
  3. Upload a site-wide default og:image in Yoast SEO → Social → Facebook → Default image for sharing.
  4. For individual product pages, open the product in wp-admin → Products → edit a product → scroll to the 'Yoast SEO' meta box → click the 'Social' tab → upload a Facebook image specific to that product.
  5. For category (taxonomy) pages, go to Products → Categories → edit a category → scroll to the Yoast SEO block → set a social image there.
  6. Validate using Facebook's Sharing Debugger after saving.
Full WooCommerce guide →Official WooCommerce docs ↗
How to fix missing og image on BigCommerce
  1. In your BigCommerce admin, go to Storefront → My Themes → click 'Customize' on your active theme.
  2. Most Cornerstone-based themes output og:image automatically using the product's primary image. Confirm this by viewing your page source and searching for 'og:image'.
  3. To set a homepage og:image, go to Storefront → Home Page Carousel or use the Theme Editor's 'Open Graph' fields if your theme exposes them.
  4. For granular control over og:image on every page type, go to Storefront → Script Manager → Add a script that injects og:image meta tags, or edit your theme's template files directly via Stencil CLI (storefront/templates/layout/base.html is the main layout).
  5. Alternatively, install an SEO app from the BigCommerce App Marketplace (search 'SEO' or 'Open Graph') that provides a UI for setting og:image per product and category.
  6. Validate using Facebook's Sharing Debugger after publishing.
Full BigCommerce guide →Official BigCommerce docs ↗
How to fix missing og image on Wix
  1. In the Wix Editor, click on the page you want to edit in the Pages panel on the left.
  2. Click the three-dot (…) menu next to the page name → 'SEO' → this opens the SEO settings panel for that page.
  3. Scroll down to 'Social Share' → click 'Edit social image' → upload your 1200×630 px image for that specific page.
  4. For your site's default og:image (used when no page-specific image is set), go to the Wix Dashboard → SEO → Social Share → upload a default social image.
  5. For Wix Stores product pages, go to the Wix Dashboard → Store → Products → select a product → ensure a product image is set; Wix automatically uses the first product image as og:image.
  6. Publish your site and validate using Facebook's Sharing Debugger.
Full Wix guide →Official Wix docs ↗
How to fix missing og image on Squarespace
  1. In the Squarespace editor, go to Pages → click the settings gear (⚙) next to any page → open the 'Social Image' tab → upload a 1200×630 px image specific to that page.
  2. For a site-wide default og:image, go to Website → Website Tools → Social Sharing → Social Sharing Image → upload your brand image.
  3. For Squarespace Commerce product pages, open a product → scroll to 'SEO' or 'Social Image' within the product editor → upload the product-specific social image.
  4. For blog posts, open the post editor → click the settings gear → Social Image tab → upload the image.
  5. Note: Squarespace injects og:image tags automatically based on these settings — no code editing is required.
  6. Publish and validate using Facebook's Sharing Debugger.
Full Squarespace guide →Official Squarespace docs ↗
How to fix missing og image on Webflow
  1. In the Webflow Designer, open the Pages panel on the left → hover over a page → click the settings gear icon.
  2. In the Page Settings panel, scroll down to 'Open Graph settings' → upload an og:image (1200×630 px recommended) and fill in og:title and og:description.
  3. For dynamic Collection pages (e.g. products, blog posts), open the Collection in the CMS → edit the Collection Page template → in Page Settings, bind the og:image field to a CMS image field (e.g. 'Product Image') using the dynamic binding option.
  4. Ensure your CMS Collection items each have an image set in that field so the binding resolves correctly for every item.
  5. For site-wide defaults, go to Project Settings → SEO → add a default og:image URL in the Open Graph fields.
  6. Publish your site and validate each page type using Facebook's Sharing Debugger.
Full Webflow guide →Official Webflow docs ↗
How to fix missing og image on Adobe Commerce (Magento)
  1. In the Magento Admin, go to Stores → Configuration → Catalog → Product → set 'Product Image' as the base image for social sharing (some themes handle this automatically via the product's base_image).
  2. To add og:image to your theme templates, locate your active theme's layout XML or PHTML files under app/design/frontend/<Vendor>/<theme>/Magento_Catalog/templates/product/ — specifically the view.phtml or a dedicated head block.
  3. In your theme's default_head_blocks.xml (or equivalent), add a meta block that outputs the og:image tag using the product's getImage() helper, or add the tag directly in the page's head PHTML.
  4. For a faster, no-code solution, install an extension from the Magento Marketplace such as 'SEO Suite Ultimate by Mageworx' or 'Magento 2 SEO Extension by Mageplaza' — both provide UI fields for og:image on product, category, and CMS pages.
  5. After deploying, flush the Magento cache: System → Cache Management → Flush Magento Cache.
  6. Validate using Facebook's Sharing Debugger.
Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗
How to fix missing og image on WordPress.org
  1. Install 'Yoast SEO' or 'Rank Math SEO' (Plugins → Add New) — both provide complete Open Graph support including per-page og:image fields.
  2. In Yoast SEO: go to Yoast SEO → Social → Facebook → enable Open Graph → set a default og:image. For individual pages/posts, use the Yoast meta box → Social tab → upload a Facebook image.
  3. In Rank Math: go to Rank Math → General Settings → Open Graph → enable. Per page, use the Rank Math sidebar in the block editor → Social tab → Facebook Image.
  4. For pages without a plugin, add the tag manually in your theme's header.php inside the <head> tag.
  5. Ensure your theme or plugin outputs the tag as: <meta property="og:image" content="FULL-URL-TO-IMAGE">.
  6. Validate using Facebook's Sharing Debugger after saving.
Full WordPress.org guide →Official WordPress.org docs ↗
How to fix missing og image on Wix Studio
  1. In Wix Studio, open the Pages panel → hover over the page → click the three-dot menu → 'SEO & Social'.
  2. In the Social Sharing section, upload a 1200×630 px image for that specific page.
  3. For dynamic pages (e.g. product or blog templates), use the dynamic SEO settings panel to bind the og:image to a dataset field so each item gets its own image automatically.
  4. Set a site-wide fallback image in the Dashboard → SEO → Social Share → Social Sharing Image.
  5. Publish and validate using Facebook's Sharing Debugger.
Full Wix Studio guide →Official Wix Studio docs ↗
How to fix missing og image on Ghost
  1. In the Ghost Admin, open a post or page for editing → click the settings gear (Post settings) on the right → scroll to 'Twitter card' and 'Facebook card' sections.
  2. Upload a specific og:image in the 'Facebook card' image upload field (1200×630 px recommended). Ghost outputs this as both og:image and twitter:image.
  3. For a site-wide default og:image, go to Ghost Admin → Settings → General → scroll to 'Meta data' → Publication cover — this image is used as the fallback og:image for pages without a specific one.
  4. Publish and validate using Facebook's Sharing Debugger.
Full Ghost guide →Official Ghost docs ↗
How to fix missing og image on Shopify Plus
  1. Follow the same steps as Shopify above — Shopify Plus uses the same theme and admin system.
  2. For enterprise control at scale, use Shopify Plus's Script Editor or Metafields to programmatically assign og:image values to products and collections via the Shopify Admin API.
  3. You can also use a Shopify Plus automation app (e.g. Launchpad or a custom script) to bulk-update product metafields for og:image across large catalogs.
  4. Validate a representative sample of product, collection, and landing pages using Facebook's Sharing Debugger.
Full Shopify Plus guide →Official Shopify Plus docs ↗
How to fix missing og image on Magento Open Source
  1. Follow the same steps as Adobe Commerce (Magento) above — the admin path, layout XML approach, and recommended extensions are identical for Magento Open Source.
Full Magento Open Source guide →Official Magento Open Source docs ↗
How to fix missing og image on PrestaShop
  1. Go to Modules → Module Catalog and search for an SEO module such as 'SEO Expert' or 'Open Graph Tags' — install and configure it.
  2. In the module settings, map the og:image field to the product's cover/main image for product pages, and set a static fallback image URL for other page types.
  3. Alternatively, edit your theme's header.tpl file (located in themes/[your-theme]/templates/_partials/head.tpl) to manually add og:image meta tags using Smarty variables like {$product.cover.bySize.large_default.url}.
  4. Clear the PrestaShop cache (Advanced Parameters → Performance → Clear cache) and validate with the Meta Sharing Debugger.
Full PrestaShop guide →Official PrestaShop docs ↗
How to fix missing og image on HubSpot CMS
  1. In HubSpot, navigate to Marketing → Website → Landing Pages (or Website Pages / Blog) and open the page editor.
  2. Click Settings → Advanced → scroll to 'Featured Image' or 'Social Sharing Image'. Upload a 1200×630 px image — HubSpot uses this as the og:image when the page is shared.
  3. For the site-wide default, go to Settings → Website → Pages → Templates and set a default social sharing image.
  4. For blog posts, set the 'Featured Image' in the blog post editor (right-hand panel) — HubSpot automatically uses this as the og:image.
  5. Validate with the Meta Sharing Debugger.
Full HubSpot CMS guide →Official HubSpot CMS docs ↗
How to fix missing og image on Next.js
  1. Create a default fallback OG image (e.g. 1200×630 px) and place it at /public/og-default.jpg so Next.js can serve it as a static asset.
  2. In app/layout.tsx, export a root `metadata` object with an `openGraph.images` array that points to the default image — this acts as the site-wide fallback for every page that does not override it.
  3. For static pages (e.g. app/about/page.tsx), export their own `metadata` object with a page-specific `openGraph.images` entry to override the root fallback.
  4. For dynamic pages (e.g. app/products/[slug]/page.tsx), export an async `generateMetadata()` function that fetches the product data and returns the product's image URL in `openGraph.images`; fall back to the default image when no product image is available.
  5. Ensure every image entry includes `url`, `width`, `height`, and `alt` fields — these are required by the Open Graph spec and improve how platforms render the preview.
  6. Verify the tags are rendered correctly by running `next build && next start` and inspecting the page `<head>` with curl or browser DevTools, then validate with the Meta Sharing Debugger (developers.facebook.com/tools/debug) or opengraph.xyz.
Full Next.js guide →Official Next.js docs ↗
How to fix missing og image on Nuxt.js
  1. Set a global fallback og:image in nuxt.config.ts using the `app.head` key so every page inherits it automatically — this covers pages that don't set their own image.
  2. Override the og:image on product, collection, and content pages by calling `useSeoMeta()` inside each page's `<script setup>` block, passing the page-specific image URL fetched from your headless commerce API (e.g. Shopify Storefront API `product.featuredImage.url`).
  3. For dynamic routes (e.g. pages/products/[handle].vue), derive the og:image from the fetched data and pass it reactively using a computed ref or directly as a dynamic string to `useSeoMeta()`.
  4. Ensure every og:image URL is absolute (starts with https://), is at least 1200×630 px, and is publicly accessible without authentication — use `useRuntimeConfig().public.baseUrl` or a CDN prefix to build absolute URLs if your image paths are relative.
  5. Add the complementary `og:image:width`, `og:image:height`, and `og:image:alt` properties alongside `og:image` for full Open Graph compliance and better social previews.
  6. Validate the output with the Facebook Sharing Debugger and the LinkedIn Post Inspector after deploying, then confirm the tags appear in the SSR-rendered HTML source (not just in the client-side DOM).
Full Nuxt.js guide →Official Nuxt.js docs ↗
How to fix missing og image on Gatsby
  1. Create or open your shared SEO component (e.g. src/components/Seo.jsx). This component will use Gatsby's built-in Head API (Gatsby ≥ 4.19) — no extra library needed.
  2. Accept an `ogImage` prop (absolute URL string). Fall back to a default site-wide OG image stored in `static/` (e.g. `static/og-default.jpg`) whose absolute URL is pulled from `siteMetadata.siteUrl` via a `useStaticQuery` GraphQL call.
  3. Inside the component's JSX (returned from the Head export or rendered inside <Head>), add the four required OG image tags: `og:image`, `og:image:width`, `og:image:height`, and `twitter:image`.
  4. Export the `Seo` component and re-export it as the named `Head` export from every page file (e.g. `src/pages/index.jsx`, `src/pages/products/{product.handle}.jsx`) so Gatsby injects the tags into <head> at build time.
  5. For dynamic pages (product/collection PDPs), pass the page's own image URL as the `ogImage` prop (sourced from your CMS/commerce API during `createPages` or via the page's GraphQL query).
  6. Run `gatsby build && gatsby serve` and validate the tags with the LinkedIn Post Inspector or Facebook Sharing Debugger — confirm `og:image` resolves to a publicly reachable absolute URL.
Full Gatsby guide →Official Gatsby docs ↗
How to fix missing og image on Next.js (Headless)
  1. Place a high-quality branded fallback image (e.g. og-image.jpg, 1200×630 px) inside the /public directory so it is served statically at /og-image.jpg.
  2. In your root layout (app/layout.tsx) export a `metadata` object (or `generateMetadata`) that sets `openGraph.images` with the absolute URL of that fallback image — use `metadataBase` so Next.js can resolve relative paths to absolute URLs automatically.
  3. Override `openGraph.images` inside every dynamic route's `generateMetadata` function (e.g. app/products/[slug]/page.tsx) to supply a product-specific image pulled from your commerce API, with the static fallback as a safe default.
  4. For any remaining static pages (e.g. app/about/page.tsx, app/collections/page.tsx), export a local `metadata` object with `openGraph.images` set to at least the fallback URL.
  5. Run `next build` and verify the rendered HTML contains `<meta property="og:image" content="https://…">` with a fully-qualified URL on every page type.
  6. Optionally add `twitter:image` via `metadata.twitter.images` in the same objects so Twitter/X card previews also display the image.
Full Next.js (Headless) guide →Official Next.js (Headless) docs ↗
How to fix missing og image on Elementor
  1. In your WordPress dashboard, go to Elementor → Settings and confirm that you have an active SEO plugin (e.g. Yoast SEO, Rank Math, or All in One SEO) installed alongside Elementor, since Elementor itself does not output og:image tags — the og:image meta must be added via an SEO plugin or your theme's head settings.
  2. Install or open your SEO plugin (e.g. Yoast SEO). Navigate to SEO → Social → Facebook (in Yoast) or the equivalent 'Social Meta' section in your chosen plugin, enable Open Graph meta tags globally, and upload a default fallback og:image (minimum 1200×630 px, under 8 MB) that will apply to any page that lacks a custom image.
  3. For each key page built with Elementor, open the page in the Elementor editor, then click the hamburger menu (☰) → Site Settings → or close the editor and use the WordPress block editor sidebar. In the SEO plugin's meta box (visible below or beside the editor), locate the 'Social' or 'Facebook' tab and upload a page-specific og:image to override the sitewide default.
  4. To set an og:image for Elementor Pro Theme Builder templates (headers, footers, single-post templates), go to Elementor → Theme Builder, open the relevant template, and use the SEO plugin's meta box within that template's edit screen to assign a representative og:image for the content type it renders.
  5. After saving, verify the og:image tag is present by opening your page URL in the Facebook Sharing Debugger (https://developers.facebook.com/tools/debug/) or by viewing the page source and searching for 'og:image'. Confirm the image URL resolves, the dimensions meet the 1200×630 px minimum, and no 'missing image' warning appears.
  6. If you are using the Hello Elementor theme without an SEO plugin, add the og:image tag manually by going to Appearance → Theme File Editor → header.php (or a child theme's functions.php) and outputting the tag via a wp_head action hook, ensuring you conditionally load the correct image per page using WordPress conditional tags such as is_front_page(), is_singular(), etc.
Full Elementor guide →Official Elementor docs ↗
How to fix missing og image on Remix
  1. Upload your OG image (e.g. og-image.jpg, recommended size 1200×630 px) to your project's public/ directory so it is served as a static asset at a stable, absolute URL (e.g. https://yourstore.com/og-image.jpg).
  2. Open the root route file (typically app/root.tsx or app/root.jsx). Export a meta function if one does not already exist: `export const meta: MetaFunction = () => { return [...]; };`
  3. Inside the meta function's return array, add the og:image entries — include both the standard Open Graph tag and the Twitter/X card tag: ```ts { property: 'og:image', content: 'https://yourstore.com/og-image.jpg' }, { property: 'og:image:width', content: '1200' }, { property: 'og:image:height', content: '630' }, { name: 'twitter:image', content: 'https://yourstore.com/og-image.jpg' }, ``` This sets a global fallback OG image for every page that does not override it.
  4. For product, collection, or blog route files (e.g. app/routes/products.$handle.tsx), export their own meta function and use the loader data to set a page-specific og:image, for example: ```ts export const meta: MetaFunction<typeof loader> = ({ data }) => [ { property: 'og:image', content: data?.product?.featuredImage?.url ?? 'https://yourstore.com/og-image.jpg' }, ]; ``` This ensures product images appear when those URLs are shared.
  5. Confirm that app/root.tsx renders the <Meta /> component (from `@remix-run/react`) inside the <head> of the HTML document — this is what actually outputs all meta tags to the page: `import { Meta } from '@remix-run/react'; ... <head><Meta />...</head>`
  6. Deploy the changes, then validate each key page type (home, product, collection) using the Facebook Sharing Debugger (developers.facebook.com/tools/debug) and Twitter Card Validator (cards-dev.twitter.com/validator) to confirm the og:image tag is detected and the image renders correctly.
Full Remix guide →Official Remix docs ↗

Does your site have this issue?

Run a free SEOLZ scan to find missing og image — and every other issue — across your whole site in minutes.

Scan my site free

Frequently asked questions

What is Missing og image?

The og:image tag is a small snippet of HTML code placed in the invisible "head" section of your web pages. It tells social networks (Facebook, LinkedIn, Pinterest, X/Twitter, iMessage, WhatsApp, Slack, and more) which image to show when someone shares or previews a link to your page. Without it, those platforms either show no image at all, pick one randomly from your page (often a logo, icon, or a totally irrelevant graphic), or display a plain grey box — all of which look unprofessional and untrustworthy. The Open Graph protocol (the "og:" prefix) is a widely adopted web standard originally created by Facebook and now used by virtually every major platform.

Why does missing og image matter?

When a customer shares your product page in a Facebook group, on Pinterest, or in a WhatsApp message, the link preview is often the first visual impression a new potential buyer gets — before they ever visit your site. A missing or broken og:image means that preview is blank, random, or ugly, dramatically reducing click-through rates and undermining trust in your brand. Studies consistently show that posts with compelling images receive far more clicks, shares, and engagement than text-only links. For ecommerce stores especially, a crisp product image in a shared link can directly drive impulse purchases and word-of-mouth traffic at zero extra ad spend. There is also a secondary SEO benefit: platforms like Pinterest drive significant referral traffic, and proper og:image tagging is required for Rich Pins, which surface your product price and availability alongside the image.

How do I fix missing og image?

Add an og:image meta tag to every page so that social media platforms and messaging apps display a rich, branded image preview whenever someone shares your store's link.

Related SEO issues