Open Graph Protocol – analýza mikrodát. Ako nastaviť Open Graph a Twitter Mapy pre WordPress

Značku Open Graph používajú Facebook, Vkontakte, Google+, Twitter, LinkedIn, Pinterest a ďalšie služby. V Yandex sa Open Graph používa na prenos údajov do služby Yandex.Video.

Služba Yandex.Video rozpoznáva nielen hlavné meta tagy, ale aj mnohé ďalšie meta tagy, napríklad rôzne typy videí (seriály, klipy, filmy atď.), obmedzenia veku alebo krajiny sledovania. V závislosti od zvoleného typu môžete zadať aj ďalšie vlastnosti objektu: názov filmu, číslo epizódy seriálu, dátum vydania televíznej relácie a iné. Keďže Yandex.Video vyžaduje meta tagy, ktoré nie sú v dokumentácii od Facebooku, služba používa vlastné rozšírenie.

Okrem ukážok zostáv môžu štandard Open Graph použiť vývojári aplikácií na zverejňovanie akcií používateľov na Facebooku. V takýchto publikáciách môžete zadať aktéra (používateľa), objekt, akciu s týmto objektom a názov aplikácie, s ktorou bola táto akcia vykonaná.

1. Základné meta tagy
2. Ďalšie metaznačky
3. Štruktúrované metaznačky
4. Polia
5. Objekty
6. Príklad použitia

Základné meta tagy

V štandarde Open Graph popisuje jedna strana iba jeden objekt – osobu, firmu alebo produkt. Pre tento objekt sú uvedené všetky údaje. Ak chcete odovzdať informácie službám, musíte do kódu HTML (v prvku head) pridať nasledujúce požadované metaznačky:

og:title – názov objektu.

og:type – typ objektu, napríklad video.movie (film). Ak máte na stránke viacero objektov, vyberte jeden z nich (hlavný). V závislosti od typu je možné špecifikovať ďalšie vlastnosti.

og:image – adresa URL obrázka, ktorý popisuje objekt.

og:url je kanonická adresa URL objektu, ktorý sa má použiť ako trvalý identifikátor.

\n \n \n \n

Ďalšie metaznačky

og:audio – URL zvukového súboru spojeného s opísaným objektom.

og:description - krátky popis objektu.

og:determiner je slovo (článok), ktoré sa musí objaviť pred názvom objektu vo vete. Môže byť špecifikovaný ako: a , an , the , \"\" , auto . Ak je hodnota nastavená na auto , služba rozpoznávania značiek si vyberie medzi hodnotami a a an . Ak nie je zadaná žiadna hodnota, článok bude vynechaný pred názvom objektu.

og:locale - jazyk popisu objektu vo formáte jazyk_krajina . Predvolená hodnota je en_US .

og:locale:alternate - pole ďalších jazykov, v ktorých je k dispozícii popis objektu.

og:názov_stránky – názov stránky, ktorá obsahuje informácie o objekte.

og:video – URL súboru videa, ktorý odkazuje na popísaný objekt.

\n \n \n \n \n \n \n

Štruktúrované metaznačky

Niektoré metaznačky môžu mať ďalšie (voliteľné) metadáta. Takéto metaznačky obsahujú ďalší znak: (dvojbodka).

Napríklad og:image môže obsahovať nasledujúce metadáta:

og:image:url - URL obrázka popisujúceho objekt (zodpovedá og:image ).

og:image:secure_url - dodatočná adresa URL, ak je stránka otvorená cez protokol HTTPS.

og:image:width – šírka obrázka v pixeloch.

og:image:height – výška obrázka v pixeloch.

\n \n \n \n

og:video môže obsahovať rovnaké metadáta ako og:image . Napríklad:

\n \n \n \n

og:audio obsahuje iba niektoré z vyššie uvedených metadát:

\n \n

Polia

Ak metaznačka môže obsahovať viacero hodnôt, pridajte na stránku ďalšie meta prvky. Keď dôjde ku konfliktom, budú sa brať do úvahy údaje uvedené v prvom meta prvku (zhora nadol).

\n

Za hlavnou metaznačkou zadajte štruktúrované metaznačky.

\n \n \n \n \n

kde označenie znamená, že na stránke sú 3 obrázky: prvý je 300x300, druhý nemá špecifikovanú veľkosť, tretí má výšku 1000 pixelov.

