Missing og title

Quick win

Found on 60% of audited stores.

Add an og:title meta tag to every page so your store's title appears correctly when shared on social media platforms like Facebook, LinkedIn, and Pinterest.

What it is

The og:title tag is a small piece of HTML code — part of the Open Graph protocol — that tells social networks and messaging apps what title to display when someone shares a link to your store. Without it, platforms like Facebook, LinkedIn, Pinterest, and WhatsApp either guess a title (often pulling something ugly or irrelevant) or show no title at all. It lives in the <head> section of your page and looks like: <meta property="og:title" content="Your Page Title Here" />. It does not affect your visible page content — it only controls how your link previews appear when shared.

Why it matters

Every time a customer, blogger, or influencer shares a link to your store or product page, the og:title is the headline of that shared post — it's what makes someone stop scrolling and click. Missing or broken og:title tags mean your shared links look unfinished, unprofessional, or just plain wrong, which directly reduces click-through rates from social media. For ecommerce stores, social sharing is a significant free-traffic channel: a product shared on Facebook or Pinterest with a compelling, accurate title can drive meaningful revenue. Additionally, some search tools and third-party indexers use Open Graph data as a secondary signal for content relevance, so having it set correctly supports a consistent, trustworthy brand presence across the web.

How to fix it

  1. Identify all page templates that are missing the og:title tag — typically this includes your homepage, product pages, collection/category pages, blog posts, and any landing pages.
  2. Decide on the title value for each template: for product pages use the product name (plus your brand name if space allows), for collection pages use the category name, and for the homepage use your primary brand tagline or store name.
  3. Add the og:title meta tag inside the <head> section of each page template, using the format: <meta property="og:title" content="[Dynamic Page Title] | [Store Name]" />.
  4. Where your platform supports dynamic/template variables, use the platform's templating syntax to pull the page's native title automatically (e.g., the product title, blog post title) so you don't have to set it manually for every single page.
  5. After adding the tag, verify it is rendering correctly using the Facebook Sharing Debugger (developers.facebook.com/tools/debug/) or LinkedIn Post Inspector — paste your page URL and confirm the og:title appears as expected.
  6. If your platform has an SEO app or built-in SEO fields, check whether those fields already output og:title; if so, simply fill in the SEO title fields in your product/page editors rather than editing theme code.

Fix it on your platform

Pick your platform for the exact steps.

How to fix missing og title on Shopify
  1. In your Shopify admin, go to Online Store → Themes → click 'Edit code' on your active theme.
  2. Open the file theme.liquid (or layout/theme.liquid). Locate the closing </head> tag.
  3. Add the og:title snippet just before </head>. Most modern Shopify themes (Dawn, Debut, etc.) already include Open Graph tags in a snippets/social-meta-tags.liquid or snippets/head-social.liquid file — search for 'og:title' across your theme files first.
  4. If using a snippets file (e.g. snippets/social-meta-tags.liquid), ensure it contains: <meta property="og:title" content="{{ page_title | escape }} | {{ shop.name | escape }}"> — and that this snippet is rendered via {% render 'social-meta-tags' %} inside theme.liquid.
  5. For per-page SEO titles: go to the individual product, page, or blog post editor in the admin → scroll to the 'Search engine listing preview' section → click 'Edit website SEO' → fill in the 'Page title' field. Shopify uses this value for og:title if your theme is set up correctly.
  6. Verify using Facebook Sharing Debugger: paste your store URL and confirm the og:title is shown.
