Barion Pixel
Ez itt a lifelong learning

Sosem tudhatsz eleget!

Blog

Segédletek

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

2018. szeptember 27. | 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/

Iratkozz fel 7 napos ingyenes, alapozó webdesign kurzusunkra!

Kipróbálom

blog

Üzlet Mi kell egy webdesign vállalkozáshoz beindításához?

Mi kell egy webdesign vállalkozáshoz beindításához?

2020. szeptember 04.

Te! Azaz a tudásod. Ez a legfőbb összetevő. De ennyi korántsem elég. Láttam már sok olyan tényleg ügyes és tehetséges grafikust, designert vagy fejlesztőt, aki hiába volt szakmailag kimagasló, a vállalkozás dolog nem ment neki. Vállalkozni ma egy jó negyedórás online űrlap kitöltését jelenti a Webes ügysegéd oldalán egy ügyfélkapus hozzáféréssel. Tádám! Kész a KATA-s vállalkozás. […]

Tovább a cikkre