Objekty

Ak chcete odovzdať údaje o objekte, musíte určiť jeho typ pomocou metaznačky og:type:

V tomto príklade je špecifikovaný jeden z globálnych (všeobecne uznávaných) typov. Zostávajúce typy sú špecifikované podľa syntaxe CURIE:

\n \n

Globálne typy objektov sú zoskupené vo vertikálach. Každá vertikála má svoj vlastný menný priestor. Hodnota metaznačky og:type pre priestor názvov vždy pozostáva z názvu typu objektu a kvalifikácie (< typ objektu: spresnenie>). Vyhnete sa tak zámene s používateľsky definovanými typmi, ktoré obsahujú znak : (dvojbodka).

Hudba

og:type hodnoty metaznačky:

Hudba.pieseň

music:duration (celé číslo >=1) - trvanie skladby v sekundách.

music:album (music.album, array) – názov albumu.

music:album:disc (celé číslo >=1) - číslo disku.

music:album:track (celé číslo >=1) - číslo skladby.

music:musician (profil, array) – meno interpreta.

\n \n \n \n \n\n...\n hudobný.album

music:song - music.song - názov skladby.

music:song:disk (celé číslo >=1) - číslo disku (zodpovedá music:album:disc ).

music:song:track (integer >=1) - číslo skladby (zodpovedá music:album:track ).

music:hudobník (profil) - interpret skladieb.

music:release_date (datetime) – Dátum vydania albumu.

music.playlist

music:song – zodpovedá hodnote music.song , ktorá je uvedená v music.album .

hudba:skladba:disk

hudba:skladba:stopa

hudobná.rozhlasová_stanica

Video

hodnoty vlastnosti og:type:

Video.film

video:actor (profil, pole) - herci.

video:actor:role (string) - role, ktoré hrajú herci.

video:director (profil, pole) - režisér.

video:writer (profil, pole) - spisovateľ.

video:duration (celé číslo >=1) - trvanie filmu v sekundách.

video:release_date (datetime) – dátum vydania filmu.

video:tag (reťazec, pole) - značky (slová, frázy) spojené s filmom.

\n \n \n \n \n\n...\n video.epizóda

video:actor – zodpovedá hodnote video.movie .

video:herec:rola

video: režisér

video:spisovateľ

video: trvanie

video:release_date

video:tag

video:series (video.tv_show) - seriál.

video.tv_show

TV show. Označenie sa zhoduje s hodnotou video.movie.

Video.iné

Video, ktoré nespadá do uvedených kategórií. Označenie sa zhoduje s hodnotou video.movie.

Iné

og:type hodnoty metaznačky:

article:published_time (datetime) – dátum uverejnenia článku.

article:modified_time (datetime) – dátum poslednej úpravy článku.

article:expiration_time (datetime) – dátum, po ktorom sa článok považuje za expirovaný.

article:author (profil, pole) - autor článku.

article:section (reťazec) – téma (sekcia), do ktorej článok patrí (napríklad Technológie).

article:tag (reťazec, pole) - značky (slová, frázy) spojené s týmto článkom.

kniha

book:author (profil, pole) – autor knihy.

book:release_date (datetime) – dátum vydania knihy.

book:tag (reťazec, pole) - značky (slová, frázy) spojené s touto knihou.

profilu

profile:first_name (reťazec) - meno.

profil:priezvisko (reťazec) - priezvisko.

profile:username (reťazec) - prezývka (používateľské meno, pod ktorým je registrovaný).

profile:gender (enum) - pohlavie (muž , žena ).

webovej stránky

Nezáleží na iných ako na tých hlavných. Akákoľvek neoznačená stránka je definovaná ako objekt webovej lokality.

Typy objektov

Typ	Popis	Hodnotové príklady
Boolean	Môže byť pravda alebo nepravda, 1 alebo 0	pravda, nepravda, 1, 0
Dátum Čas	ISO 8601	2015-07-15, 15:05
Enum
plavák
Celé číslo
Reťazec	Unicode
URL		http://www.example.com

Dočasná hodnota. Môže obsahovať dátum (rok, mesiac, deň) a čas (hodiny, minúty) podľa ISO 8601

2015-07-15, 15:05

Enum

