WordPress

WordPress nie ma własnych znaczników Open Graph; dodaje je wtyczka SEO. Użyj do tego jednej wtyczki: dwie wtyczki zapisujące te same znaczniki dają platformom sprzeczne wartości.

Yoast SEO. Open Graph jest domyślnie włączony (Yoast SEO → Settings → Site features → Open Graph data). Domyślny obraz ustaw w Yoast SEO → Settings → Site basics → Site image. Dla pojedynczego wpisu lub strony otwórz w edytorze zakładkę Social w panelu Yoast i ustaw tytuł, opis i obraz do udostępniania. Yoast zapisuje też twitter:card.

Rank Math. Domyślny obraz ustaw w Rank Math SEO → Titles & Meta → Global Meta → OpenGraph Thumbnail, a typ karty w Twitter Card Type na tej samej stronie. Dla pojedynczego wpisu otwórz w edytorze panel Rank Math, Edit Snippet → Social.

Bez własnego obrazu obie wtyczki używają obrazka wyróżniającego (featured image) wpisu, więc ustaw go we wpisach, które udostępniasz. Następnie wyczyść pamięć podręczną stron.

Node.js i Next.js

Next.js, App Router. Użyj Metadata API w layoucie lub stronie:

export const metadata = {
    metadataBase: new URL('https://example.com'),
    title: 'Wiosenna wyprzedaż: 20 % taniej na wszystkie rowery',
    description: 'Rowery szosowe, gravelowe i miejskie, z darmową dostawą do 30 kwietnia.',
    openGraph: {
        title: 'Wiosenna wyprzedaż: 20 % taniej na wszystkie rowery',
        description: 'Rowery szosowe, gravelowe i miejskie, z darmową dostawą do 30 kwietnia.',
        images: [{ url: '/images/share/spring-sale.jpg', width: 1200, height: 630 }],
    },
    twitter: {
        card: 'summary_large_image',
    },
};

metadataBase zamienia względne ścieżki obrazów na adresy bezwzględne. Dla stron budowanych z danych eksportuj zamiast tego generateMetadata(). Możesz też umieścić plik opengraph-image.jpg (lub .png) w katalogu trasy, a Next.js doda dla niego znaczniki obrazu.

Uwaga: openGraph na stronie w całości zastępuje openGraph z layoutu, nie łączy się z nim. Jeśli strona ustawia tylko tytuł, traci obraz z layoutu. Powtórz obraz albo trzymaj wspólne wartości w zmiennej.

Pages Router i inne aplikacje Node.js: zapisz znaczniki z tabeli powyżej w nagłówku strony (next/head w Next.js, gdzie indziej szablon), z wartościami z danych każdej strony.

Laravel

Dodaj znaczniki z wartościami domyślnymi do głównego layoutu i pozwól każdemu widokowi je nadpisać:

<meta property="og:title" content="@yield('og_title', config('app.name'))">
<meta property="og:description" content="@yield('og_description', 'Rowery szosowe, gravelowe i miejskie.')">
<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">

W widoku:

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

asset() i url() budują adresy bezwzględne z APP_URL, więc upewnij się, że APP_URL na produkcji to prawdziwy adres https://. Jeśli jest tam http://localhost, psuje się każdy podgląd.

Statyczny HTML

Dodaj znaczniki z tabeli powyżej wewnątrz <head> na każdej stronie, z tytułem, opisem i obrazem tej strony. Z generatorem stron (Hugo, Jekyll, Eleventy) dodaj je raz w szablonie bazowym i wypełniaj z front matter każdej strony, z domyślnym obrazem dla stron, które go nie mają.

Shopify

Motywy Shopify same zapisują znaczniki Open Graph i X, na podstawie tytułu strony, opisu SEO i obrazu produktu lub kolekcji.

• Domyślny obraz: Online Store → Preferences → Social sharing image. Jest używany dla strony głównej i stron bez własnego obrazu.
• Produkty i kolekcje: do udostępniania używany jest główny obraz produktu, więc pierwsze zdjęcie produktu powinno dobrze wyglądać po przycięciu do szerokiego prostokąta.
• Tytuł i opis: ustaw je w Search engine listing na dole każdego produktu, kolekcji lub strony.

Wix

Wix zapisuje znaczniki na podstawie ustawień SEO każdej strony. W edytorze otwórz ustawienia strony (⋯ obok strony w menu stron) i przejdź do Social share: ustaw obraz, tytuł i opis używane przy udostępnianiu strony. Bez tego Wix użyje obrazu ze strony lub domyślnego obrazu witryny.

Webflow

Otwórz panel Pages, kliknij koło zębate obok strony i wypełnij Open Graph settings: tytuł, opis i URL obrazu. Na stronach szablonów CMS powiąż pola z kolekcją (na przykład z głównym obrazem wpisu), aby każdy element miał własny podgląd. Następnie opublikuj witrynę ponownie.

Squarespace

W ustawieniach strony otwórz zakładkę Social image i prześlij obraz dla tej strony. Dla wpisów na blogu i produktów używany jest obraz wpisu lub produktu. Dla stron bez własnego obrazu Squarespace używa obrazu do udostępniania w mediach społecznościowych z ustawień witryny, więc ustaw go najpierw.