How to fix missing og title on Remix

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

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.

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.

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