Full Shopify guide →Official Shopify docs ↗
How to fix missing og title on WooCommerce
  1. The most reliable method is to use an SEO plugin. Install and activate either Yoast SEO or Rank Math (free versions cover this fully) from Plugins → Add New.
  2. With Yoast SEO active: go to any product, page, or post editor → scroll to the 'Yoast SEO' meta box below the editor → click the 'Social' tab → enter your desired og:title in the 'Facebook title' field, or leave it blank to have Yoast inherit the SEO title automatically.
  3. With Rank Math active: in the post/product editor, open the Rank Math panel → go to 'Social' → fill in the 'Title' field for Facebook/OpenGraph.
  4. For sitewide defaults with Yoast: go to SEO → Social → Facebook and ensure 'Add Open Graph meta data' is enabled.
  5. If you prefer to code it manually, edit your child theme's header.php and add the og:title meta tag inside the <head> section using PHP to echo the_title().
  6. Verify using Facebook Sharing Debugger after saving.
Full WooCommerce guide →Official WooCommerce docs ↗
How to fix missing og title on BigCommerce
  1. Go to Storefront → Themes → click 'Advanced' → 'Edit Theme Files' on your active theme.
  2. In the theme file editor, open templates/layout/base.html (or the equivalent head template for your theme).
  3. Locate the <head> section and search for any existing og:title tag. If absent, add: <meta property="og:title" content="{{this.head.title}}"> just before </head>.
  4. BigCommerce's Stencil framework exposes {{this.head.title}} as the current page title — this variable works across all page types (product, category, home, etc.).
  5. For per-page titles: in the admin go to Products → Edit a product → scroll to the 'SEO & sharing' section → fill in the 'Page title' field. BigCommerce uses this as the title for og:title when the template variable is used.
  6. Download/preview your theme changes and verify using Facebook Sharing Debugger.
Full BigCommerce guide →Official BigCommerce docs ↗
How to fix missing og title on Wix
  1. Wix automatically generates og:title tags for most pages using your page's SEO title. To set the SEO title: open the Wix Editor, click on the page you want to edit, then go to Pages & Menu → hover over the page → click the '...' menu → SEO Basics.
  2. In the SEO Basics panel, fill in the 'Title tag' field. Wix will use this value as the og:title when your page is shared on social media.
  3. For product pages in Wix eCommerce: go to your Wix Dashboard → Stores → Products → click a product → scroll to the 'SEO' section and fill in the 'Page title' field.
  4. To set a custom og:title beyond what Wix auto-generates (advanced): in the Wix Editor go to the page → Settings → Advanced SEO → paste custom Open Graph meta tags in the 'Additional tags' area: <meta property="og:title" content="Your Custom Title Here" />
  5. Verify by sharing a page URL in Facebook Sharing Debugger to confirm the og:title is correct.
Full Wix guide →Official Wix docs ↗
How to fix missing og title on Squarespace
  1. Squarespace automatically generates og:title from your page's SEO title. To set it: in the Pages panel, hover over the page → click the gear icon (Settings) → click the 'SEO' tab → fill in the 'SEO Title' field.
  2. For product pages: go to your Commerce section → Products → click a product → click the gear icon → SEO tab → fill in the SEO Title.
  3. For blog posts: open the post editor → click the gear icon → SEO tab → fill in the SEO Title.
  4. Squarespace does not currently allow fully custom og: meta tag injection per page via the UI for standard plans; the SEO Title field is the primary lever. On Business plans and above you can inject custom code: go to Settings → Advanced → Code Injection → paste your og:title tag in the Header section (this applies site-wide).
  5. Verify using the Facebook Sharing Debugger after publishing your changes.
Full Squarespace guide →Official Squarespace docs ↗
How to fix missing og title on Webflow
  1. In the Webflow Designer, click on the page you want to edit in the Pages panel on the left.
  2. Click the gear icon next to the page name to open Page Settings.
  3. Scroll down to the 'Open Graph Settings' section. Fill in the 'OG Title' field with your desired title.
  4. For dynamic CMS collection pages (e.g. product pages, blog posts): open the Collection's template page → open Page Settings → in the OG Title field, click 'Add Field' to bind it to a CMS field such as the item's Name or SEO Title field.
  5. To set og:title site-wide for pages that don't have it explicitly set, go to Project Settings → SEO → and fill in the default Open Graph title.
  6. Publish your site and verify using the Facebook Sharing Debugger.
