Joomla nyílt gráf telepítés. Mire jó az Open Graph a hasonló gombokhoz. Kész motormegoldások Open Graph metacímkék hozzáadásához

Ebben a cikkben elemezzük konkrét példa hogyan valósítsuk meg az Open Graph protokollt (mikro-jelölést) a CMS Joomla 3 segítségével létrehozott webhelycikkekhez. Beszéljünk a protokoll fő címkéiről, előtagjairól és metaadatairól, valamint a munka során előforduló hibákról.

Az Open Graph protokoll fő címkéi

Az Open Graph protokoll webhelyen történő beállításához elegendő, ha ismeri a protokoll által használt alapvető metacímkék egy kis készletét. Az Open Graph protokoll használatával leírást adhat egy cikkhez, zenéhez, videóhoz és néhány egyéb objektumhoz. Mielőtt azonban különféle objektumokról beszélnénk, nézzük meg, hogyan nézhet ki egy webhely oldalának előnézete a közösségi hálózatokon, különösen, ha bejegyzést tesz közzé a Facebookon:

És most nézzük meg a cikk leírásában használt fő címkéket, amelyek hozzá kell adni kizárólagosan a dokumentum fejcímkéi között:

• og:title - ezzel a címkével elküldhetjük a bejegyzés címét a közösségi oldalakra;
• og:leírás - ahogy a név is sugallja, a címke a bejegyzés rövid leírásának közvetítésére szolgál, a rövid leírás hossza nem haladhatja meg a 300 karaktert;
• og:type - jelzi az objektum típusát, lehet cikk, zene, videó stb. Az Open Graph protokollban nincs olyan sok hasonló objektum, és ha több is van belőlük az oldalon, akkor érdemes csak egyet megadni, amelyet főnek tekintünk;
• og:url - az állandó azonosítóként használt oldal címe;
• og:image - a címke szükséges a készítendő kép jelzésére a poszt kialakításánál. Milyenek legyenek a képek, vagy inkább, hogy mekkora, az érdekes kérdés, hogy legközelebb megvitatjuk;
• og:webhely_neve - a webhely neve (neve), amelyen az objektumról ugyanazok az információk találhatók.

Az Open Graph Protocol megvalósítása a Joomla 3-ban

Most folytassuk a gyakorlatot, és próbáljuk meg implementálni az Open Graph protokollt a Joomla 3 webhelyünkre. De van egy fogás - a webhely összes oldala dinamikusan alakul ki, valójában, mint bármely más tartalomkezelő rendszer, ezért el kell gondolkodnia azon, hogyan viheti át a szükséges információkat a dokumentum fejblokkjába.

Mint mindig, ezt is a legegyszerűbb megoldás, ha mondhatom, speciális bővítmények használata ( Easy Open Graph , Phoca Open Graph , Nyissa meg a Grafikoncímkéket , Global Open Graph ). De hogy őszinte legyek, a sok tesztelt bővítmény egyike sem nyűgözött le, ezért úgy döntöttem, hogy mindent magam csinálok, és ezt tanácsolom.

Hogyan lehet adatokat hozzáadni egy Joomla 3 dokumentum fejblokkjához? Ebben lesz segítségünkre a szabványos JDocument osztály, melynek segítségével bármit beágyazhatunk a dokumentum fejblokkjába. Hogy ne dobogassunk, azonnal nézzük meg a kódot, amelyet hozzá kell adni a reszponzív cikkelrendezési fájlhoz /components/com_content/views/article/tmpl/default.php , de először azt tanácsolom, hogy hozzon létre egy felülírást (másolás adott fájl egy mappába /templates/template_name/html/com_content/article ). Erről további információt a Joomla 3 felülbírálása című cikkben talál.

//Graph protokoll megnyitása $document =& JFactory::getDocument(); if($this->item->metadesc == "") ($desc = strip_tags($this->item->introtext);) else ($desc = $this->item-> $document -> addCustomTag(" escape($this -> item -> title)."" /> image_fulltext." /> elem->létrehozva."" /> elem->módosítva." /> ");

A kód nem bonyolult, kezdetben kijelentjük, hogy az osztályt fogjuk használni JDocument, majd a módszer használatával addCustomTag a dokumentum fejrészéhez bármit hozzáadhatunk, esetünkben Open Graph meta tagek lesznek.

Külön figyelmet szeretnék fordítani a kiadvány leírásának kialakítására, itt egy bizonyos feltételt használva ellenőrizzük a szöveg jelenlétét a leírás meta tagjában, ha nem, akkor az anyag bevezető szövege kerül felhasználásra. az oldal rövid leírásaként. A következő kódsor felelős ezért:

