WordPress

WordPress lastnih oznak Open Graph nima; doda jih vtičnik za SEO. Za to uporabite en vtičnik: dva vtičnika, ki pišeta iste oznake, platformam dasta nasprotujoče si vrednosti.

Yoast SEO. Open Graph je privzeto vklopljen (Yoast SEO → Settings → Site features → Open Graph data). Privzeto sliko nastavite v Yoast SEO → Settings → Site basics → Site image. Za posamezen prispevek ali stran v urejevalniku odprite zavihek Social v Yoastovem panelu in nastavite naslov, opis in sliko za deljenje. Yoast zapiše tudi twitter:card.

Rank Math. Privzeto sliko nastavite v Rank Math SEO → Titles & Meta → Global Meta → OpenGraph Thumbnail, tip kartice pa pod Twitter Card Type na isti strani. Za posamezen prispevek v urejevalniku odprite panel Rank Math, Edit Snippet → Social.

Brez lastne slike oba vtičnika uporabita izpostavljeno sliko (featured image) prispevka, zato jo nastavite pri prispevkih, ki jih delite. Nato počistite predpomnilnik strani.

Node.js in Next.js

Next.js, App Router. V predlogi ali strani uporabite Metadata API:

export const metadata = {
    metadataBase: new URL('https://example.com'),
    title: 'Pomladna razprodaja: 20 % popusta na vsa kolesa',
    description: 'Cestna, gravel in mestna kolesa, z brezplačno dostavo do 30. aprila.',
    openGraph: {
        title: 'Pomladna razprodaja: 20 % popusta na vsa kolesa',
        description: 'Cestna, gravel in mestna kolesa, z brezplačno dostavo do 30. aprila.',
        images: [{ url: '/images/share/spring-sale.jpg', width: 1200, height: 630 }],
    },
    twitter: {
        card: 'summary_large_image',
    },
};

metadataBase relativne poti slik spremeni v absolutne naslove. Za strani, zgrajene iz podatkov, namesto tega izvozite generateMetadata(). Lahko pa v mapo poti postavite datoteko opengraph-image.jpg (ali .png) in Next.js zanjo doda oznake slike.

Opomba: openGraph na strani v celoti zamenja openGraph iz predloge, z njim se ne združi. Če stran nastavi samo naslov, izgubi sliko iz predloge. Sliko ponovite ali skupne vrednosti hranite v spremenljivki.

Pages Router in druge aplikacije Node.js: oznake iz zgornje tabele zapišite v glavo strani (next/head v Next.js, drugje predloga), z vrednostmi iz podatkov vsake strani.

Laravel

Oznake s privzetimi vrednostmi dodajte v glavno predlogo, vsak pogled pa naj vrednosti po potrebi povozi:

<meta property="og:title" content="@yield('og_title', config('app.name'))">
<meta property="og:description" content="@yield('og_description', 'Cestna, gravel in mestna kolesa.')">
<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">

V pogledu:

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

asset() in url() absolutne naslove sestavita iz APP_URL, zato poskrbite, da je APP_URL v produkciji pravi naslov https://. Če je tam http://localhost, se pokvari vsak predogled.

Statični HTML

Oznake iz zgornje tabele dodajte znotraj <head> na vsaki strani, z naslovom, opisom in sliko te strani. Z generatorjem strani (Hugo, Jekyll, Eleventy) jih dodajte enkrat v osnovno predlogo in jih napolnite iz front matterja vsake strani, s privzeto sliko za strani brez nje.

Shopify

Teme Shopify oznake Open Graph in X zapišejo same, iz naslova strani, opisa SEO in slike izdelka ali kolekcije.

• Privzeta slika: Online Store → Preferences → Social sharing image. Uporabi se za domačo stran in strani brez lastne slike.
• Izdelki in kolekcije: za deljenje se uporabi glavna slika izdelka, zato naj bo prva slika izdelka lepa tudi obrezana v širok pravokotnik.
• Naslov in opis: nastavite ju v Search engine listing na dnu vsakega izdelka, kolekcije ali strani.

Wix

Wix oznake zapiše iz nastavitev SEO vsake strani. V urejevalniku odprite nastavitve strani (⋯ ob strani v meniju strani) in pojdite na Social share: nastavite sliko, naslov in opis za deljenje strani. Brez tega Wix uporabi sliko s strani ali privzeto sliko strani.

Webflow

Odprite panel Pages, kliknite zobnik ob strani in izpolnite Open Graph settings: naslov, opis in URL slike. Na predlogah CMS polja povežite z zbirko (na primer z glavno sliko prispevka), da vsak vnos dobi svoj predogled. Nato stran znova objavite.

Squarespace

V nastavitvah strani odprite zavihek Social image in naložite sliko za to stran. Za prispevke na blogu in izdelke se uporabi slika prispevka oziroma izdelka. Za strani brez lastne slike Squarespace uporabi sliko za deljenje na družbenih omrežjih iz nastavitev strani, zato najprej nastavite to.