Full Webflow guide →Official Webflow docs ↗
How to fix missing og title on Adobe Commerce (Magento)
  1. In the Admin panel, go to Content → Configuration → select your store view → click 'Edit'.
  2. Under 'Other Settings', expand the 'HTML Head' section. Here you can add default meta tags, but for og:title specifically you need to edit your theme layout.
  3. Navigate to your custom theme folder at app/design/frontend/[Vendor]/[Theme]/Magento_Theme/layout/ and open or create default_head_blocks.xml.
  4. Add an og:title tag using layout XML, or edit your theme's default.xml to include it in the <head> block.
  5. A more maintainable approach: edit app/design/frontend/[Vendor]/[Theme]/Magento_Theme/templates/html/head/additional.phtml to output: <meta property="og:title" content="<?= $block->escapeHtml($this->getLayout()->getBlock('page.main.title')->getPageTitle()) ?>" />
  6. For product pages specifically, the og:title should use the product name: in catalog/product/view.phtml or via a plugin/override, output the product name in the og:title tag.
  7. Flush the Magento cache (System → Cache Management → Flush Cache) and verify using Facebook Sharing Debugger.
Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗
How to fix missing og title on Shopify Plus
  1. Follow the same steps as Shopify (theme code editing applies equally to Shopify Plus).
  2. Shopify Plus additionally allows editing checkout.liquid: go to Online Store → Themes → Edit code → checkout.liquid and ensure og:title is present if you need social sharing from checkout or post-purchase pages.
  3. For headless Shopify Plus storefronts, add og:title in your front-end framework's <head> component using the Storefront API's product.title or page.title field.
Full Shopify Plus guide →Official Shopify Plus docs ↗
How to fix missing og title on WordPress.org
  1. Install the Yoast SEO or Rank Math plugin from Plugins → Add New if not already present.
  2. With Yoast SEO: ensure Open Graph output is enabled at SEO → Social → Facebook → toggle 'Add Open Graph meta data' ON.
  3. Edit any post/page/product → in the Yoast SEO meta box → Social tab → set the Facebook/OG title, or leave it blank to auto-inherit the SEO title.
  4. For theme-level manual addition (without a plugin): edit your child theme's header.php and add inside <head>: <meta property="og:title" content="<?php wp_title('|', true, 'right'); echo get_bloginfo('name'); ?>" />
  5. Verify with the Facebook Sharing Debugger.
Full WordPress.org guide →Official WordPress.org docs ↗
How to fix missing og title on PrestaShop
  1. In your PrestaShop admin, go to Modules → Module Manager and install a module such as 'SEO Expert' or 'Open Graph Tags' to add og:title support site-wide.
  2. Alternatively, edit your theme's head.tpl file (usually at themes/[your-theme]/templates/_partials/head.tpl) and add: <meta property="og:title" content="{$meta_title|escape:'htmlall':'UTF-8'}"> inside the <head> block.
  3. The {$meta_title} variable is populated from each page's SEO title, which you can set per product by going to Catalog → Products → edit a product → SEO tab → 'Meta title' field.
  4. Clear the PrestaShop cache (Advanced Parameters → Performance → Clear cache) and verify with Facebook Sharing Debugger.
Full PrestaShop guide →Official PrestaShop docs ↗
How to fix missing og title on Wix Studio
  1. In Wix Studio, open the site editor and select the page you want to fix from the Pages & Menus panel.
  2. Click the page settings (gear icon) → SEO tab → set the 'Page Title' field. Wix Studio maps this to the og:title tag automatically.
  3. For dynamic pages powered by a CMS dataset (e.g. a Products collection), click the dynamic page settings → SEO tab → use the dynamic field connector to bind 'Page Title' to the relevant collection field (e.g. 'Title' or 'Name').
  4. For full custom control, use the Wix Studio 'Custom Meta Tags' section (in the SEO tab of page settings) to manually add: property: og:title | content: [your title or dynamic field].
  5. Publish the site and validate with the Facebook Sharing Debugger.