If($this->item->metadesc == "") ($desc = strip_tags($this->item->introtext);) else ($desc = $this->item->metadesc;) // Leírás kiadványok

Ezután a módszer segítségével addCustomTag megkezdjük az Open Graph protokollhoz szükséges információk hozzáadását a dokumentum fejéhez - cím, leírás, objektumtípus, kép, valamint a cikk megjelenésének és módosításának dátuma. Vegye figyelembe az ingatlant is fb:app_id, ez az Ön alkalmazásának (webhelyének, csoportjának) azonosítója a Facebook közösségi oldalon, ezt az azonosítót az Eszközök és támogatás -> Saját alkalmazások -> Új alkalmazás hozzáadása oldalon kaphatja meg.

Az Open Graph mikroadatok ellenőrzése

Miután az Open Graph mikroadatokat kitöltötte és áthelyezte a dokumentum fejrészébe, ideje ellenőrizni a munka helyességét. Ebből a célból használhatja a Yandex jelölésellenőrzőjét vagy a Facebook újraküldési hibakeresőjét.

Kezdjük a „bookface”-vel, a megfelelő mezőbe írjuk be annak az oldalnak a címét, amelyet ellenőrizni szeretnénk, majd kattintsunk a „Debug” gombra. Ha mindent helyesen csinált, akkor nem lehetnek hibák, és az eredménynek valami ilyesminek kell lennie:

Most tegyük meg ugyanezt a Yandex jelölés-ellenőrzőjében, de itt nem minden lett olyan nagyszerű, és hibát kaptam amely így szól:

HIBA: előtag cikk az érvényesítő számára ismeretlen, adja meg kifejezetten egy attribútummal előtag

Ez az eset így néz ki:

Mi ez az attribútum, és miért nem ismeri az érvényesítő? Minden egyszerűnek bizonyult, annak érdekében, hogy megszabaduljon egy ilyen hibától, mindössze annyit kell tennie, hogy kifejezetten jeleznie kell a Yandexnek, hogy Open Graph mikro-jelölést (protokoll) használunk. Ehhez a sablonunk indexfájljában meg kell találnunk a nyitó HTML címkét:

És cserélje ki a következő sorra:

Ezt követően a Yandex validátor hibája eltűnik. Egyébként vannak esetek, amikor a Yandexnek nem tetszik az fb előtag a cikk helyett, ilyenkor egy további sort kell hozzáadni a html címkéhez fb: http://ogp.me/ns/fb# stb:

Problémák az ismétlődő Open Graph címkékkel

Ha használ néhány beépülő modult a Joomla 3 webhelyén, akkor valószínű, hogy beszúrják a saját Open Graph protokoll metaadatait a dokumentum fejébe, még akkor is, ha semmi közük ehhez a protokollhoz.

Konkrétan sikerült kiderítenem, hogy a képek miniatűreinek létrehozására szolgáló mAvik Thumbnails bővítmény alapértelmezés szerint hozzáadja az og:image címkét a dokumentum fejéhez, és a cikk törzséből a legelső kép lesz az érték, és kicsinyített másolata. Ezt úgy ellenőrizheti, hogy megnézi a mikroadatok ellenőrzésének eredményeit a Yandex validátorban (a fenti képernyőkép). Sőt, úgy tűnik, senki sem kéri tőle, hogy ezt a címkét adja hozzá, de ennek ellenére megteszi.

Ez persze nem a plugin fejlesztő hibája, mert lehet, hogy valakinek hasznát veszi, de én akkor is inkább megválok tőle. Tehát az ismétlődő og:image metacímke eltávolításához csak kis változtatásokat kell végrehajtania a mAvik Thumbnails beépülő modul beállításain. Ehhez a "Kontextus" lapon az "Og:image meta tag hozzáadása" kapcsolót "Ne add hozzá" állásba kell állítani, ami után a duplikált og:image metacímke eltávolításra kerül:

Ezzel befejeződik az oldal (különösen a Joomla anyag) jelölése az Open Graph protokoll használatával, amint láthatja, nincs itt semmi bonyolult, és nincs szükség további bővítmények használatára, amelyekről még nem tudni, hogy mit tudnak add hozzá az oldal kódjához.

A VKontakte közösségi hálózat nem vesz rövid leírást (leírást)

Az Open Graph bevezetése után biztosan mindenki észrevesz egy kellemetlen tulajdonságot a bejegyzések közzétételekor közösségi háló Kapcsolatban áll. A helyzet az, hogy ez a hálózat az előnézet (részlet) létrehozásakor makacsul megtagadja Rövid leírás a leírás mezőben megadott cikkeket. Minden más társadalmi hálózatok ezt teszik, de a VKontakte megtagadja.