Pozostáva z obmedzenej množiny konštantných hodnôt reťazca

plavák

64-bitové číslo s pohyblivou rádovou čiarkou

1,234, -1,234, 1,2e3, -1,2e3, 7E-10

Celé číslo

32-bitové celé číslo. Môže obsahovať všetky znaky, ktoré zodpovedajú nasledujúcim formátom: 1234, -123

Reťazec

Postupnosť znakov Unicode

URL

Všetky platné adresy URL, ktoré sú prístupné cez protokol HTTP alebo HTTPS

http://www.example.com

Príklad použitia

Ak chcete pridať informácie na generovanie úryvkov, v kóde HTML stránok v prvku head zadajte názov stránky a názov lokality vo vlastnostiach og:title a og:site_name.

\n \n \n \n

Čo otvorený graf? Načo sa to používa? Ako to správne nastaviť? Pokúsme sa pochopiť tento materiál.

Prečo potrebujeme SMM a či existujú nejaké riziká spojené s marketingom v sociálnych sieťach, podrobnejšie.

Aké problémy najčastejšie vznikajú pri pridávaní takýchto tlačidiel?Najčastejším problémom je, že k ukážke zverejnenej na sociálnej sieti je pripojený nesprávny grafický obsah. Napríklad namiesto fotky z článku sa vytiahne reklamný banner, ktorý je v tom momente umiestnený na stránke.

Podobný problém je vyriešený jednoducho – pomocou dodatočného štandardu mikroznačenia pre stránku Open Graph. Ten bol vyvinutý spoločnosťou Facebook a jeho hlavnou úlohou je ovládať textovo-grafické oznámenie, ktoré sa generuje po pridaní odkazu na sociálnu sieť.

Open Graph je v praxi špeciálny protokol, čo je špeciálna sada metaznačiek. Sú integrované do html kódu stránky (v rámci značky ) a nastavte požadované zobrazenie náhľadu stránky lokality na zdroji sociálnej siete. Tento štandard rozloženia stránky používajú iné rovnako populárne sociálne platformy. Sú to Vkontakte, Twitter, Google+, Yandex.Video, Pinterest, LinkedIn a ďalšie.

Čo by malo obsahovať html-kód stránky webu pre správne zobrazenie náhľadu v soc. siete?

“ og:popis” – obsahuje popis článku (od tradičného meta tagu description sa líši tým, že umožňuje zväčšiť veľkosť popisu zo 160 na 295 znakov);

“ og:image” - odkaz na obrázok, ktorý je priložený k článku;

“ og:type“ - označuje typ materiálu: „článok“ - článok, „film“ - kino a iné;

« og:locale"- označuje lokalizáciu (jazyk webovej stránky), automaticky sa používa aj táto hodnota "ru_RU";

« og:title» - zobrazuje názov článku;

« og:názov_stránky» je značka označujúca názov stránky.

Existuje

Toto je veľmi dôležité nastavenie. Každý vlastník blogu WordPress, ktorý chce profesionálne propagovať na Facebooku, si musí nastaviť značky Open Graph. Od toho závisí konverzia odkazov a prestíž vášho blogu.

Motor WordPress spočiatku tieto značky neobsahuje, takže si ich musíte nakonfigurovať sami. Bez nich sa na Facebook budú posielať veľmi škaredé a niekedy aj nepochopiteľné informácie. Uvediem 1 príklad. Snímka obrazovky zobrazuje publikácie po kliknutí na „Páči sa mi“ a komentovaní blogu Michaila Shakina. Obrázky sa zverejňujú náhodne, pretože značky nie sú nakonfigurované. Predstavte si, že máte na svojej stránke reklamný blok s obrázkami!?

Tento obraz možno pozorovať aj na niektorých známych spravodajských zdrojoch.

Čo sa stane, keď existujú značky Open Graph? Uvediem príklad mojej stránky na predaj videokurzu. Pre tlačidlo „Páči sa mi“ som nastavil obrázok, názov a popis. Výsledok je na snímke obrazovky. Súhlaste s tým, že takýto príspevok priťahuje oveľa väčšiu pozornosť.

1. možnosť. Najjednoduchšie. Plugin All in One SEO Pack

