How to fix missing og image on Nuxt.js

Steps for 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).

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.

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.

See the complete Missing og image guide for every platform and the full background.