Hvernig á að bæta Open Graph merkjum við hvaða vefsíðu sem er

Hvort sem þú ert að nota hrátt HTML, WordPress, Next.js eða Webflow — hér er nákvæmlega hvernig á að bæta Open Graph merkjum við síðuna þína.

Aðferð 1: Hrátt HTML (hver kyrrstæð vefsíða sem er)

Ef þú hefur beinan aðgang að HTML skránum þínum skaltu bæta þessum merkjum við hluta hverrar síðu:

<!-- 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" />

Gakktu úr skugga um að og:image vefslóðin sé algjör (byrjar á https://). Hlutfallslegar leiðir eins og /images/preview.jpg virka ekki.

Aðferð 2: WordPress (Yoast SEO)

Ef þú notar WordPress með Yoast SEO, eru OG merki meðhöndluð sjálfkrafa:

1. Settu upp og virkjaðu Yoast SEO viðbótina
2. Breyttu hvaða síðu eða færslu sem er
3. Skrunaðu niður að Yoast SEO metaboxinu
4. Smelltu á "Félagslegt" flipann
5. Stilltu „Facebook titil“, „Facebook lýsingu“ og „Facebook mynd“
6. Yoast býr sjálfkrafa til rétt og: merki

Yoast bætir einnig við Twitter Card merkjum sjálfkrafa. Þú getur stillt þær undir Yoast SEO → Félagslegt → Twitter.

Aðferð 3: WordPress (RankMath)

RankMath virkar svipað og Yoast en með aðeins mismunandi stillingum:

1. Settu upp og virkjaðu RankMath SEO
2. Breyttu hvaða síðu eða færslu sem er
3. Finndu RankMath metaboxið
4. Farðu í flipann "Social".
5. Stilltu félagslega mynd, titil og lýsingu
6. RankMath býr sjálfkrafa til OG og Twitter Card merki

Aðferð 4: Next.js (App Router)

Í Next.js 13+ (App Router), notaðu Metadata API:

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'],
  },
};

Fyrir kraftmiklar síður (eins og bloggfærslur), búðu til lýsigögn í 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],
    },
  };
}

Sjáðu Open Graph merkin okkar í Next.js handbókinni fyrir dýpri köfun.

Aðferð 5: Webflow

Webflow hefur innbyggðar Open Graph stillingar:

1. Farðu í verkefnastillingarnar þínar
2. Smelltu á "SEO Stillingar"
3. Undir „Sjálfgefin metamerki“ skaltu stilla Facebook/OG mynd, titil og lýsingu
4. Fyrir einstakar síður, farðu í síðustillingar → SEO Stillingar og hnekktu sjálfgefna stillingum
5. Webflow býr sjálfkrafa til rétt OG merki

Aðferð 6: Sérsniðin CMS eða höfuðlaus uppsetning

Ef þú ert að nota höfuðlausan CMS (Contentful, Sanity, Strapi, osfrv.), bættu OG-merkjum við í framenda rammanum þínum. Ferlið er það sama og Next.js — búðu til merkin á kraftmikinn hátt úr CMS gögnunum þínum og sprautaðu þeim inn á síðuna .

Gátlisti til fljótlegra laga

Algengar spurningar