Používam tento plugin pre môj blog. Je to možné. Umožňuje vám okamžite optimalizovať váš blog pre vyhľadávače a pre Facebook. Pre tento plugin som sa usadil, pretože potrebujem optimalizovať nielen články na blogu, ale aj jednotlivé stránky videokurzu Fan Page Launch. Ak články aj blogové stránky optimalizujete manuálne, trvá to čas a vyžaduje si to znalosti PHP. Ale pretože plugin All in One SEO Pack umožňuje prispôsobiť obrázok, nadpis a popis pre každý článok a pre každú stránku zvlášť, mám úplnú kontrolu nad informáciami pre vyhľadávače aj pre Facebook.

Nastavenie štandardu tohto pluginu. Stiahnite si ho do počítača, nainštalujte na svoj blog (Pluginy -> Pridať nový -> Nahrať), kliknite na "Aktivovať". Potom prejdite na „Nastavenia“ -> „Všetko v jednom SEO Pack“ a vyplňte polia „Názov stránky“, „Krátky popis“, „Adresa WordPress (URL)“, „Adresa stránky (URL)“ – to je štandard nastavenia pluginu. Potom nezabudnite kliknúť na tlačidlo "Uložiť" v spodnej časti. Najdôležitejšie je pre nás nastavenie samotnej stránky článku alebo blogu. Tieto nastavenia vyzerajú takto:


Ak ste do blogu pridali novú stránku, pole na nahranie obrázka sa pre ňu zobrazí o niečo vyššie ako pole „Názov“.

Ako dobre tento plugin funguje, môžete skontrolovať kliknutím na tlačidlo „Páči sa mi to“ pod týmto článkom. Potom sa na vašej nástenke na Facebooku objaví prvý obrázok článku a názov + popis, ktorý ste videli vyššie na snímke obrazovky. Prejdime k druhej možnosti.

2. možnosť. Facebook Open Graph Meta Plugin

Táto možnosť je rovnako jednoduchá ako predchádzajúca. Stiahnete (skontroloval som prácu pluginu a tiež viem, že jeho autorom je skúsený vývojár, ktorý spravuje svoju stránku na Facebooku), rovnako ako v prvej možnosti ho nahráte na blog cez ovládací panel a aktivujete ho . Podrobne sa pozastavím nad nastaveniami tohto pluginu.

V ovládacom paneli vľavo prejdite na „Nastavenia“ -> „Facebook Open Graph“. Tento formulár sa zobrazí v hornej časti:


Prvé pole "ID aplikácie" môžete preskočiť. Do druhého poľa "správcovia" vložte svoje osobné Facebook ID. Ak chcete zistiť svoje ID, prejdite do svojho profilu a nahraďte „www“ za „graf“ v paneli s adresou. Napríklad v mojom prípade:

je potrebné vymeniť

https://www.facebook.com/neoandrej

https://graph.facebook.com/neoandrej

Skopírujte ID a vložte ho do poľa „Správcovia“ doplnku. Potom do tretieho poľa Adresa URL obrázka vložte odkaz na obrázok, ktorý sa predvolene zobrazí v prípade, že v niektorom článku blogu nie sú žiadne obrázky alebo ak ide o hlavnú stránku blogu, prípadne inú stránku (nie článok).

Po týchto krokoch kliknite na sivé tlačidlo „Uložiť“. Doplnok je takmer pripravený.

Prečo plugin potrebuje vaše Facebook id? Na prepojenie štatistík Facebooku s vaším blogom, ktorý bude dostupný vo vašom účte na tejto adrese http://facebook.com/insights. Vďaka týmto štatistikám uvidíte údaje o všetkých pluginoch Facebooku nainštalovaných na vašom blogu: kto klikol, koľkokrát, kedy, kde častejšie / menej často a ďalšie dôležité údaje. Ako používať tieto štatistiky som podrobne opísal v mojom platenom videokurze „Stránky fanúšikov: výsledok za 27 dní“.

Posledný dôležitý krok. Značku musíte nahradiť manuálne v súbore header.php s týmto kódom:

>

V opačnom prípade váš blog nemusí rozumieť metaznačkám Facebooku. Ak chcete upraviť súbor header.php, v ovládacom paneli vľavo prejdite na „Vzhľad“ -> „Editor“ a vpravo nájdite a kliknite na odkaz „Hlavička (hlavička.php)“. Úplne hore v kóde uvidíte značku (na snímke obrazovky nižšie), ktoré je potrebné vymeniť a uložiť zmeny.