Full Wix Studio guide →Official Wix Studio docs ↗
How to fix missing og title on Elementor
  1. In your WordPress dashboard, ensure you have an SEO plugin installed that Elementor integrates with — Yoast SEO or Rank Math are the most common choices. If neither is installed, install and activate one now (Plugins → Add New).
  2. Open the page you want to fix in the Elementor editor (Pages → All Pages → Edit with Elementor), then click the hamburger menu (☰) in the top-left corner and select 'Page Settings' (the gear/cog icon at the bottom of the panel) — or, if using Yoast/Rank Math, look for their meta box below the WordPress block editor when NOT in Elementor's canvas.
  3. For Yoast SEO: scroll down to the Yoast SEO meta box below the Elementor canvas (switch to WordPress editor view if needed), click the 'Social' tab (Facebook icon), and enter your desired title in the 'Facebook title' field — this directly sets og:title for that page.
  4. For Rank Math: open the Rank Math sidebar in the WordPress editor (or via the Rank Math icon in Elementor's top bar if the integration is active), navigate to the 'Social' tab, enable 'Facebook / Open Graph', and type your title in the 'Title' field under the Facebook section.
  5. To set a global og:title fallback for all pages, go to your SEO plugin's global settings: in Yoast, navigate to SEO → Search Appearance → Content Types and set the title template; in Rank Math, go to Rank Math → Titles & Meta → Global Meta and configure the 'Open Graph Title' format using variables like %title% and %sitename%.
  6. Save the individual page in Elementor (click 'Update'), then validate the og:title tag is present by pasting the page URL into the Facebook Sharing Debugger (developers.facebook.com/tools/debug/) and confirming the 'og:title' property appears with the correct value.
Full Elementor guide →Official Elementor docs ↗
How to fix missing og title on Next.js (Headless)
  1. Determine which router you are using: App Router (app/) or Pages Router (pages/). The fix differs slightly between them — use `generateMetadata` for App Router and `next/head` for Pages Router.
  2. App Router — open (or create) your root layout at `app/layout.tsx` and add a top-level `metadata` export with an `openGraph.title` field. For dynamic pages (e.g. `app/products/[slug]/page.tsx`), export an async `generateMetadata()` function that fetches the product and returns a per-page `openGraph.title`.
  3. Pages Router — import `Head` from `next/head` in every page component (e.g. `pages/index.tsx`, `pages/products/[slug].tsx`) and add `<meta property="og:title" content={title} />` inside the `<Head>` block.
  4. Ensure the `og:title` value is dynamic and meaningful: use the product name on product pages, collection name on collection pages, and a branded fallback (e.g. 'My Store') on the homepage/404.
  5. Run `next build` and inspect the rendered HTML (or use a social-media debugger such as the Facebook Sharing Debugger) to confirm the `og:title` tag is present and correct on every page type.
  6. Optionally centralise defaults in `app/layout.tsx` using `metadataBase` + `openGraph` so every child page inherits a sensible fallback and only needs to override what is unique.
Full Next.js (Headless) guide →Official Next.js (Headless) docs ↗
How to fix missing og title on Gatsby
  1. Install or confirm `gatsby-plugin-react-helmet` and `react-helmet` are present, OR use Gatsby's built-in Head API (Gatsby ≥ v4.19) — prefer the Head API as it requires no extra dependencies.
  2. For every page component (e.g. `src/pages/index.jsx`, `src/pages/product.jsx`, `src/templates/product-template.jsx`, etc.), export a named `Head` component from the same file. This is the Gatsby Head API entry point.
  3. Inside the `Head` export, render a `<meta property='og:title' content={...} />` tag. Pull the title value from the page's `pageContext`, a GraphQL `data` prop, or a site-wide constant — whichever is already used for the HTML `<title>` tag, so both stay in sync.
  4. Create (or update) a reusable `src/components/Seo.jsx` component that accepts a `title` prop and renders both `<title>`, `<meta name='title'>`, and `<meta property='og:title'>` together. Export it and use it inside every page's `Head` export to keep the logic DRY.
  5. For pages built from GraphQL + `createPage` (templates), ensure the `pageContext` or the page-level GraphQL query already fetches the product/collection/article title, then pass it as the `title` prop to the `<Seo>` component inside `Head`.
  6. Validate the fix by running `gatsby build && gatsby serve`, then inspecting the rendered HTML `<head>` for `<meta property="og:title">` — also paste a page URL into the Facebook Sharing Debugger (developers.facebook.com/tools/debug) to confirm the tag is read correctly.
Full Gatsby guide →Official Gatsby docs ↗
How to fix missing og title on Remix
  1. In your Remix project, open the root route file (typically `app/root.tsx` or `app/root.jsx`). This is where global meta tags should live so they apply to every page by default.
  2. Locate or add the exported `meta` function at the top level of the file. If it doesn't exist, add it: `export const meta: MetaFunction = () => { return []; };`
  3. Inside the `meta` function's return array, add an og:title entry: `{ property: 'og:title', content: 'Your Store Name' }`. Use a meaningful, brand-consistent title (e.g. your store's actual name). Example full export: ```ts export const meta: MetaFunction = () => [ { property: 'og:title', content: 'Your Store Name' }, ]; ```
  4. For individual routes (product pages, collection pages, etc.) that need unique og:title values, open each route file under `app/routes/` and add or update its own `meta` export. Use loader data to make it dynamic, for example: ```ts export const meta: MetaFunction<typeof loader> = ({ data }) => [ { property: 'og:title', content: data?.product?.title ?? 'Your Store Name' }, ]; ```
  5. Ensure your `app/root.tsx` renders the `<Meta />` component inside the `<head>` of its `Layout` or `default` export (e.g. `<head><Meta /><Links />...</head>`). This is what actually outputs the meta tags into the HTML — without it, the `meta` function exports have no effect.
  6. Run `npm run dev` (or `yarn dev`) to preview locally. Open DevTools → Elements and confirm `<meta property="og:title" content="...">` appears in `<head>` on both the root page and any route-specific pages you updated. Then deploy your changes.
