Nyárvégi nagytakarítás: Weboldal Metaadatok

Ahogy készül a Refaktor szép új motorja, kénytelenek voltunk kicsit foglalkozni azzal, hogy hogyan jelenik meg a közösségi médiában, keresőgépekben. Ahogy az lenni szokott, ahány szolgáltató, annyi szabvány. Próbáljunk meg tehát rendet tenni a káoszban.

Először is tisztázzuk: mi az a metaadat?

Ha nem foglalkoztál még webfejlesztéssel, érdemes ezen az oldalon a jobb gombot megnyomni és a forrás megtekintése opciót választani. Amit látni fogsz, az HTML kód. A <p> és </p> közötti rész például egy bekezdést jelöl, stb. Viszont látni fogsz egy csomó olyat, ami az oldalon nem jelenik meg, csak különböző gépi adatfeldolgozók számára hordoz információt.

Ilyen például ez: <meta property="og:title" content="Nyárvégi nagytakarítás: Weboldal Metaadatok" />. Konyhanyelven megfogalmazva ez a metaadat, vagyis az olyan adatok, amik csak a gépi adatfeldolgozás miatt kerülnek beágyazásra, emberi fogyasztásra nem alkalmasak.

Miért fontos ez? Tegyük fel, hogy megosztod ezt a cikket Facebookon. Ekkor a Facebook programja, mielőtt enged postolni, el fog látogatni a háttérben erre az oldalra és kiolvassa ezeket a metaadatokat. Ezekben például megadhatunk olyan dolgokat, hogy melyik kép, cím és előnézeti szöveg kerüljön ki Facebookra a megosztással együtt. Ez tök jó, mert egy sima szöveges link helyett az emberek egy kattintásra buzdító előnézetet fognak látni képpel.

Ezzel csak egy gond van, ahogy az lenni szokott, ahány szolgáltató, annyi szabvány. Vagyis más kell a Facebooknak, Twitternek, Google-nek. Nézzük szépen sorjában.

Megosztás közösségi hálózatokon (OpenGraph)

A Facebook berkeiből került OpenGraph szabvány. Az elsődleges feladata, hogy befolyásolja a megosztott link kinézetét. A használata viszonylag egyszerű, beágyazzuk a HTML oldalunk <head> és </head> részei közé a megfelelő metaadatokat, például így:

<meta property="og:locale"
      content="hu_HU" />
<meta property="og:site_name"
      content="Refaktor Utazási Magazin" />
<meta property="og:title"
      content="Kelet-Ausztria legszebb hegyei"/>
<meta property="og:type"
      content="article"/>
<meta property="og:description"
      content="Alig néhány órányi autóútra nyugatra az Alpok lábainál találjuk magunkat. Festői völgyek, szeles, kopár hegycsúcsok, és mindenekfelett a hütték, az osztrák vendégszeretet jelképei."/>
<meta property="og:url"
      content="https://demo.refaktor.hu/kelet-ausztria-legszebb-hegyei/" />
<meta property="og:image"
      content="https://demo.refaktor.hu/kelet-ausztria-legszebb-hegyei/social1.png" />

Nézzük, hogy melyik mit jelent:

og:locale: Megadja a tartalom nyelvét. Például: hu\_HU
og:title: Megadja a konkrét tartalom címét. Például: Nyárvégi nagytakarítás: Weboldal Metaadatok
og:site\_name: Megadja a konkrét tartalomhoz tartozó teljes oldal nevét. Például: Refaktor Magazin
og:type: Megadja az adott linken található tartalom típusát. Például: website, article
og:url: Megadja a tartalom autentikus linkjét. Különösen hasznos, ha az adott tartalom több címen is elérhető.
og:image: Megadja a tartalomhoz tartozó képet.

Eddig az alapok. Ezen felül természetesen rengeteg bővítmény létezik, így például a szerző adatait is meg lehet adni, valamint meg lehet adni egy videót, vagy éppen egynél több képet az adott tartalomhoz is. Az opciók teljes listát az ogp.me oldalon találod.

