Open Graph -tunnisteiden lisääminen mille tahansa verkkosivustolle

Tapa 1: Raaka-HTML (mikä tahansa staattinen verkkosivusto)

Jos sinulla on suora pääsy HTML-tiedostoihisi, lisää nämä tunnisteet kunkin sivun -osioon:

<!-- Open Graph -->
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A compelling description." />
<meta property="og:image" content="https://yoursite.com/images/preview.jpg" />
<meta property="og:url" content="https://yoursite.com/your-page" />
<meta property="og:type" content="website" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A compelling description." />
<meta name="twitter:image" content="https://yoursite.com/images/preview.jpg" />

Varmista, että og:image URL-osoite on absoluuttinen (alkaa https://). Suhteelliset polut, kuten /images/preview.jpg, eivät toimi.

Tapa 2: WordPress (Yoast SEO)

Jos käytät WordPress Yoast SEO:n kanssa, OG-tunnisteet käsitellään automaattisesti:

1. Asenna ja aktivoi Yoast SEO -laajennus
2. Muokkaa mitä tahansa sivua tai viestiä
3. Vieritä alas Yoast SEO -metalaatikkoon
4. Napsauta Sosiaalinen-välilehteä
5. Aseta "Facebook otsikko", "Facebook kuvaus" ja "Facebook kuva"
6. Yoast luo automaattisesti oikeat og: -tunnisteet

Yoast lisää myös tunnisteet Twitter Card automaattisesti. Voit määrittää ne kohdassa Yoast SEO → Social → Twitter.

Tapa 3: WordPress (RankMath)

RankMath toimii samalla tavalla kuin Yoast, mutta hieman erilaisilla asetuksilla:

1. Asenna ja aktivoi RankMath SEO
2. Muokkaa mitä tahansa sivua tai viestiä
3. Etsi RankMath-metalaatikko
4. Siirry "Sosiaalinen"-välilehteen
5. Aseta sosiaalinen kuva, otsikko ja kuvaus
6. RankMath luo automaattisesti OG- ja Twitter Card-tunnisteet

Tapa 4: Next.js (sovellusreititin)

Käytä versiossa Next.js 13+ (App Router) Metadata API:ta:

export const metadata = {
  title: 'Your Page Title',
  description: 'A compelling description.',
  openGraph: {
    title: 'Your Page Title',
    description: 'A compelling description.',
    images: ['https://yoursite.com/images/preview.jpg'],
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Your Page Title',
    description: 'A compelling description.',
    images: ['https://yoursite.com/images/preview.jpg'],
  },
};

Dynaamisille sivuille (kuten blogikirjoituksille) luo metatiedot muodossa generateMetadata():

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
    },
  };
}

Katso tunnisteet Open Graph oppaasta Next.js oppaasta saadaksesi syvemmän sukelluksen.

Tapa 5: Webflow

Webflow sisältää sisäänrakennetut Open Graph-asetukset:

1. Siirry projektiasetuksiin
2. Napsauta "SEO-asetukset"
3. Aseta "Oletussisällönkuvauskentät" -kohdassa Facebook/OG-kuva, otsikko ja kuvaus
4. Siirry yksittäisille sivuille sivun asetukset → SEO-asetukset ja ohita oletusasetukset
5. Webflow luo automaattisesti oikeat OG-tunnisteet

Tapa 6: Mukautettu CMS tai Headless Setup

Jos käytät päätöntä CMS (Contentful, Sanity, Strapi jne.), lisää OG-tageja käyttöliittymäkehykseesi. Prosessi on sama kuin Next.js – luo tunnisteet dynaamisesti CMS tiedoistasi ja lisää ne sivulle .

Pikakorjauksen tarkistuslista

Usein kysytyt kysymykset