Takaisin scheman toteutukseen

Meta-tagit ja Open Graph

Täydellinen tekninen opas AI-haun optimointiin

Mitä ovat meta-tagit?

Meta-tagit ovat koodinpätkiä HTML:ssäsi, jotka kuvaavat sivusi sisältöä. Ne ovat näkymättömiä vierailijoille mutta näkyviä hakukoneille ja AI-alustoille. Ajattele niitä etiketteina, jotka selittävät, mistä sivusi kertoo.

GEO-optimointia varten meta-tagit auttavat AI-moottoreita ymmärtämään sisältösi kontekstin, tarkoituksen ja miten näyttää se jaettaessa. Oikeat meta-tagit parantavat sisältösi löydettävyyttä ja esitystä.

Olennaiset meta-tagit

Meta-kuvaus

Lyhyt yhteenveto sivusi sisällöstä. Näkyy hakutuloksissa ja AI-moottoreiden vastauksissa. 150-160 merkkiä on ihanteellinen.

<meta name="description" content="Learn how to optimize your website for AI search engines with Bloffee's complete GEO optimization platform. Improve your content for ChatGPT, Claude, and other AI tools." />

Parhaat käytännöt: Kirjoita ainutlaatuiset kuvaukset jokaiselle sivulle. Sisällytä ensisijaiset avainsanat luonnollisesti. Tee siitä houkutteleva ja tarkka.

Title-tagi

Sivusi otsikko näkyy selaimen välilehdissä, hakutuloksissa ja jaettaessa. 50-60 merkkiä suositeltu. Sisällytä brändisi ja pääavainsana.

<title>Complete Guide to Meta Tags & Open Graph</title>

Canonical URL

Kertoo hakukoneille sivusi ensisijaisen version. Estää kaksinkertaisen sisällön ongelmat. Olennainen GEO:lle.

<link rel="canonical" href="https://geo-score.online/learn/technical/meta-tags-complete" />

Robots meta-tagi

Hallitsee, miten hakukoneet ja AI-botit ovat vuorovaikutuksessa sivusi kanssa. Käytä "index, follow" salliaksesi täyden pääsyn.

<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />

Open Graph -tagit

Open Graph -tagit hallitsevat, miten sisältösi näkyy jaettaessa sosiaalisessa mediassa. Facebook loi alun perin, nyt käytössä monilla alustoilla, mukaan lukien AI-työkalut.

Täydellinen Open Graph -esimerkki

<meta property="og:title" content="Complete Guide to Meta Tags" /> <meta property="og:description" content="Master meta tags and Open Graph for GEO optimization." /> <meta property="og:type" content="article" /> <meta property="og:url" content="https://geo-score.online/learn/technical/meta-tags-complete" /> <meta property="og:image" content="https://geo-score.online/images/meta-tags-guide.jpg" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta property="og:site_name" content="Bloffee" /> <meta property="og:locale" content="en_US" /> <meta property="article:published_time" content="2025-01-10T00:00:00.000Z" /> <meta property="article:modified_time" content="2025-01-10T12:00:00.000Z" /> <meta property="article:author" content="Bloffee" />

Open Graph -kuvan vaatimukset

og:image on ratkaiseva. Se näkyy, kun sisältö jaetaan. Noudata näitä määrityksiä:

  • Suositeltu koko: 1200 x 630 pikseliä
  • Vähimmäiskoko: 600 x 314 pikseliä
  • Maksimitiedostokoko: 8 Mt
  • Muoto: JPG tai PNG
  • Kuvasuhde: 1,91:1

Twitter Card -tagit

Twitter Cards toimii samalla tavalla kuin Open Graph, mutta on Twitteriin/X:ään spesifinen. Ne parantavat, miten linkkisi näkyvät alustalla.

Twitter Card -esimerkki

<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@bloffee" /> <meta name="twitter:creator" content="@bloffee" /> <meta name="twitter:title" content="Complete Guide to Meta Tags" /> <meta name="twitter:description" content="Master meta tags and Open Graph for GEO." /> <meta name="twitter:image" content="https://geo-score.online/images/meta-tags-guide.jpg" />

Twitter Card -tyypit

  • summary: Pieni neliön muotoinen kuvan pikkukuva
  • summary_large_image: Suuri bannerikuva (suositeltu)
  • app: Mobiilisovellusten mainostamiseen
  • player: Video-/audiosisällölle

Edistyneet meta-tagit GEO:lle

Kirjoittajatiedot

Auta AI-moottoreita ymmärtämään sisällön kirjoittajuutta ja auktoriteettia.

<meta name="author" content="Bloffee Team" /> <link rel="author" href="https://geo-score.online/about" />

Kieli ja maa-asetus

Määritä sisällön kieli kansainvälisille sivustoille.

<html lang="en"> <meta property="og:locale" content="en_US" /> <meta property="og:locale:alternate" content="nl_NL" /> <meta property="og:locale:alternate" content="fr_FR" />

Charset ja Viewport

Olennaiset tekniset tagit oikeaan renderöintiin.

<meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />

Täydellinen meta-tagien malli

Käytä tätä mallia lähtöpisteenä kaikille sivuillesi:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Primary Meta Tags --> <title>Your Page Title | Brand Name</title> <meta name="title" content="Your Page Title | Brand Name"> <meta name="description" content="Clear description of your page content in 150-160 characters."> <meta name="author" content="Your Name or Company"> <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1"> <link rel="canonical" href="https://yoursite.com/page-url"> <!-- Open Graph / Facebook --> <meta property="og:type" content="article"> <meta property="og:url" content="https://yoursite.com/page-url"> <meta property="og:title" content="Your Page Title"> <meta property="og:description" content="Clear description for social sharing."> <meta property="og:image" content="https://yoursite.com/image.jpg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:site_name" content="Your Brand"> <meta property="og:locale" content="en_US"> <!-- Twitter --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:url" content="https://yoursite.com/page-url"> <meta name="twitter:title" content="Your Page Title"> <meta name="twitter:description" content="Clear description for Twitter."> <meta name="twitter:image" content="https://yoursite.com/image.jpg"> </head> <body> <!-- Your content --> </body> </html>

Meta-tagien testaaminen

Testaa aina meta-tagit ennen julkaisemista:

Facebookin jakamisen debuggeri

Testaa Open Graph -tagit: developers.facebook.com/tools/debug/

Twitter Card -validaattori

Testaa Twitter Cardit: cards-dev.twitter.com/validator

LinkedInin julkaisun tarkastaja

Testaa LinkedIn-jakaminen: linkedin.com/post-inspector/

Meta-tagien pikanäppäimet

  • Kirjoita ainutlaatuiset meta-kuvaukset jokaiselle sivulle
  • Pidä otsikot alle 60 merkin
  • Käytä korkealaatuisia kuvia og:imagelle (1200x630px)
  • Sisällytä aina canonical URL:t
  • Testaa debuggaustyökaluilla ennen julkaisemista
  • Päivitä og:image, kun uudelleensuunnittelet tai uudelleenbrändäät

Aiheeseen liittyvät resurssit

Täydellinen opas meta-tageihin ja Open Graphiin AI-haulle