Open Graph Meta Tag Generátor

Konfiguráció

Hozd létre azt a címet, leírást, URL-t és előnézeti képet, amelyet a közösségi platformok használnak, amikor az oldalad megosztásra kerül.

Oldal címe

Oldal leírása

Kanonikus oldal URL (Canonical)

OG kép URL

Legjobb gyakorlat: használj egy nyilvános, 1200×630-as képet, hogy az előnézet megtartsa a megfelelő Open Graph arányt.

Élő előnézet

Ez az előnézet fix Open Graph képarányt biztosít, és megakadályozza, hogy a hosszú szövegek szétnyomják a kártyát.

1200 × 630

Adj hozzá egy 1200×630-as képet

Illessz be egy nyilvános kép URL-t, hogy lásd, hogyan fog megjelenni az OG kép előnézete.

pelda.hu/az-te-oldalad

Az oldalad címe itt fog megjelenni

A leírásod itt fog megjelenni. Legyen hasznos, lényegretörő és könnyen érthető, mielőtt valaki rákattintana.

Kód

Illeszd be ezt a kódot az oldalad head szekciójába.

<meta property="og:type" content="website">
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

Oszd meg ezt az Eszközt barátaiddal!

Gyakorlati útmutató

Tervezd meg a link előnézetét, még mielőtt az emberek meglátogatnák az oldalad

An Open Graph nem csupán egy technikai SEO részlet. Ez vezérli az oldalad első benyomását, amikor valaki megosztja azt egy hírfolyamban, üzenetben, közösségben, munkakörnyezetben vagy csoportos chatben. Egy erős előnézet gyorsan elmagyarázza az oldal témáját, megbízhatónak tűnik, és egyértelmű okot ad a felhasználóknak a kattintásra.

OG Image

Tedd egyértelművé a megosztási kártyát

Használj világos címet, egyszerű vizuális elemet és biztonságos térközöket.

Gondolj az OG képedre úgy, mint egy mini érkezőoldalra (landing page). Akkor is érthetőnek kell lennie, ha megvágják, tömörítik, vagy egy kis kijelzőn jelenítik meg.

1. A felhasználó megosztja az URL-t

Valaki beilleszti a linkedet a Facebookra, LinkedInre, Slackre, Discordra, Messengerre vagy egy másik alkalmazásba.

2. A platform beolvassa az oldalad

A robot (crawler) ellenőrzi az oldalad fejlécét (head), és kinyeri az Open Graph címet, leírást, URL-t és képet.

3. Megjelenik az előnézeti kártya

A platform felépíti a kártyát. Ha a meta tagjeid gyengék, az előnézet hibásnak, véletlenszerűnek vagy unalmasnak tűnhet.

A meta tagek, amelyek valójában számítanak

Nem szükséges túlbonyolítani az Open Graph rendszert. A legtöbb oldalnak csupán néhány erős tagre van szüksége, amelyek egyértelműen elmagyarázzák, mi az oldal és hogyan kell kinéznie a megosztáskor.

og:type

Meghatározza a tartalom típusát. A legtöbb normál weboldal esetében a „website” a megfelelő érték.

og:title

Az előnézeti kártya főcímét vezérli. Legyen specifikus, ne csak a márkanevedet tartalmazza.

og:description

A kiegészítő szöveget vezérli. Használd az oldal előnyeinek vagy kontextusának elmagyarázására.

og:url

Meghatározza a kanonikus oldal URL-t. A tiszta, végleges URL-t használd, ne egy véletlenszerű követőkódot.

og:image

A fő vizuális elemet vezérli. Gyakran ez a legnagyobb ok, amiért egy megosztott link professzionálisnak vagy befejezetlennek tűnik.

og:image:width / height

Megadja a robotoknak a kép várható méreteit. Az 1200×630 segít a platformoknak gyorsabban megérteni az elrendezést.

Az OG kép szabályai

1200×630

1.91:1 fekvő képarány (landscape)

Használj 1200×630-as méretet a biztonságos, kiváló minőségű Open Graph kép érdekében.

Tartsd távol a fontos szövegeket és logókat a szélektől, mert a platformok megvághatják az előnézeteket.

Kerüld, hogy az egész kép csupán egy apró logóból álljon. A képnek gyorsan közvetítenie kell az oldal témáját.

Használj nyilvános kép URL-t. Ha a robot nem éri el, az előnézet kép nélkül jelenhet meg.

Hibák, amiktől az előnézetek olcsónak tűnnek

Ugyanaz a cím minden oldalon

Ha minden oldal ugyanazt a címet használja, a felhasználók nem tudják megmondani, mit nyitnak meg. Adj a fontos oldalaknak egyedi címet.

A leírás nem mond semmi hasznosat

Az olyan szövegek, mint az „Üdvözöljük a weboldalunkon”, elpazarolják az előnézetet. Mondd el az embereknek, mit fognak tanulni, kapni vagy megoldani.

Rossz képarány

A négyzet alakú, apró vagy rosszul levágott képek miatt a linked hibásnak tűnhet. Használj fekvő tájolású OG képet, amely illeszkedik a kártyához.

Where this preview is used

Facebook

A Facebook nagymértékben támaszkodik az Open Graph adatokra a megosztott linkek és a részletgazdag előnézeti kártyák megjelenítéséhez.

A LinkedIn az OG címet, leírást, képet és URL-t használja a professzionális megjelenésű poszt-előnézetek létrehozásához.

Chat apps

Számos csevegőalkalmazás használ Open Graph tageket, hogy előnézetet mutasson, mielőtt az emberek rákattintanának a linkre.

Robotok (Crawlers)

Az előnézeteket gyűjtő robotok gyakran gyorsítótárazzák a metaadatokat, ezért a tagek frissítése után teszteld a fontos oldalakat.

A legjobb eredmény érdekében hozz létre egyedi OG képet és leírást minden fontos érkezőoldalhoz, eszközoldalhoz, blogbejegyzéshez és termékoldalhoz, ahelyett, hogy mindenhol ugyanazt az általános metaadatot használnád.