Facebook

Ugyan a Facebook az OpenGraph protokoll megalkotója, mégis van néhány, kizárólag a Facebookra vonatkozó kiegészítésük. Ezek segítségével például ilyen megosztásokat hozhatunk létre:

Mielőtt belevágunk azonban a különböző opciók ismertetésébe, fel kell hívnom a figyelmedet a Facebook Sharing Debuggerre, ami elmondja az oldaladról, hogy hogyan is látja a Facebook.

A megosztott kép méretét, a Facebook adatai szerint, érdemes 1200x630 képpontra belőni, és lehetőség szerint PNG képformátumot használni. Ha a kép mérete efölött van, a Facebook át fogja méretezni erre a méretre és levágja a fölösleget. (Ha nem foglalkozunk a nagy képpont-sűrűségű eszközökkel, elegendő a 600x315 képpont is.)

Ezen a ponton viszont kicsit ellent kell mondanom a Facebook ajánlásainak. A legtöbb OpenGraph-ot implementáló közösségi háló négyzetes képeket használ, ezért érdemes egy négyzetes képet használni, ahol a lényegi tartalom viszont a középső 1200x630 pixelen helyezkedik el, például így:

Ez eddig szép és jó, de ha szeretnénk, Facebookon egynél több képet is megadhatunk. Ehhez egyszerűen több og:image meta taget helyezünk el, ez valahogy így fog kinézni:

Mint látható, ezek a képek teljesen négyzetesek, vagyis a fentebb javasolt négyzetes kép így teljes valójában élvezhető. Arra érdemes figyelni, hogy ez csak Facebook oldalakon való megosztásnál működik, ha egy látogatónk tőlünk függetlenül osztja meg az oldalunkat, ott csak az első kép látszik, a fentebb leírt módon.

Fontos!
A Facebook ezeket a képeket aszinkron módon tölti be, vagyis az első megosztásnál előfordulhat, hogy a képek nem jelennek meg. Ezt úgy lehet elkerülni, hogy a HTML kódban megadjuk a kép méretét:

<meta
    property="og:image:width"
    content="1200" />
<meta
    property="og:image:height"
    content="1200" />

Miután ezt ilyen alaposan kiveséztük, nézzük meg az egyéb, Facebook-specifikus OpenGraph lehetőségeket. Nem sok van, mindössze három:

<meta property="fb:admins" content="janoszen" />
<meta property="fb:app_id" content="1780998928787657" />
<meta property="fb:pages" content="307680759577091" />

Az első kettő azonos célt szolgál. Az fb:admins metaadatban egyedi Facebook usereket adhatunk meg, akik jogosultak az oldal statisztikái megtekintésére. Az fb:app_id-ben egy alkalmazás ID-t adhatunk meg, arra az esetre, hogy több munkatársnak is kellenek jogosultságok, vagy nem akarjuk nyilvánosságra hozni az oldalt adminisztráló felhasználókat.

Az fb:pages metatagre nemsokára visszatérünk, előljáróban annyit, hogy ezt a Facebook arra használja, hogy a weboldalunkat összekapcsolja a Facebook oldalunkkal a Facebook Instant Articles funkció használatára.

Szerző megadása

Ezzel viszont még nincs vége. Ugyanaz általános OpenGraph szabvány részét képezi, de igazából Facebook-specifikus funkció az, hogy cikkekben, blogpostokban lehetőségünk van megadni a szerzőt:

<meta property="article:author" content="https://facebook.com/janoszen" />

Ez azt eredményezi, hogy a szerző Facebook oldala belinkelésre kerül a megosztásnál.

Kép helyett videó?

Előnézeti kép helyett lehetőségünk van videót is beágyazni, például így:

<meta property="og:video" content="https://www.youtube.com/v/-Iy9Qch4blg" />
<meta property="og:video:width" content="560" />
<meta property="og:video:height" content="315" />

Ennek hatására a Facebook beágyazza a linkelt YouTube videót, méghozzá így:

Arra érdemes figyelni, hogy a Facebook a megosztott videót csak beágyazza, nem linkeli be külön az oldalunkat. Azaz valahol a videóban el kell helyeznünk egy felhívást arra, hogy a látogató menjen az oldalunkra, ha ez a célunk.

Twitter

A Twitter ugyan implementálja az OpenGraph megoldást, de kissé sajátságos módon. Ahhoz, hogy egyáltalán megjelenjen a beágyazott tartalom, el kell helyeznünk Twitter-specifikus metaadatokat. Szerencsére a Facebookhoz hasonlóan a Twitternek is van debug eszköze amivel ellenőrizhetjük az oldalunk megjelenését.

Több megjelenési forma közül is választhatunk, de a két leggyakrabban használatos a summary és a summary_large_image. Ezek így néznek ki:

Ezen felül lehetőségünk van például a mobilos alkalmazásunkat reklámozni, vagy akár videót is beágyazni.

A beágyazás hasonlóan működik a Facebook megoldásához:

<meta name="twitter:site" content="@refactorzone" />
<meta name="twitter:title" content="Kelet-Ausztria legszebb hegyei" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="@janoszen" />
<meta name="twitter:description" content="Alig néhány órányi autóútra nyugatra az Alpok lábainál találjuk
    magunkat. Festői völgyek, szeles, kopár hegycsúcsok, és mindenekfelett a hütték, az osztrák vendégszeretet
    jelképei." />
<meta name="twitter:image" content="https://demo.refaktor.hu/kelet-ausztria-legszebb-hegyei/social1.png" />

Látható, hogy a Facebookhoz hasonlóan itt is van lehetőségünk az oldalhoz tartozó account megadására, ami elérhetővé teszi számunkra az oldallal kapcsolatos statisztikákat.

Egyéb hálózatok

Ezen felül persze kismillió oldal van, de ezek nagy többségükben az OpenGraph minimális funkcionalitását implementálják, azaz beolvassák a képet és a hozzá tartozó szöveges adatokat.

Segítsünk a keresőgépeknek! (schema.org)

Na, ezzel ki is végeztük a közösségi médiában való megjelenést, segítsünk egy kicsit a keresőgépeknek is. Ezt a célt szolgálja a schema.org szabvány. Amíg az előzőekben a HTML oldalunk fejlécében adtunk meg adatokat, a schema.org megadás közvetlenül a tartalomban történik.

Hogy is értem ezt? Tegyük fel, hogy az oldalunk láblécében megadjuk a cégünk nevét:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<p>
    <i class="fa fa-fw fa-building"></i>
    Opsbears e.U.
</p>
<p>
    <i class="fa fa-fw fa-map-marker"></i>
    Graf-Starhemberg-Gasse 47/6
</p>
<p>
    <i class="fa fa-fw"></i>
    1040 Vienna,
    Austria
</p>
<p>
    <i class="fa fa-fw fa-phone"></i>
    Phone: <a href="tel:+4313535553" content="+4313535553" itemprop="telephone">+43 1 353 5553</a>
</p>
<p>
    <i class="fa fa-fw fa-envelope"></i>
    Email: <a href="mailto:[email protected]" itemprop="email">[email protected]</a>
</p>
<p>
    <i class="fa fa-fw fa-globe"></i>
    Web: <span itemprop="url" content="https://www.opsbears.com/">www.opsbears.com</span>
</p>