Po týchto krokoch je doplnok úplne pripravený na prácu. Skontrolujte jeho činnosť tak, že prejdete na ktorýkoľvek článok a kliknete na „Páči sa mi to“. Potom sa pozrite, aké informácie sa objavili na vašej nástenke na Facebooku.

3. možnosť. Manuálne pridávanie a konfigurácia značiek Open Graph

Ak ste zvyknutí robiť a konfigurovať všetko sami a radi pracujete s WordPress kódom, toto je určite voľba pre vás. Najprv musíte urobiť rovnaké kroky ako v predchádzajúcej verzii - nahradiť štandardnú značku k tej, ktorú potrebujeme. Otvorte súbor header.php a nahraďte štandardnú značku:

>

na tento kód:

>

Ďalší krok je najzaujímavejší. V rovnakom súbore header.php pred uzatváracou značkou prilepte kód značky Open Graph na Facebooku:

" /> id)); ) ?>" /> " /> " />

V týchto značkách musíte nahradiť 2 hodnoty:

"fb:admins" content="VÁŠ_PERSONAL_ID_FACEBOOK"- vložte ID svojho účtu na Facebooku (ako ho nájsť, vysvetlil som vyššie);

"og:image" content="http://PATH-TO-IMAGE/IMAGE.jpg"- vložiť odkaz na obrázok, ktorý sa štandardne zobrazí, ak v článku alebo na stránke nie sú žiadne iné obrázky. Spravidla sa sem vkladá odkaz na logo.

Uložte zmeny a otestujte značky Open Graph kliknutím na tlačidlo „Páči sa mi“ v ľubovoľnom blogovom príspevku.

Môže nastať situácia, že obrázok článku je stále publikovaný nesprávne alebo sa jednoducho nezobrazuje celý článok (ako som to urobil ja). To znamená, že funkcia wp_get_attachment_thumb_url() nefunguje. Potom musíte urobiť nasledovné.

Nahraďte túto značku:

id)); )?>" />

k tejto značke:

" />

Uložte zmeny. Potom vpravo v ovládacom paneli nájdite odkaz na súbor Theme Functions (functions.php), otvorte ho a na konci kódu pred znakom ?> vložte nasledujúci kód:

