WordPress

WordPress has no Open Graph tags of its own; an SEO plugin adds them. Use one plugin for this: two plugins writing the same tags give platforms conflicting values.

Yoast SEO. Open Graph is on by default (Yoast SEO → Settings → Site features → Open Graph data). Set the default image in Yoast SEO → Settings → Site basics → Site image. For a single post or page, open the Social tab in the Yoast panel in the editor and set the title, description and image for sharing. Yoast also writes twitter:card.

Rank Math. Set the default image in Rank Math SEO → Titles & Meta → Global Meta → OpenGraph Thumbnail, and the card type under Twitter Card Type on the same page. For a single post, open the Rank Math panel in the editor, Edit Snippet → Social.

Without a custom image, both plugins use the post's featured image, so set featured images on the posts you share. Then clear the page cache.

Node.js and Next.js

Next.js, App Router. Use the Metadata API in a layout or page:

export const metadata = {
    metadataBase: new URL('https://example.com'),
    title: 'Spring sale: 20 % off all bikes',
    description: 'Road, gravel and city bikes, with free delivery until 30 April.',
    openGraph: {
        title: 'Spring sale: 20 % off all bikes',
        description: 'Road, gravel and city bikes, with free delivery until 30 April.',
        images: [{ url: '/images/share/spring-sale.jpg', width: 1200, height: 630 }],
    },
    twitter: {
        card: 'summary_large_image',
    },
};

metadataBase turns relative image paths into absolute addresses. For pages built from data, export generateMetadata() instead. Alternatively, put an opengraph-image.jpg (or .png) file in the route's folder and Next.js adds the image tags for it.

Note: openGraph in a page replaces the layout's openGraph as a whole, it does not merge with it. If a page sets only the title, it loses the image from the layout. Repeat the image, or keep shared values in a variable.

Pages Router and other Node.js apps: write the tags from the table above into the page head (next/head in Next.js, the layout template elsewhere), with values from each page's data.

Laravel

Add the tags to the main layout with a default, and let each view override the values:

<meta property="og:title" content="@yield('og_title', config('app.name'))">
<meta property="og:description" content="@yield('og_description', 'Road, gravel and city bikes.')">
<meta property="og:image" content="@yield('og_image', asset('images/share/default.jpg'))">
<meta property="og:url" content="{{ url()->current() }}">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">

In a view:

@section('og_title', $post->title)
@section('og_image', asset('storage/'.$post->share_image))

asset() and url() build absolute addresses from APP_URL, so make sure APP_URL in production is the real https:// address. With http://localhost there, every preview breaks.

Static HTML

Add the tags from the table above inside <head> on each page, with that page's title, description and image. With a site generator (Hugo, Jekyll, Eleventy), add them once to the base layout and fill them from each page's front matter, with a default image for pages that have none.

Shopify

Shopify themes write the Open Graph and X tags themselves, from the page title, the SEO description and the product or collection image.

• Default image: Online Store → Preferences → Social sharing image. It is used for the home page and for pages without an image of their own.
• Products and collections: the main product image is used for sharing, so the first image of a product should look good cropped to a wide rectangle.
• Title and description: set them in Search engine listing at the bottom of each product, collection or page.

Wix

Wix writes the tags from each page's SEO settings. In the editor, open the page's settings (⋯ next to the page in the pages menu) and go to Social share: set the image, title and description used when the page is shared. Without one, Wix uses an image from the page or the site's default.

Webflow

Open the Pages panel, click the gear next to the page, and fill in Open Graph settings: title, description and image URL. On CMS template pages, bind the fields to the collection (for example the post's main image), so every item gets its own preview. Then publish the site again.

Squarespace

In the page's settings, open the Social image tab and upload the image for that page. For blog posts and products, the post or product image is used. For pages without their own image, Squarespace uses the site-wide social sharing image from the site settings, so set that one first.