Ebből egy keresőgép maximum találgathat, hogy itt egy cégről van szó, és hogy ez az oldal üzemeltetője. Na de nem kell találgatnia, meg is adhatjuk, hogy itt cégről van szó:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div itemscope="itemscope" itemtype="https://schema.org/Organization">
    <meta itemprop="name" content="Opsbears">
    <meta itemprop="isicV4" content="6311">

    <meta itemprop="logo" content="https://www.opsbears.com/v1420052371/img/logo.png">
    <p>
        <i class="fa fa-fw fa-building"></i>
        <span itemprop="legalName">Opsbears e.U.</span>
    </p>
    <div itemprop="address" itemscope="itemscope" itemtype="https://schema.org/PostalAddress">
        <p>
            <i class="fa fa-fw fa-map-marker"></i>
            <span itemprop="streetAddress">Graf-Starhemberg-Gasse 47/6</span>
        </p>
        <p>
            <i class="fa fa-fw"></i>
            <span itemprop="postalCode">1040</span> <span itemprop="addressLocality">Vienna</span>,
            <span itemprop="addressCountry" content="AT">Austria</span>
        </p>
    </div>
    <p>
        <i class="fa fa-fw fa-phone"></i>
        Phone: <a href="tel:+4313535553" content="+4313535553" itemprop="telephone">+43 1 353 5553</a>
    </p>
    <p>
        <i class="fa fa-fw fa-envelope"></i>
        Email: <a href="mailto:[email protected]" itemprop="email">[email protected]</a>
    </p>
    <p>
        <i class="fa fa-fw fa-globe"></i>
        Web: <span itemprop="url" content="https://www.opsbears.com/">www.opsbears.com</span>
    </p>
</div>

Ha ezt megnézzük a Google Structured Data Testing Toolban, ezt látjuk:

Google Structured Data Testing Tool

De pontosan mi is történt itt?

Ha megnézzük az első sort, rögtön két dolgot láthatunk: megadtunk egy itemscope és egy itemtype attribútumot. Ezek a dokumentumban több helyen is előfordul. Az itemscope azt adja meg, hogy a div-ben található tartalom egy új objektum típust adunk meg, amíg az itemtype megadja az elem pontos tipusát. Ezen belül pedig itemprop-al adjuk meg az elem tulajdonságait. Ha objektum-orientáltan programozol, akkor ez nagyon hasonló ahhoz.

Ha a fenti struktúrát objektum-orientáltan így írhatnánk le:

class Organization {
    string name;
    int isicV4;
    string logo;
    string legalName;
    PostalAddress address;
    string phone;
    string email;
    string url;
}

class PostalAddress {
    string streetAddress;
    string postalCode 
    string addressLocality;
    string addressCountry;
}

Vagyis a HTML dokumentumunkba beágyazunk strukturált információkat. Arra az esetre, hogy nem azt szeretnénk kiírni, mint amit a keresőgépek rendelkezésére bocsájtunk, vagy megadhatjuk a HTML-en belül (pl: <span itemprop="addressCountry" content="AT">Austria</span>) vagy választhatjuk azt a megoldást is, hogy nem a HTML-ben adjuk meg az információkat, hanem megadhatjuk RDFa Lite-ban vagy JSON-LD-ben is, de talán a legegyszerűbb a HTML-es megadás.

Na de mit is adhatunk meg ilyen formában? A teljesség igénye nélkül megadhatunk:

A hivatalos dokumentáció rengeteg objektumtípust definiál, érdemes elolvasni.

Megosztó gombok könnyedén

A következő probléma amivel rendszeresen szembesülök, az különböző megosztási gombok működése. A legtöbb hálózat azt kéri, hogy ágyazd be a JavaScriptüket, ami nem csak lassítja az oldal betöltését, hanem a látogatók adatait ki is szolgáltatja az adott közösségi hálóknak.

A legtöbb ilyen hálózat azonban biztosít olyan megoldást, amivel JavaScript használata nélkül készíthetünk megosztási funkciót, de ez sok esetben nem dokumentált. Nézzük tehát:

Facebook