Hogy megértsem a jelenség okát, úgy döntöttem, felteszek egy kérdést a támogatási szolgálatnak, amelyre egészen érthető választ kaptam:

Tavalyelőtt ősze óta a töredékeknek már nincs leírásuk. Ez a fejlesztők tudatos döntése; nyilvánvalóan a webdizájnban és a felülettel kapcsolatos kompromisszumokhoz kapcsolódik. Szerintük értelmes szöveg szinte soha nem került oda, nem volt értelme egy ilyen leírásnak.

Kiderült, hogy a VKontakte 2016 ősze óta szándékosan felhagyott a rövid leírással. Kár, de mit tehetsz. Tehát ha hasonló problémát észlel, tudja, hogy ez nem a te hibád, hanem valamiféle tiltás a közösségi oldal részéről.

Végezetül szeretném megjegyezni, hogy az Open Graph protokollon kívül számos más mikro-jelölési formátum létezik, különösen a Schema.org, amelyről a cikkben beszéltünk.

Sajnos nagyon kevés információ található erről a kérdésről az interneten, különösen a Runetben. Mit tud nekünk ajánlani a google, hogy megoldjuk a nyílt gráfprotokoll Joomlába való beillesztésének problémáját? ez egy pár bővítmény, amely lehetővé teszi saját meta és head tagek beszúrását. Az egyik legnépszerűbb az ITP Meta. A működési elve ingyenes verzió enyhén szólva furcsa. Miután létrehozott egy cikket, minden cikkhez külön kell regisztrálnia metacímkéket. Mivel nem akarok beletörődni az ilyen rutinmunkába, azt javaslom, használja az én módszeremet.

Kezdetnek tehát, hogy teljesen világos legyen, miért kell a facebook Open Graph protokollját a Joomla fejbe tenni. Így néz ki az anyag speciális felvételek nélkül.

És ez így néz ki az összes szükséges bejegyzéssel. Lényeges alatt azt értem, hogy lényeges. Mivel sok a bejegyzés, ezért az Open Graph protokoll felsorolt ​​húscímkéi közül néhány, ami ebben a cikkben lesz, nem igazán kell a facebooknak, de mondjuk a pinterestnek kötelező.

Open Graph protokoll hozzáadása a Joomlához

• Menjünk ide: /components/com_content/views/article/tmpl
• A fájl megnyitása: default.php
• Ezután keresse meg a 14. sort megjegyzéssel: // Parancsikonok létrehozása néhány paraméterhez.
• Ezután meg kell határoznia egy változót a cikk létrehozásának dátumához. Ehhez adja hozzá a következő sort a változók listájához. Ennek eredményeként egy új változónak kell megjelennie $datepubl. Például nekem így van ez.

Amint látja, minden egyszerű. Ami a képeket illeti, a következő sorrend megy: ha az anyag bevezető részéhez nincs kép, akkor a teljes anyagról készül a kép, ha nincs, akkor az oldal logója készül. Természetesen meg kell adnia úgy, hogy a "http://komarovdesign.com/images/logo_12x.png" sorban a sajátjára cseréli.

Ezután az "og: site_name" sorba tollal kell írnia webhelyének leírását. Adja meg a cikk szerzőjét "cikk:szerző". Az "fb:admins" sorba be kell írni a facebookon lévő profilod azonosítóját.

Ha figyelmesen elolvasta, észrevette, hogy itt nincs "og: description" főcímke, hanem egy másik fájlban van hozzáadva.

• Menjünk ide: libraries/joomla/document/html/renderer/
• A fájl megnyitása: fej.php
• Körülbelül a 106-os sort keressük megjegyzéssel: // Ne adjon hozzá üres leírásokat
• És a fő után leírás helyezze be az Open Graph protokoll metacímkéjét. Az eredmény a következő legyen.

Az Open Graph hasznos a Facebook, a VKontakte és más hálózatok számára.

Most folytassuk a gyakorlást. Pontosan mit kell tennie a webmesternek a kívánt kép rögzítéséhez.

Ha új bejegyzést ad hozzá az oldalon kézzel beállított gombokkal, akkor már észrevette, hogy a hirdetmény mellett bármilyen bélyegkép is megjelenhet. Beleértve egy kullancsos pultot a gyönyörű és különlegesen kiválasztott minta helyett. Kézi kiegészítéssel természetesen azonnal kijavítható és megelőzhető a nem megfelelő grafika. De mindig mindent felesleges kattintások nélkül szeretne megtenni. Ráadásul az automatikus keresztküldéssel a kép nem módosítható.

