Mi az az Open Graph meta és hogyan használd? – Webdesign Tanfolyam

Mi az az Open Graph meta és hogyan használd?

2018. szeptember 27. - 11:29 • írta: Pócsik Emese

A Open Graph egy olyan metacímke, amely lehetővé teszi a Facebook számára, hogy a weboldaladról információt szerezzen a helyes post megjelenítéshez. Úgymint a megosztani kívánt URL címe, képe, leírása stb. http://ogp.me/

Ezeket a címkézések ugyan úgy kell használni, mint a weboldal többi meta elemét.

<meta property="og:title" content="Az oldal Címe"/>
<meta property="og:description" content="Ez itt az oldal leírása"/>
<meta property="og:type" content="article"/>
<meta property="og:image" content="https://web.hu/images/post-image.jpg"/>

Hogyan állíthatsz be Open Graph metatageket?

Ugyanúgy mint más metacímkéknél, az Open Graph címkéket is HTML oldal <head> részébe  kell tenni. Ha CMS-t használsz, pl WordPresst, akkor a sablonod header.php fájljába írhatod be az OG címkéket. A CMS minden címke tartalmát automatikusan tudja generálni, így a címke tartalmi részébe a megfelelő WordPress függvényeket kell írnod.

<meta property="og:title" content="<?php the_title(); ?>" />
<meta property="og:url" content="<?php the_permalink(); ?>" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="<?php echo _wp_specialchars( get_bloginfo('name'), 1 ) ?>" />
<meta property="og:image" content="<?php $ogimage = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID)); echo $ogimage[0]; ?>" />
<meta property="og:description" content="<?php echo get_the_excerpt();?>" />
<meta property="og:locale" content="hu_HU" />

Ha nincs megadva a weboldaladon Open Graph metaelem, akkor a Facebook post megjelenéshez szükséges információk hiányosak lehetnek, illetve ilyen esetben a weboldal title és description metájának tartalma kerül be a megosztásba, a képet pedig véletlenszerűen szúr be az oldal tartalmából. Tehát mindenképp ajánlatos használni az OG címkézést.

Nem jelenik meg jól a tartalomhoz kapcsolódó kép, vagy egyéb információ?

Ha már próbálkoztál megosztani egy URL-t korábban, annak a metaadatai elfognak tárolódni a Facebook gyorsítótárában. Ezt a gyorsítótárat itt lehet ellenőrizni, illetve kiüríteni.

https://developers.facebook.com/tools/debug/sharing/

Címkék:

Ezeket láttad már?

A szerző: Pócsik Emese
2007 óta dolgozom webdesignerként. Munkáim nagy részét főleg üzleti weboldalak készítése teszi ki kis- és közép vállalkozásoknak. A tanfolyamon összetettebb weblapok HTML+CSS kódolását oktatom, néhány házi praktikával és gyakorlati tanáccsal megfűszerezve.

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöljük.