Kopioi ja liitä Esikatselulla Sisältää kuva- ja välimuistivinkit

OGP-tagigeneraattori (Luo automaattisesti og:title/og:image jne.)

Q: "Pitäisikö minun lisätä myös Twitter Card -tagit?"

"Kyllä. twitter:card ja siihen liittyvät tagit voidaan luoda yhdessä. X voi hyödyntää myös OG-tagoja, joten suppeammatkin asetukset toimivat."

Q: "Mikä on suositeltu kuvan koko?"

"Meta suosittelee ohjeissaan kokoa 1200×630 tai suurempaa (vähintään 600×315) ja noin 1.91:1-kuvasuhdetta. X:n kortilla on eri suhde ja minimit. Valitse kohdealustan mukaan."

Q: "Esikatselu ei päivity"

"Yleensä syynä on välimuisti. Hae tiedot uudelleen debugger-työkaluilla, ja jos vaihdoit kuvan, käytä uutta kuvan URL-osoitetta."

Syötä URL, otsikko, kuvaus ja kuvan URL. Luo Open Graph- ja Twitter Card -metatagit kerralla.

Haku suoritetaan suoraan selaimessasi (CORS-rajoitukset voivat päteä).

Syöte

Luodut metatagit / Esikatselu

1) Perustiedot

Pakollinen

Otsikko (og:title) Pakollinen

Ohje: 30–60 merkkiä 0

Kuvaus (og:description) Valinnainen

Ohje: 80–120 merkkiä 0

Kuvan URL (og:image) Pakollinen

Pienoiskuva tulee näkyviin, kun kuva latautuu.

Nykyinen suhde -

Sivuston nimi (og:site_name) Valinnainen

Tyyppi (og:type) Pakollinen

Valitse verkkosivusto tai artikkeli.

2) Twitter Card

Piilotettava / Oletuksena päällä

Sisällytä Twitter Card -tagit

twitter:card

twitter:site (valinnainen)

twitter:creator (valinnainen)

Automaattisen synkronoinnin säännöt

• Jos twitter:title on tyhjä, käytetään og:title-tietoa.
• Jos twitter:description on tyhjä, käytetään og:description-tietoa.
• Jos twitter:image on tyhjä, käytetään og:image-tietoa.

3) Lisäasetukset

Avaa vain, jos tarvitset hienosäätöä.

og:locale (valinnainen)

og:image:alt / twitter:image:alt

Saavutettavuusteksti. X sallii enintään 420 merkkiä.

og:image:width

og:image:height

Leveyden ja korkeuden lisääminen voi auttaa hakukoneita renderöimään nopeammin. (Facebook Developers)

Artikkelitagit (vain kun og:type=article)

article:published_time

article:modified_time

Käytä tarvittaessa ISO 8601 -muotoa.

Luodut metatagit

Esikatselu

OG-esikatselu

example.com

Esikatselun otsikko

Kuvaus ilmestyy tähän.

Useat some- ja viestintäsovellukset näyttävät tältä

X-kortin esikatselu summary

example.com

Esikatselun otsikko

Kuvaus ilmestyy tähän.

Vaihtaa tilojen summary ja summary_large_image välillä

Huomautukset (valinnainen)

Huomautukset ilmestyvät tähän syötteidesi perusteella.

Valinnat

Tallenna syötteet URL-osoitteeseen Jaa linkki avataksesi sivun samoilla asetuksilla Poista välilyönnit automaattisesti Poistaa myös täyslevyiset välilyönnit Suojaa lainausmerkit Pidä meta-attribuutit turvallisina

Kuvan koko-ohje (esimerkkejä)

Valitse OG tai X nähdäksesi esimerkkikoot

OG-painotteinen X-painotteinen

Kuvasuhdevinkki -

Käyttöohje / Esimerkit

Täytä URL, otsikko, kuvaus ja kuvan URL.
Valitse og:type ja (valinnaisesti) Twitter Card -asetukset.
Kopioi luodut tagit ja liitä ne sivustosi <head>-osaan.

Nopea esimerkki

Syötä URL + otsikko + kuva, ja kopioi sitten suositeltu sarja.

Huomioita ja vinkkejä

Mikä on OGP?

OGP (Open Graph Protocol) antaa some-alustojen lukea sivusi otsikon, kuvauksen ja kuvan.

Asettamalla og:title/og:description/og:image voit hallita, miltä jaetut linkit näyttävät.

Twitter-kortit (X) käyttävät vastaavia metatietoja ja voivat hyödyntää OG-tagoja.

Kuvan koko-ohje (vakaammat esikatselut)

Meta (Facebook) -ohjeistus

• Vähintään 200×200.
• Parhaan näyttötuloksen saamiseksi 1200×630 tai suurempi; vähintään 600×315. (Facebook Developers)
• Noin 1.91:1 kuvasuhde auttaa välttämään kuvan rajautumista.
• Tiedostokoon suositus on 8 Mt tai vähemmän.

X (Twitter) -korttiohjeistus

• summary_large_image tukee 2:1-suhdetta; vähintään 300×157, enintään 4096×4096. (X Developer)
• Tiedostokoko alle 5 Mt ja yleiset muodot (JPG/PNG/WEBP/GIF) ovat suositeltuja.

Kun muutokset eivät näy (välimuisti ja uudelleenhaku)

• Some-botit tallentavat OG-tiedot välimuistiin. Käytä kunkin alustan virheenkorjaustyökaluja (debugger) uudelleenhaun tekemiseen.
• Jos vaihdoit kuvan, mutta se ei päivity, kuvan URL-osoite saattaa olla välimuistissa; vaihda tiedostonimeä tai lisää kyselymerkkijono.
• og:image:width/height-tietojen lisääminen voi parantaa esityksen vakautta. (Facebook Developers)

Työkaluja varmistamiseen

Meta Sharing Debugger

Hae tiedot uudelleen ja tarkasta OG-tagit.

LinkedIn Post Inspector

Päivitä LinkedInin välimuistiin tallennettu esikatselu.

X Card Validator

Tarkista Twitter-kortin renderöinti.

UKK

Pitäisikö minun lisätä myös Twitter Card -tagit?

Kyllä. twitter:card ja siihen liittyvät tagit voidaan luoda yhdessä. X voi hyödyntää myös OG-tagoja, joten suppeammatkin asetukset toimivat.

Mikä on suositeltu kuvan koko?

Meta suosittelee ohjeissaan kokoa 1200×630 tai suurempaa (vähintään 600×315) ja noin 1.91:1-kuvasuhdetta. X:n kortilla on eri suhde ja minimit. Valitse kohdealustan mukaan.

Esikatselu ei päivity

Yleensä syynä on välimuisti. Hae tiedot uudelleen debugger-työkaluilla, ja jos vaihdoit kuvan, käytä uutta kuvan URL-osoitetta.