Funkcia catch_that_image() ( globálne $post, $posts; $first_img = ""; ob_start(); ob_end_clean(); $output = preg_match_all("/ /i", $post->post_content, $matches); $first_img = $matches ; if(empty($first_img))( //Definujte predvolený obrázok $first_img = "http://PATH_TO_DEFAULT_IMAGE/PHOTO.jpg"; ) return $first_img; )

Tento kód popisuje funkciu catch_that_image(), ktorá nájde prvý obrázok v blogovom príspevku a vloží jeho odkaz do značky obrázka Open Graph. Ak v článku nie je žiadny obrázok, potom táto funkcia používa predvolený obrázok. Ak to chcete urobiť, vložte odkaz požadovaného obrázka do tejto premennej:

$first_img = "http://PATH_TO_DEFAULT_IMAGE/PHOTO.jpg";

Teraz uložte zmeny do súboru functions.php, prejdite na blog a skontrolujte prácu tlačidiel „Páči sa mi to“. Všetko by malo fungovať správne.

Výsledky testu

Aby som vám ukázal, ako fungujú metódy opísané v článku, vytvoril som testovací blog. Urobil som niekoľko príspevkov na blog s 3 obrázkami v každom, pridal som tlačidlá "Páči sa mi to". Otestoval som fungovanie tlačidiel pred a po Open Graph.

Test číslo 1. Výsledok tlačidla „Páči sa mi to“ na blogu bez značiek Open Graph a doplnku All in One SEO Pack.

Test číslo 2. Výsledok tlačidla „Páči sa mi to“ na blogu po nainštalovaní pluginu Facebook Open Graph Meta.

Test číslo 3. Výsledok tlačidla „Páči sa mi to“ na blogu po manuálnom nastavení značiek Open Graph.

Výsledky hovoria samé za seba. Prajem vám úspešné nastavenie Facebook tagov Open Graph na vašom blogu. Využite zdieľanie profesionálne a na maximum.

Riešenie problémov

Ak sa požadovaný obrázok stále nezobrazuje pri uverejňovaní odkazu na Facebooku, skontrolujte veľkosť obrázka. Ak sú menšie ako 200 x 200 pixelov, Facebook vyhľadá a nahradí väčší obrázok.

Existuje aj taká chyba, že obrázok sa nesprávne zobrazuje vo zverejnenom príspevku na Facebooku, aj keď existujú značky Open Graph. Výstup je veľmi jednoduchý. Skopírujte odkaz na stránku blogu, na ktorej je nastavené „nesprávne“ tlačidlo „Páči sa mi to“. Vložte ho do ladiaceho nástroja Facebooku (

Open Graph je protokol vyvinutý spoločnosťou Facebook s cieľom správne prispôsobiť obsah stránky v sociálnych sieťach. Protokol Open Graph umožňuje priradiť metadáta k dôležitým objektom na webovej stránke, po čom sú sociálne siete vnímané ako interný objekt.

Teraz sa na to pozrime na skutočnom príklade. Ak ste niekedy zdieľali príspevok na sociálnych sieťach, všimli ste si, že zvyčajne vyzerá takto:

1. Náhľad- obrázok, ktorý sa zobrazuje ako náhľad záznamu.
2. doména- URL adresa, odkaz na to, čo zdieľate.
3. názov- Názov informácií, ktoré sa chystáte uverejniť.
4. Popis- súhrn toho, čoho sa informácia týka.

Toto je príklad normálneho a správneho nastavenia Open Graph na webovej stránke. Ak si to na svojej stránke nastavíte správne, potom keď budú návštevníci stránky zdieľať vaše príspevky na sociálnych sieťach, vaše materiály budú vyzerať rovnako.

V príklade som ukázal Facebook a tiež som to spomenul na začiatku, ale Open Graph bude fungovať v iných sociálnych sieťach rovnakým spôsobom, v rovnakom Vkontakte, Google+, Odnoklassniki atď.

Ak nepridáte metaznačky z Open Graph, pri pokuse o zdieľanie odkazu sa zobrazí nasledujúci obrázok:

Ako môžeš vidieť. Výsledok je podobný, ale s niekoľkými bodmi. Po prvé, logo stránky sa berie ako recenzia. Prvý obrázok, ktorý sa objaví, sa často vytvorí, ak sociálne siete nedokážu určiť obrázok príspevku alebo loga. Niekedy sociálne siete nepridajú obrázok vôbec. Doména a názov sú tiež uvedené ako v predchádzajúcej verzii, ale chýba stručný popis. Samozrejme, táto možnosť je horšia ako predchádzajúca. Ak bol odkaz zdieľaný raz, nemusí to byť také strašidelné, ale ak publikujete novinky v skupine, všetky publikácie budú mať rovnakú ukážku.

Z nejakého dôvodu som si vybral svoju stránku ako príklad. Nemá pripojený Open Graph, aj keď na sociálnych sieťach sú často zverejňované novinky. Téma je stará a nie je čas ju aktualizovať, ale čoskoro to urobím inštaláciou novej témy. Už bude mať Open Graph a mikroznačky a oveľa viac, na čo ruky nedosiahli. Teraz sa pozrime na to, ako pridať Open Graph na vašu stránku.

Otvorte značky Graph MET

Open Graph má svoje vlastné meta tagy a rovnako ako ostatné sa pridávajú do hlavičky stránky, konkrétne medzi

Najprv vám ukážem, ako metaznačky Open Graph zvyčajne vyzerajú na webovej lokalite:

1. og:type- uveďte typ objektu, záleží na tom, aké vlastnosti sa budú nastavovať ďalej.
2. og:image- uveďte náhľadový obrázok našej stránky.
3. og:url- zadajte odkaz na aktuálnu stránku (tú, kde sa nachádzajú tieto metaznačky).
4. og:title- Zadajte názov stránky.
5. og:popis- uveďte súhrn stránky, článku.

Častejšie pridávaná značka og:názov_stránky- obsahuje názov stránky.

Prvé 4 meta tagy sú základné a povinné. Ak sa rozhodnete pridať protokol Open Graph, musia byť v každom prípade špecifikované. Posledný og:description a og:site_name sú voliteľné, ale vitajte, príklady ste videli na začiatku článku. Existujú aj ďalšie značky, ktoré je možné pridať na stránky lokality, viac sa o nich dozviete na stránke Ruogp.me.

Do tejto skupiny značiek môžete pridať niekoľko ďalších špeciálnych metaznačiek pre Facebook:

1. fb:app_id- označuje ID aplikácie z Facebooku.
2. fb:správcovia- uveďte ID administrátora alebo administrátorov oddelené čiarkami.

Ktorékoľvek z týchto značiek sú pridané, sú potrebné na uchovávanie štatistík o interakcii s Facebookom. Viac sa o tom môžete dozvedieť tu – vývojári Facebooku. Ak to nepotrebujete, tak to preskočte.

Pripojenie Open Graph

Z vyššie uvedeného si myslím, že chápete, že ak chcete pridať značky Open Graph, všetko, čo potrebujete, je jednoducho pridať pár riadkov do hlavičky stránky s uvedením vašich hodnôt. Ak máte jednostránkový web, tak to nie je problém, ale ak máte blog, články atď. potom to bude ťažké urobiť ručne a nie je to prakticky možné. Ak máte WordPress, máte šťastie. Máte veľa možností na pridávanie značiek.

Existujú dva spôsoby, ako pripojiť Open Graph k WordPress. Prvým je inštalácia pluginu, druhým je pridanie vlastnej funkcie. S doplnkom je všetko jednoduché, ak si ich chcete nainštalovať, môžete si vybrať ľubovoľný a pridať ho na svoju stránku. Spomedzi populárnych doplnkov, ktoré majú vo svojej funkcii podporu Open Graph vo WordPres, by som zdôraznil:

• Všetko v jednom balíku SEO.
• Yoast SEO
• otvorený graf

S najväčšou pravdepodobnosťou už máte jeden z prvých dvoch, potom už bol tento problém odstránený z vašej agendy. Ak nechcete používať doplnky, môžete tento problém vyriešiť pridaním kódu do súboru funkcií. Zastavme sa tu podrobnejšie.

Pred zahrnutím metaznačiek musíte povoliť podporu Open Graph vo WordPress. Dá sa to urobiť dvoma spôsobmi. Najprv musíte otvoriť aktuálny súbor témy hlavička.php a v druhom, s najväčšou pravdepodobnosťou, sa jeho riadok pozrie na značku

Ak vidíte niečo takéto:

Potom môžete pridať prefix="og: http://ogp.me/ns#" a je to. Dopadne to:

Ak máte takéto:

>

Potom môžete buď pridať to isté alebo vďaka funkcii language_attributes, zobraziť v ňom. Ak to chcete urobiť, otvorte súbor funkcií definovaných používateľom funkcie.php a pridajte ho na úplný koniec pred uzatváraciu značku PHP ?> , a ak tam nie je, potom len na samom konci - filter:

Pred zmenou funkcie.php, nezabudnite si uložiť jeho kópiu, aby ste v budúcnosti v prípade chyby vrátili všetko tak, ako bolo.

function opg_html($output)( return $output ." prefix="og: http://ogp.me/ns#""; ) add_filter("language_attributes", "opg_html");

Ďalej po tomto kóde už môžete pridať funkciu, ktorá automaticky zobrazí a vyplní metaznačky Open Graph. Navrhnuté tak, aby boli čo najuniverzálnejšie na vykonanie úlohy. Vyzerá to takto:

Funkcia facebook_open_graph()( global $post; global $wp; //pre odkazy $current_url = home_url($wp->request); //pre popis if($excerpt = $post->post_excerpt)( $trim_words = strip_tags( $post->post_excerpt); ) elseif($wptw = wp_trim_words(get_the_content(), 25))( $trim_words = preg_replace("/[""]/", "", $wptw); )else( $trim_words = get_bloginfo("description"); ) //pre obrázky $first_img = ""; $otimg = preg_match_all("/ /i", $post->post_content, $matches); $first_img = $zhody ; if(empty($first_img))( $first_img = get_bloginfo("template_directory"). "/images/defimages.jpg"; ) / /general meta tags echo " "; echo" "; if(has_post_thumbnail($post->ID))( $thumbnail_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), "medium"); echo " "; )inak( echo " ";) echo" "; //metaznačky pre články, stránky if (is_singular())( echo " "; echo" "; ) else( //metaznačky pre hlavnú, kategóriu a ďalšie echo " "; echo" "; ) ) add_action("wp_head", "facebook_open_graph");

Funkcia nie je malá, je určená na to, aby ste sa v kóde aspoň trochu orientovali a ak to tak nie je, vráťte sa k voľbe s pluginmi. Teraz sa pozrime na hlavné parametre. Hlavné prvky sú zvýraznené komentármi.

Po pridaní a konfigurácii tejto funkcie by ste mali mať označenie protokolu Open Graph. Článok sa ukázal byť nie malý, dúfam, že bol pre vás užitočný a materiál z neho pomôže pri rozvoji vašej stránky.

To je všetko, ďakujem za pozornosť. 🙂

Dobrý deň, priatelia. Určite každý blog má tlačidlá pre sociálne siete Facebook, Vkontakte atď., a zaujímalo by vás, ako sa dá zvládnuť proces pridávania príspevku, t.j. ktorý obrázok má byť zverejnený a aký stručný popis článku. Aby sme to dosiahli, musíme na stránku pridať značku Open Graph. Toto je veľmi jednoduchá úloha, urobíme to pomocou doplnkov WordPress.

Čo je otvorený graf

Open graph je protokol, ktorý vám umožňuje kontrolovať, ako sa bude obsah zobrazovať na sociálnych sieťach pridaním meta tagov do html kódu. Bez toho by príspevok na sociálnej sieti mohol vyzerať takto.

Súhlasím, nevyzerá to veľmi dobre.

Inštalácia Open Graph Markup

Pomôže nám v tom úžasný plugin pre WordPress – All in One SEO Pack. Vo všeobecnosti neprestávam byť prekvapený, aký užitočný a potrebný je tento doplnok. Skutočne zodpovedá svojmu názvu „Všetko v jednom“, pretože obsahuje veľa užitočných vecí pre blog. Nedávno som napríklad napísal článok o používaní tohto pluginu.

Ak ešte nemáte nainštalovaný plugin All in One SEO a neviete, ako sa pluginy inštalujú vo WordPresse, prečítajte si toto.

Po nainštalovaní pluginu je potrebné aktivovať modul „Sociálne meta“. Ak to chcete urobiť, v hlavnej ponuke panela správcu stránky kliknite na položku „ VšetkyvJedenSEO", ďalej" Správa modulov».

V okne, ktoré sa otvorí, vyberte požadovaný modul a kliknite na tlačidlo " Aktivovať».

Všetko, modul už funguje, zostáva len nakonfigurovať ho pre seba.

Teraz musíme nastaviť obrázok, ktorý sa zobrazí, keď niekto zdieľa váš článok na sociálnych sieťach. Prejdite do hlavnej ponuky panela správcu stránky, kliknite na položku „ VšetkyvJedenSEO", ďalej" Sociálna meta».

V okne, ktoré sa otvorí, prejdite do časti „Nastavenia obrázka“ a vyberte zdroj pre OG:Image. Na svojom blogu mám vybratú „Miniatúru príspevku“. Môžete tiež prispôsobiť predvolený obrázok. Bude to potrebné, ak v článku nie sú žiadne obrázky.

Tým je nastavenie dokončené. Ak ste v nastaveniach nezmenili nič iné, potom bude popis článku (og:description) prevzatý z vášho hlavného Popisu, čo je presne to, čo potrebujeme.

Existujú aj samostatné doplnky WordPress na vytváranie Open Graph - „Open Graph Protocol Framework“, „Facebook Open Graph, Google+ a Twitter Card Tags“ a mnoho ďalších. Vyberte si podľa vlastného uváženia.

Problémy s ukladaním do vyrovnávacej pamäte

Možno pri testovaní pluginu narazíte na to, že ak ste už článok raz uverejnili, tak aj keď potom zmeníte nastavenia v module „Social Meta“ pluginu All in One SEO, zobrazenie obsahu na sociálnych sieťach zostanú nezmenené. To znamená, že odkaz na článok bol uložený do vyrovnávacej pamäte. Na jeho odstránenie z vyrovnávacej pamäte prišli vývojári Facebooku a Vkontakte so špeciálnymi nástrojmi.