Open Graph címke generátor

Open Graph meta címkéket készít közösségi oldalakhoz (Facebook, Twitter és mások).

Adja meg az Open Graph adatokat
Adja meg az adatokat, és kattintson a „Generálás” gombra

Útmutató

  • Add meg a címet, a leírást, az URL-t és a kép hivatkozását.
  • Kattints a „Generálás” gombra, és megkapod a kész meta címke kódot.
  • Másold ki a kapott kódot, és illeszd be a HTML <head> részébe.

Повний опис

Mire való ez az eszköz

Amikor egy cikkre, termékre vagy weboldal főoldalára mutató hivatkozást oszt meg a közösségi oldalakon vagy üzenetküldőkben, a platform önállóan próbálja megállapítani, hogy milyen képet mutasson és milyen szöveget jelenítsen meg az előnézetben. Ez az automatikus kiválasztás gyakran nem sikerül jól. A fő banner helyett egy véletlenszerű ikon jelenik meg, a tartalmas cím helyett pedig a felhasználó egy technikai oldalcímet lát a rovat nevével és a webhely nevével.

Az Open Graph protokoll lehetővé teszi a webhely tulajdonosa számára, hogy maga irányítsa a hivatkozás megjelenését megosztáskor. Ez egy olyan szabvány, amelyet eredetért a Facebook vezetett be, de jelenleg szinte az összes népszerű szolgáltatás támogatja, például a Telegram, a Viber, a LinkedIn és a Twitter. Speciális metaagek segítségével jelölheti meg a platform számára, hogy pontosan melyik kép a fő kép, melyik cím vonzza majd a figyelmet, és melyik rövid leírás segít a felhasználónak megérteni a tartalom lényegét még a hivatkozásra való kattintás előtt.

Az Open Graph címkegenerátor segít a helyes kód elkészítésében anélkül, hogy meg kellene tanulni a protokoll specifikációit vagy kézzel kellene megírni a szintaxist. Ez különösen hasznos kisebb webhelyek tulajdonosai, webmesterek és tartalomkezelők számára, akiknek gyorsan kell előkészíteniük az oldalakat a közösségi médiás népszerűsítésre.

A szolgáltatás lehetőségei

  • A og:title címke létrehozása, amely meghatározza a hivatkozáskártya címét.
  • A og:description címke összeállítása az oldal tömör leírásának hozzáadásához.
  • A og:url címke generálása, amely az oldal kanonikus címére mutat.
  • A og:image címke hozzáadása egy adott kép kiválasztásához, amely a publikáció borítója lesz.
  • A og:type szabványos tartalomtípus támogatása, amely segít a közösségi oldalak algoritmusainak helyesen besorolni az oldalt.
  • A megadott adatok azonnali átalakítása kész HTML-kóddá.
  • A szintaxis helyességének ellenőrzése, hogy elkerülje a hibákat a webhely kódjába történő beillesztéskor.

Hogyan kell használni az eszközt

A metatagok létrehozásának folyamata rendkívül egyszerű, és néhány logikai lépésből áll. Nem kell programozónak lennie, elegendő, ha hozzáfér az oldala kódjának szerkesztéséhez.

  1. A cím kitöltése. A megfelelő mezőbe írja be a szöveget, amely a hivatkozás neveként jelenik meg. Ajánlott tömörré, de vonzóvá tenni. Kerülje a túl hosszú kifejezéseket, mivel a közösségi oldalak félbevághatják a szöveget.
  2. A leírás elkészítése. A leírás mezőbe írjon 1, 2 vagy 3 mondatot, amelyek feltárják az oldal lényegét. Ez az Ön esélye arra, hogy felkeltse a felhasználó érdeklődését, hogy rákattintson a hivatkozásra. A leírásnak konkratanak kell lennie, és igazodnia kell a tartalomhoz.
  3. Az URL-cím megadása. Adja meg az oldal teljes címét, beleértve a https:// protokollt is. Ez azért fontos, mert a közösségi oldalak ezt a hivatkozást használják az objektum azonosítására az adatbázisukban.
  4. Kép-hivatkozás hozzáadása. Adja meg a közvetlen utat ahhoz a képhez, amelyet az előnézetben szeretne látni. A képnek nyilvánosan elérhetőnek kell lennie, és a rá mutató hivatkozásnak feltétlenül abszolút kell lennie, nem pedig relatívnak.
  5. Kód generálása. Az összes mező kitöltése után kattintson a Generálás gombra. A rendszer feldolgozza az adatokat, és egy külön ablakban megjeleníti a kész metatagok blokkját.
  6. Integrálás a webhelyre. Másolja ki a kapott eredményt. Lépjen a webhely kódszerkesztőjére, keresse meg a <head> részt, és illessze be a másolt címkéket a lezáró </head> címke elé.

Gyakori felhasználási forgatókönyvek

