Miért néz ki rosszul a linkelőnézete, és hogyan javítható ki Open Graph-fal?

Megosztja az új céloldalának linkjét, és az előnézet nem mutat képet, a főoldala címét vagy két kampánnyal ezelőtti bannert mutat. Maga az oldal rendben van. Az előnézet valami másból készül: az oldal head részében található néhány kódsorból, amelyeket a legtöbben soha nem látnak.

Ez a cikk a legtöbb hibás előnézet mögött álló hat okot tárgyalja, abban a sorrendben, ahogy érdemes őket ellenőrizni. Ha a címkéket készen szeretné kapni, az ingyenes Open Graph generátor elkészíti őket, megfelelően escape-eli, és a lenti korlátokhoz igazítja.

Hogyan készül a linkelőnézet

Amikor egy linket beillesztenek egy bejegyzésbe vagy üzenetbe, az alkalmazás egy crawlert küld az oldalhoz. A crawler a <head> részben lévő <meta> címkéket olvassa, és ezekből rajzolja meg a kártyát. Ezek a címkék az Open Graph protokollból származnak, amely négyet kötelezőnek jelöl:

• og:title: az oldal címe úgy, ahogy a kártyán meg kell jelennie.
• og:type: az oldal típusa, általában website vagy article.
• og:image: a kép.
• og:url: az oldal kanonikus URL-je, amelyet a protokoll állandó azonosítóként említ.

Adja hozzá az og:description címkét, és megvan a kártya. Egy teljes, minimális készlet így néz ki:

<meta property="og:title" content="Spring linen collection">
<meta property="og:description" content="Breathable shirts in three colours.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/spring">
<meta property="og:image" content="https://example.com/og/spring.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Three linen shirts on a rail">
<meta name="twitter:card" content="summary_large_image">

1. ok: hiányoznak a címkék

og: címkék nélkül minden alkalmazásnak vissza kell térnie arra, amit az oldalon egyébként talál, például a <title> elemre vagy az első képre, és az, hogy mit választ, az alkalmazástól függ. Ezért lehet ugyanaz a link az egyik helyen rendben, a másikon rosszul. A megoldás: minden olyan oldalon adja meg a négy kötelező címkét és egy leírást, amelyet várhatóan megosztanak, nem csak a főoldalon. A főoldal címkéivel megosztott termékoldal a főoldal kártyáját mutatja.

2. ok: a képcím relatív

Ez könnyen elkerülhető, mert az oldal a saját böngészőjében rendben látszik. A content="/images/og.jpg" működik egy olyan böngészőben, amely már az oldalon van, de a crawler az oldalon kívül van. Írja le a teljes címet, https://-sel kezdve és a domainjével együtt. Ugyanez vonatkozik az og:url címkére is.

3. ok: a kép mérete vagy alakja rossz

Minden platform megmondja, mit vár, és egy széles képben egyetértenek:

• A LinkedIn a weboldal megoszthatóvá tételéről szóló útmutatójában azt írja, hogy a képnek legalább 1200 × 627 pixelesnek kell lennie, ajánlottan 1,91:1 arányban, és legfeljebb 5 MB-osnak.
• A Meta megosztási legjobb gyakorlatai nagy felbontású kijelzőkhöz legalább 1080 pixel széles, képes hivatkozású hirdetések megjelenítéséhez pedig legalább 600 pixel széles képeket ajánlanak.
• Az X nagy képes kártyája fejlesztői dokumentációja szerint 300 × 157-től 4096 × 4096 pixelig 2:1 arányt támogat, 5 MB alatt, JPG, PNG, WEBP vagy GIF formátumban, és nem támogatja az SVG-t (az eredeti oldal már átirányít, ezért ez a link az Internet Archive-on keresztül vezet).

Mindhárom platformnak megfelel egy méret: 1200 × 630. Teljesíti a LinkedIn 1200 × 627-es minimumát, szélesebb a Meta 1080-as értékénél, aránya 1200 ÷ 630 = 1,905, ami az X 2:1-es arányától 5%-on belül van. A négyzetes vagy magas kép széles kártyára vágódik, ezért a fontos részt tartsa középen. Az képarány-számológép megmutatja, mit tart meg a középső kivágás.

A méretet a címkékben is adja meg. A Meta az og:image:width és og:image:height címkéket kéri, hogy a crawler azonnal ki tudja rajzolni a képet, ahelyett hogy előbb letöltené és feldolgozná. A webmester-útmutatója egyszerűen fogalmaz: adja meg a magasságot és a szélességet, hogy a kép már az első megosztáskor helyesen töltődjön be.

4. ok: a címkéket JavaScript adja hozzá

Egyes oldalkészítők és egyoldalas alkalmazások a meta címkéket az oldal betöltése után, a böngészőben adják hozzá. Egy crawler, amely a szerver által küldött HTML-t olvassa, lehet, hogy soha nem futtatja ezt a kódot, így a címkéket sem látja. Ellenőrizze az oldal forrását (a Forráskód megtekintését, nem a vizsgálót, amely a szkriptek lefutása utáni oldalt mutatja). Ha a címkék nincsenek a forrásban, a crawler valószínűleg nem látja őket sem. A javítás az oldal beállításaiban vagy a szerveroldali sablonban van.