<a href="https://www.facebook.com/dialog/share?href={URL}&app_id={APP ID}&display=page&redirect_uri={VISSZATÉRŐ URL}">
<i class="fa fa-facebook-square"></i>
</a>

Ha megnézzük, az URL-ben átadhatunk jópár paramétert:

URL: Ezt az oldalt osztjuk meg.
APP ID: Ez az alkalmazás kapja meg a megosztás adatait.
VISSZATÉRŐ URL: Ide tér vissza a látogató a megosztás után.

Forrás: Share Dialog — Facebook for Developers

Messenger

<a href="https://www.facebook.com/dialog/send?link={URL}&app_id={APP ID}&display=page&redirect_uri={VISSZATÉRŐ URL}">
<i class="fa fa-messenger-square"></i>
</a>

URL: Ezt az oldalt osztjuk meg.
APP ID: Ez az alkalmazás kapja meg a megosztás adatait.
VISSZATÉRŐ URL: Ide tér vissza a látogató a megosztás után.

Forrás: Send Button — Facebook for Developers

Twitter

<a href="https://twitter.com/intent/tweet?url={URL}&via={TWITTER USER}&text={SZÖVEG}&related={KAPCSOLÓDÓ USER}">
<i class="fa fa-twitter-square"></i>
</a>

A Facebookhoz hasonlóan a Twitternek is vannak megosztási paraméterei. Ezek a következőek:

text: Ez a szöveg kerül a tweetbe.
url: Ezt az oldalt osztjuk meg.
hashtags: Hashtagek, amik a tweetbe kerülnek.
via: Twitter felhasználónév, amit a Tweethez kapcsolunk. Ez lehet például a saját Twitter fiókunk.
related: Kapcsolódó Twitter fiókok. Ezeket a Twitter felajánlhatja követésre a tweet után.

Forrás: Web Intents | Twitter Developers

Google+

Bár személy szerint nem tudom, hogy ki használja, de a megosztás Google+-on így működik:

<a href="https://plus.google.com/share?url={URL}&hl={NYELVKÓD}">
<i class="fa fa-google-plus-square"></i>
</a>

Tumblr

<a href="https://tumblr.com/widgets/share/tool?canonicalUrl={URL}">
<i class="fa fa-tumblr-square"></i>
</a>

<a href="https://www.reddit.com/submit?url={URL}&title={SZÖVEG}">
<i class="fa fa-reddit-square"></i>
</a>

<a href="https://www.linkedin.com/shareArticle?mini=true&url={URL}">
<i class="fa fa-linkedin-square"></i>
</a>

StumbleUpon

<a href="http://www.stumbleupon.com/submit?url={URL}">
<i class="fa fa-stumbleupon-circle"></i>
</a>

Pocket

<a href="https://getpocket.com/edit?url={URL}">
<i class="fa fa-get-pocket"></i>
</a>

Vkontakte

<a href="http://vk.com/share.php?url={URL}">
<i class="fa fa-vk"></i>
</a>

WordPress

<a href="http://wordpress.com/press-this.php?u={URL}&title={CÍM}">
<i class="fa fa-wordpress"></i>
</a>

Mobilos megjelenítés csinosítása

Ha már csinosítunk, tegyünk valamit a mobilos megjelenítésért is.

Android / Windows Mobile

Ha Androidon megnyitod a Refaktor Magazint, valami ilyesmit látsz:

A fenti szinezést azzal érjük el, ha ezt a HTML fájlunk head részébe tesszük:

<meta name="theme-color" content="#63bc46" />
<meta name="msapplication-navbutton-color" content="#63bc46" />

Ha szeretnénk támogatni azt, hogy az alkalmazásunk megjelenjen a mobil készülék home képernyőjén, Androidon ezen felül csatolhatunk egy manifest filet is, amiről a leírást a hivatalos Chrome dokumentációban találjuk.

iOS

iOS-en kicsit korlátozottabbak a lehetőségek. Mindössze annyit tudunk beállítani, hogy a weboldal teljes képernyős módban induljon el, és ha igen, milyen legyen a fenti státusz sor megjelenése. Például így:

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