Az oldal típusától függően a címkék kitöltésének stratégiája változhat. Íme néhány példa arra, hogyan működik ez a gyakorlatban.

Blogcikk népszerűsítése. Ebben az esetben a címben érdemes feltüntetni a cikk nevét, a leírásban pedig egy rövid tézist vagy a fő problémát, amelyet a szöveg megold. Képként a cikk élénk borítójának kell lennie, amely tükrözi az anyag témáját. Ez jelentősen növeli a kattintások számát, amikor a hivatkozást megosztják a Telegramon vagy a Facebookon.

Termékkártya webáruházban. Itt a legfontosabb a termék neve és a kulcsfontosságú jellemzője. A leírásban feltüntethető az ár vagy egy rövid előny. Képként feltétlenül használja magáról a termékről készült, világos háttér előtt álló minőségi fotót, hogy a vevő azonnal lássa, mit kínálnak pontosan.

Vállalati webhely főoldala. A főoldal esetében a cím általában a cég nevét és a tevékenységének rövid leírását tartalmazza. A leírásnak a lehető legtömörebbnek kell lennie, hogy a felhasználó megértse, mivel foglalkozik a szervezet. Képként gyakran a cég logóját vagy az iroda, illetve a termékek általános képét választják.

Személyes portfólió oldala. A címben a nevet és a szakmát kell feltüntetni, például Kovács János, UX tervező. A leírásban röviden említhetők a fő készségek vagy a munkatapasztalat. Képként általában a szerző professzionális fotója vagy a legjobb munkák kollázsa szerepel.

Tippek és gyakori hibák

Annak érdekében, hogy a hivatkozás tökéletesen nézzen ki minden platformon, érdemes odafigyelni néhány technikai részletre. A leggyakoribb hiba a képekhez vezető relatív útvonalak használata. Ha a /images/preview.jpg útvonalat adja meg, a közösségi oldalak nem fogják megtalálni ezt a fájlt, mert a teljes címen keresik, például https://site.com/images/preview.jpg.

Ügyeljen a kép méreteire. Az Open Graph képek optimális mérete 1200 x 630 képpont. Ha a kép túl kicsi, akkor egy kis négyzet alakú előnézetként jelenhet meg a szöveg mellett, nem pedig nagy bannerként. Ha viszont a kép túl nehéz, a közösségi oldal a hosszú betöltési idő miatt figyelmen kívül hagyhatja.

Ne feledkezzen meg a gyorsítótárazásról sem. Amikor módosítja a metatagokat a webhelyen, a változások nem mindig jelennek meg azonnal a közösségi oldalakon. A platformok a hivatkozás előző nézetét a gyorsítótárukban tárolják. Az adatok frissítéséhez használjon olyan speciális ellenőrző eszközöket, mint a Facebook Sharing Debugger. Ez lehetővé az oldaláról szóló információk kényszerített frissítését.

Ne próbálja meg becsapni a felhasználót olyan kattintáséhes címek használatával, amelyek nem felelnek meg az oldal tartalmának. Ez magas visszafordulási arányhoz vezethet, mivel az emberek felmennek a webhelyre, és azonnal távoznak anélkül, hogy megtalálnák az ígért információt. Legyen őszinte, de tömör.

Az utolsó fontos szempont az összhang. Győződjön meg arról, hogy az Open Graph címkékben lévő szöveg nem mond ellent a keresőmotor által látott szokásos title és description címkéknek. Stílusukban eltérhetnek, mivel a keresés formálisabb megközelítést igényel, míg a közösségi oldalak megengedik az érzelmesebb stílust, de az általános jelentésnek meg kell maradnia azonosnak.

GYIK

Mely közösségi oldalak támogatják az Open Graphot?
Az Open Graphot a Facebook, a LinkedIn, a Twitter (részben), a Pinterest, a Telegram és sok más platform támogatja. A Twitter esetében ajánlott a twitter:card tageket is hozzáadni.
Kötelező képet hozzáadni?
A kép nem kötelező, de jelentősen javítja a hivatkozás megjelenését a közösségi oldalakon. Az ajánlott méret: 1200×630 pixel.
Hozzáadhatók további OG-tagek?
Igen, a generálás után manuálisan hozzáadhat további meta-tageket, például og:locale, og:site_name, og:type.
Szükséges a karakterek escape-elése?
Az eszköz automatikusan escape-eli az idézőjeleket és az ampersandokat, így a kapott kód biztonságosan beilleszthető HTML-be.
Működik a szolgáltatás JavaScript nélkül?
Nem, a generálás kliensoldalon (JavaScript) történik. A működéshez engedélyezni kell a JS-t a böngészőben.

Vélemények (0)

Hasonló eszközök

További eszközök ebből a kategóriából, amelyekre később szükséged lehet.

Blog

Eszközökről, fejlesztésről és gyakorlati tippekről szóló cikkek.

Összes cikk