5. ok: a speciális karakterek elrontották a címkét

Egy dupla idézőjelet tartalmazó cím, például The "only" linen you need, idő előtt lezárja a content="..." attribútumot, és a cím többi része elvész. Az attribútumon belül a fontos karaktereket escape-elni kell: a " " lesz, a & &, a < pedig <. A böngészők és a crawlerek a címke olvasásakor visszaalakítják őket az eredeti karakterekre. A generátor ezt elvégzi Önnek, ez az egyik oka, amiért érdemes használni.

6. ok: az alkalmazás a régi verziót emlékezte

Kijavította a címkéket, újra megosztotta, és a régi kártya továbbra is ott van. Ez a gyorsítótár. Az alkalmazások tárolják, amit lekapartak, és újra felhasználják, mindkét nagy hálózat ad egy eszközt, amellyel friss képet lehet kérni:

• Facebook: illessze be az URL-t a Meta Megosztás-hibakeresőjébe. A Meta webmester-útmutatója szerint megmutatja, mely címkéket gyűjtötte a crawler, a hibákkal és figyelmeztetésekkel együtt, és új letöltést indít. A Meta legjobb gyakorlatai hozzáteszik, hogy a letöltött tartalom egyébként 24 órás szabványos időszakonként frissül.
• LinkedIn: futtassa az URL-t a Post Inspectoron keresztül. A LinkedIn súgóoldala egyértelmű a korlátról: a frissítés csak az új bejegyzések előnézetét változtatja meg. Azok a bejegyzések, amelyek már tartalmazzák az URL-t, megtartják a régit.

Ezt a LinkedIn-megjegyzést érdemes megjegyezni egy indítás előtt. Ellenőrizze az előnézetet, mielőtt az első bejegyzés kimegy, mert a régi bejegyzést nem lehet az oldal javításával megjavítani.

A twitter:card címke: egy sor, nem négy

Az X is olvassa az Open Graph-ot. A kártya-jelölés referenciája minden címkéhez tartalékot sorol fel: a twitter:title az og:title-re, a twitter:description az og:description-re, a twitter:image az og:image-re, a twitter:image:alt pedig az og:image:alt-re esik vissza. Tehát nem kell mindent megismételni. Az egyetlen hozzáadandó sor a twitter:card: a summary_large_image teljes szélességű képhez, a summary kis négyzetes képhez. Ha kihagyja, ugyanez a referencia szerint az X kis összefoglaló kártyát mutathat, ezért jelenik meg néha egy nagy kép kis bélyegképként. Ugyanez a referencia a címet 70, a leírást 200, az alternatív szöveget 420 karakterben korlátozza.

Öt perces ellenőrzés indítás előtt

1. Nézze meg az oldal forrását, és keresse meg az og: címkéket. Mind a négy kötelező, plusz egy leírás.
2. Ellenőrizze, hogy az og:image és az og:url https://-sel kezdődik-e.
3. Nyissa meg a kép URL-jét önmagában egy böngészőben. Töltődnie kell, 1200 × 630-as vagy ahhoz közeli méretben.
4. Illessze be az URL-t a Megosztás-hibakeresőbe és a Post Inspectorba, és olvassa el a kártyákat.
5. Csak utánaossza meg.

Hol illik ide a Hermoso

A Hermoso egy AI marketingügynök: kikutatja, milyen hirdetések működnek már a piacán, márkához illő kép- és videóhirdetéseket készít, ütemezi a bejegyzéseket a saját fiókjaira, és fizetett kampányokat futtat a saját hirdetési fiókjaiban. A jó linkelőnézet teszi azokat a bejegyzéseket kattintásra méltóvá. A Hermoso a webalkalmazásban működik, vagy a Claude, a ChatGPT és a Cursor belsejében az MCP-szerveren keresztül.

Gyakori kérdések

Miért nem látszik kép a linkem a Facebookon vagy a LinkedInen?

Általában az og:image címke hiányzik, relatív elérési utat használ a teljes https:// cím helyett, vagy túl kicsi képre mutat. A LinkedIn legalább 1200 × 627 pixelt kér. A javítás után futtassa az URL-t a Meta Megosztás-hibakeresőjén vagy a LinkedIn Post Inspectorán, hogy újra letöltsék.

Mekkora legyen egy Open Graph-kép?

Az 1200 × 630 pixel minden nagy hálózaton működik. Megfelel a LinkedIn 1200 × 627-es minimumának, nagyjából 1,91:1 arányban, szélesebb a Meta által ajánlott 1080 pixelnél, és közel van az X által nagy képes kártyákhoz támogatott 2:1-hez.

Hogyan frissítem a LinkedIn-linkelőnézetet?

Javítsa a címkéket az oldalon, majd adja meg az URL-t a LinkedIn Post Inspectorában. A frissített előnézet csak az új bejegyzésekre vonatkozik. Azok a bejegyzések, amelyek már tartalmazzák az URL-t, megtartják a régi előnézetet.

Kellenek twitter: címkék, ha vannak og: címkék?

Csak a twitter:card. Az X az og:title, og:description, og:image és og:image:alt címkékre esik vissza, ha a twitter: változatok hiányoznak.