Full Remix guide →Official Remix docs ↗

Does your site have this issue?

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

Scan my site free

Frequently asked questions

What is Missing og title?

The og:title tag is a small piece of HTML code — part of the Open Graph protocol — that tells social networks and messaging apps what title to display when someone shares a link to your store. Without it, platforms like Facebook, LinkedIn, Pinterest, and WhatsApp either guess a title (often pulling something ugly or irrelevant) or show no title at all. It lives in the <head> section of your page and looks like: <meta property="og:title" content="Your Page Title Here" />. It does not affect your visible page content — it only controls how your link previews appear when shared.

Why does missing og title matter?

Every time a customer, blogger, or influencer shares a link to your store or product page, the og:title is the headline of that shared post — it's what makes someone stop scrolling and click. Missing or broken og:title tags mean your shared links look unfinished, unprofessional, or just plain wrong, which directly reduces click-through rates from social media. For ecommerce stores, social sharing is a significant free-traffic channel: a product shared on Facebook or Pinterest with a compelling, accurate title can drive meaningful revenue. Additionally, some search tools and third-party indexers use Open Graph data as a secondary signal for content relevance, so having it set correctly supports a consistent, trustworthy brand presence across the web.

How do I fix missing og title?

Add an og:title meta tag to every page so your store's title appears correctly when shared on social media platforms like Facebook, LinkedIn, and Pinterest.

Authoritative references

Related SEO issues