Ezek azonban csak akkor lépnek érvényre, ha a felhasználó a weboldalunkat kihelyezi a home képernyőjére és onnan indítja el. Ezen felül lehetőségünk van ehhez ikont is társítani, méghozzá a következő metaadatok megadásával:

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png" />

Mint látható, különböző méretű ikonokat készíthetünk a különböző felbontásokra.

Mobilos cikkoptimalizálás

Mind a Facebook, mind a Google igyekszik a mobilos böngészést élvezhetőbbé tenni. Mindkét cégnél rájöttek arra, hogy a jelek szerint a weboldalak készítői túl lusták, vagy nem rendelkeznek a megfelelő technikai felkészültséggel ahhoz, hogy kellően gyors oldalakat gyártsanak. Éppen ezért mindkét cég egy egyedi formátummal állt elő, amiben publikálhatunk tartalmakat, és ezeket ők előre feldolgozzák és kiszolgálják.

Facebook Instant Articles

A Facebook Instant Articles legegyszerűbb működési módja az, hogy elkészítünk egy speciális RSS feedet, amiből ők beolvassák az oldalunk friss cikkeit. Sajnos ez nem kompatibilis a rendes RSS-el, így mindenképpen saját feedet kell készítenünk.

A feedben elhelyezhető markup is korlátozott, nincs lehetőség JavaScript vagy stíluslapok elhelyezésére. Ha reklámot szeretnénk bekötni, az kizárólag a Facebook reklámja lehet. (Van erről valami közmondás, szentek keze meg ilyesmi…)

Na, ha ezzel szeretnénk foglalkozni, akkor az erről szóló fejlesztői dokumentációt itt találjuk.

(Google) Accelerated Mobile Pages HTML

A Google konkurens terméke az AMP HTML. Természetesen itt is megvan a szent és a maga felé hajló kéz, de a szabvány sokkal nyíltabb. Itt mindössze egy speciális HTML fájlt kell elkészítenünk, de legalább van lehetőségünk stíluslap beágyazására. Arra érdemes figyelni, hogy komoly méretbeli megkötések vannak, tehát egy teljes Bootstrap például nem fog elférni a méretkorlátban, éppen ezért érdemes lehet például UnCSS-sel végig menni a stíluslapon.

A Facebookhoz hasonlóan JavaScript használatára szintén nincs lehetőség (néhány nagyon korlátozott kivételtől eltekintve), vagyis a hírdetések és tracking kódok megint csak nehezen építhetőek be.

Egy dolog amire érdemes figyelni az az, hogy az AMP HTML nem arra való, hogy a rendes oldalunkat is ebben írjuk meg. Ez sok helyen félreérthetően kommunikálják. El kell készítenünk az oldalunk külön változatát AMP HTML formátumban, és a dokumentáció szerint társítani kell az oldalunkhoz. A Google crawler ezek alapján fogja beolvasni és gyorsírótárazni az oldalunkat.

05 Oct 2016

Fejlesztés

« Biztonságos jelszótárolás Angular 2 TypeScript módra – 1. rész »

Letscode.hu

Nyárvégi nagytakarítás: Weboldal Metaadatok

Megosztás közösségi hálózatokon (OpenGraph)

Facebook

Szerző megadása

Kép helyett videó?

Twitter

Egyéb hálózatok

Segítsünk a keresőgépeknek! (schema.org)

Megosztó gombok könnyedén

Facebook

Messenger

Twitter

Google+

Tumblr

Reddit

LinkedIn

StumbleUpon

Pocket

Vkontakte

WordPress

Mobilos megjelenítés csinosítása

Android / Windows Mobile

iOS

Mobilos cikkoptimalizálás

Facebook Instant Articles

(Google) Accelerated Mobile Pages HTML

Fedezz fel →