How to Fix Missing Open Graph & Twitter Cards

1. In the WordPress editor, scroll down to your SEO plugin settings (Yoast or Rank Math).
2. Click on the Social tab (Facebook / Twitter icon).
3. Upload a 1200x630px JPG or PNG image to the Social Image selector.
4. Customise the Social Title and Social Description if you want them to differ from standard Google search snippets.
5. To set a fallback default image for the whole site: Go to Yoast > Settings > Site Representation or Rank Math > Titles & Meta > Global Meta > OpenGraph Thumbnail.

1. Open the Pages panel on the left.
2. Click the Gear icon next to the page name.
3. Scroll down to the Open Graph Settings section.
4. Check “Same as SEO title/description” or provide custom copy.
5. In the Open Graph Image URL field, paste an absolute HTTPS URL to an uploaded asset (upload via the Assets panel, click the gear icon on the image, and click the copy URL link).
6. Publish the site to apply changes.

1. Go to Online Store > Preferences.
2. Scroll to the Social sharing image preview section.
3. Click Add image and upload a 1200x630px image that represents the store.
4. For individual products and blogs, Shopify’s liquid template automatically pulls the featured product image as the og:image tag. Ensure all products have at least one featured photo.
5. Click Save.

Add openGraph and twitter fields to your metadata in page.tsx or layout.tsx:

export const metadata = {
  title: 'Client Project Title',
  description: 'Detailed description of the client deliverable.',
  openGraph: {
    title: 'Client Project Title',
    description: 'Detailed description of the client deliverable.',
    url: 'https://example.com',
    siteName: 'Example Agency',
    images: [
      {
        url: 'https://example.com/og-preview.png',
        width: 1200,
        height: 630,
        alt: 'Agency portfolio showcase',
      },
    ],
    locale: 'en_US',
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Client Project Title',
    description: 'Detailed description of the client deliverable.',
    images: ['https://example.com/og-preview.png'],
  },
};