Más abszurditások is vannak a címek, leírások stb. kiadásával, így a közösségi fejlesztők. hálózatok egy speciális jelöléssel rukkoltak elő ]]> Grafikon megnyitása ]]> .

Meg kell jegyezni, hogy a Yandex 5 megoldást kínál a mikroadatok telepítésére.

A különféle incidensek elkerülése érdekében a webmester a következő Open Graph metacímkéket helyezheti el a címkék között

Megjelölni add hozzá az xmlns elérési útját, ne felejtsd el zárójelbe tenni az összes kódot:

Egy másik kódpélda, tegye a kódot zárójelbe:

Html xmlns="https://www.w3.org/1999/xhtml" xml:lang="ru-RU" lang="ru-RU" prefix="og: https://ogp.me/ns# videó : https://ogp.me/ns/video# ya: https://webmaster.yandex.ru/vocabularies/"

Kész motormegoldások Open Graph metacímkék hozzáadásához

WordPress beépülő modulok esetén:

Facebook Open Graph Meta- letöltés https://wordpress.org/plugins/facebook-opengraph-meta/

Opengraph és Microdata Generator- letöltés https://wordpress.org/plugins/opengraph-and-microdata-generator/

Drupal modulokhoz:

Nyissa meg a Graph metacímkéket letöltés a 6-os és 7-es verzióhoz a https://drupal.org/project/opengraph_meta linkről

Modul Meta Tags beállítja a Drupal 7 metacímkéit és néhány paramétert az Open Graph protokollból. Letöltés https://drupal.org/project/metatag

Joomla bővítmény

Easy Open Graph közzé tesz egy kis képet, egy rövid előzetest és egy linket a Facebook érdeklődési rovatához. Válassza ki a Joomla verzióját, és töltse le a https://extensions.joomla.org/extensions/social-web/facebook-integration/17883

og:markup megtekintése képek, címek stb. módosításakor használhatja az URL Linter eszközt a https://developers.facebook.com/tools/debug oldalon.

Nyissa meg a Graph Protocol megoldást for Joomla a Joomla úttörő összetevője, amely lehetővé teszi, hogy teljes ellenőrzést gyakoroljon a Joomla webhelyek tartalma felett, mindenféle Open Graph Protocol beállítás esetén.

Jelenleg a kiterjesztés verzió lehetővé teszi a Joomla 2.5 és 3.6x használatát.

A különféle oldalak tartalmával való munka minden tulajdonos számára előtérbe kerül. Figyelmen kívül hagyva Ebben a pillanatban nem engedi emelkedni a nézettséget kereső motorok különböző környezetekben, ami hátrányosan befolyásolhatja a webhely forgalmát, valamint a kérdés pénzügyi oldalát. Ha szeretne tájékozódni webhelye meglévő problémáiról, ellenőrizheti a webhelyen található hibákat, hogy azokat időben észlelje és kiküszöbölje.

Amióta a közösségi oldalak és a web2.0 oldalak adatmennyisége növekedni kezdett, a menedzsment egyik fontos helye az Open Graph Protocol technológia. Az Open Graph Protocol (OGP) lehetővé teszi a fejlesztők vagy a webhelytulajdonosok számára, hogy webhelyeiket/oldalaikat/bejegyzéseiket integrálják a közösségi forgalomba. Az OGP használatával nagy mennyiségű információt vihet át, például címet, leírást, képet, földrajzi helycímkéket, szerzőt stb. Az OGP fontos tárgyává vált oldalai közösségi hálózatbarátabbá tételében.

Az Open Graph Protocol Solution telepítése után egy OGP ikont ad a Joomla háttérrendszer cikkszerkesztőjének aljára, ahol megadhatja az OGP címkéket. Ez az összetevő lehetővé teszi az összes cikk felsorolását az OGP cikkcímkék jobb kezelése érdekében.

Felsoroljuk a főbb bővítési lehetőségeket:

főbb lehetőségek

• Előugró ablakok eltávolításának lehetősége;
• RSS eltávolítása;
• Támogatás az Ajaxból való eltávolításhoz.

Támogatott komponensek:

• ComContent (cikkkezelő);
• K2 (Comk2);
• Flexi tartalom (ComFlexicontent);
• Virtualmart (ComVirtuemart);
• DJ-katalógus (Comdj-katalógus);
• Állatkert (ComZoo);
• Bármely összetevő engedélyezése vagy letiltása az adminisztrátor által vagy a frontend egy része külön-külön;
• Lehetőség az alapértelmezett nyitott címkék adminisztrátori funkcióinak konfigurálására.