Mikä on Open Graph ja miten voin käyttää sitä verkkosivustollani?

Sisällön rakentaminen ja verkkosivuston ylläpitäminen voi viedä paljon aikaa. Kuinka voimme varmistaa, että sisältömme erottuu, kun jaetaan sosiaalisissa syötteissä Internetissä?

  • Mikä on avoin kaavio?
  • Miksi tarvitsen sitä?
  • Mitä tapahtuu, jos minulla ei ole sitä?
  • Aloitetaan avoimen kuvaajan perusteista
  • Verkkosivuston avoimen kaavion tyyppi
  • Joitakin muita avoimen kaavion tunnisteita, jotka kannattaa lisätä
  • Twitter ja muut sosiaalisen median verkostot avoimen kaavion avulla
  • Kuvat avoimessa kaaviossa
  • Testataan avoimia kuvaajatunnisteita
  • Voinko saada esimerkin?

Mikä on avoin kaavio?

Open Graph on Internet-protokolla, jonka Facebook on alun perin luonut standardoidakseen metatietojen käyttöä verkkosivulla sivun sisällön esittämiseksi.

Sen sisällä voit antaa yksityiskohtia yhtä yksinkertaisesti kuin sivun otsikko tai yhtä tarkka kuin videon kesto. Nämä kappaleet sopivat yhteen muodostaen esityksen jokaisesta Internet-sivusta.

Miksi tarvitsen sitä?

Internetin sisältö luodaan tyypillisesti ainakin yhtä tavoitetta ajatellen - jakaa se muiden kanssa. Tällä ei välttämättä ole väliä, jos lähetät sen vain yhdelle ystävällesi, mutta jos haluat jakaa sen tai haluat sen jaettavan mihin tahansa sosiaaliseen verkostoon tai sovellukseen, joka käyttää rikkaita esikatseluja, haluat, että esikatselu on yhtä tehokas mahdollisimman.

Kuinka tulla Full Stack -verkkokehittäjäksi vuonna 2020 #javascript #fullstack //t.co/A1TsFaDguD

- Colby Fayock (@colbyfayock) 10. maaliskuuta 2020

Tämä auttaa ihmisiä kannustamaan tarkistamaan sisältösi ja väistämättä napsauttamaan sisältöäsi.

Mitä tapahtuu, jos minulla ei ole sitä?

Useimmat sosiaaliset verkostot yrittävät oletusarvoisesti tehdä parhaansa sisällön esikatselun luomisessa. Tämä ei useinkaan mene niin hyvin.

Otetaan esimerkiksi verkkosivustoni colbyfayock.com.

Se nappaa sivuni otsikon ja kuvauksen oikein, mutta se ei ole houkuttelevin näköinen twiitti syötteessä.

Vertaa sitä yksittäisen viestin esikatseluun ja näemme toisen tarinan.

Joten mitä tapahtuu, jos sinulla ei ole avoimia kuvaajatunnisteita? Mitään pahaa ei tapahdu, mutta et hyödynnä joitain ominaisuuksia, jotka auttavat tekemään sisällöstäsi erottuvan muun Internetiin lähetettävän sisällön lisäksi.

Aloitetaan avoimen kuvaajan perusteista

Neljä perus Open Graph tunnisteita, joita tarvitaan kullekin sivulle on og:title, og:type, og:image, ja og:url. Näiden tunnisteiden tulisi olla yksilöllisiä jokaiselle palvelemallesi sivulle, eli etusivusi tagien tulisi olla kaikki erilaiset kuin blogiviestisi artikkelin sivulla.

Vaikka sen pitäisi olla melko suoraviivainen, tässä on erittely siitä, mitä kukin tagi tarkoittaa:

  • og:title: Sivusi otsikko. Tämä on tyypillisesti sama kuin verkkosivusi tagi, ellet halua esittää sitä eri tavalla.
  • og:type: Sivustosi tyyppi. Selitän enemmän seuraavassa osassa, vaikka yleinen "tyyppi" on "verkkosivusto".
  • og:image: Tämän pitäisi olla linkki kuvaan, jonka haluat edustavan sisältöäsi. Sen pitäisi olla korkean resoluution kuva, jota sosiaaliset verkostot käyttävät syötteissään.
  • og:url: Tämän pitäisi olla nykyisen sivun URL-osoite.

Kun sijoitat tagia verkkosivustollesi, sinun on sijoitettava se muiden metatietojen mukana. Käytettävä tagi on tagi, ja sen pitäisi näyttää tältä mallilta:

Joten jos minun pitäisi luoda joukko neljä avoimen kaavion tunnisteita verkkosivustolleni, colbyfayock.com, se saattaa näyttää:

Verkkosivuston avoimen kaavion tyyppi

Avoin kaavio -protokolla sisältää muutamia muunnelmia sen tukemien verkkosivustojen tyypistä. Tämä sisältää tyyppejä, kuten verkkosivusto, artikkeli tai video.

Kun määrität avoimia kaaviotunnisteita, haluat saada käsityksen siitä, mikä tyyppi on järkevämpi verkkosivustollesi. Jos sivusi on keskittynyt yhteen videoon, on todennäköisesti järkevää käyttää tyyppiä ”video”. Jos kyseessä on yleinen verkkosivusto, jolla ei ole erityistä vertikaalialuetta, haluat todennäköisesti käyttää vain tyyppiä "verkkosivusto".

Muiden tavoin tämä on ainutlaatuinen jokaiselle sivulle. Joten jos kotisivusi on "verkkosivusto", sinulla voi aina olla toinen sivu, jonka tyyppi on "video".

Joten jos aion luoda verkkosivustolleni avoimen kaaviotyypin, se saattaa näyttää seuraavalta kotisivullani:

Kun navigoit blogikirjoitukseen, se näyttää tältä:

Löydät yleisimmät avoimen kaavion verkkosivustotyypit avoimen kaavion verkkosivulta: //ogp.me/#types

Joitakin muita avoimen kaavion tunnisteita, jotka kannattaa lisätä

Vaikka olet yleensä kunnossa perusasioiden kanssa, tässä on muutama, joka kannattaa lisätä:

  • og:description: Sivusi kuvaus. Samoin kuin og:titletämä voi olla sama kuin verkkosivustosi tagi, ellet halua esittää sitä eri tavalla.
  • og:locale: Jos haluat lokalisoida tunnisteet, olisi todennäköisesti järkevää sisällyttää kieli. Muoto on language_TERRITORY, missä oletus on en_US.
  • og:site_name: Koko verkkosivustosi nimi, jolla sisältösi on. Jos olet blogikirjoitussivulla, sinulla saattaa olla titleblogikirjoituksen otsikko, jossa site_nameblogisi nimi olisi.
  • og:video: Onko sinulla video, joka tukee sisältöäsi? Tässä on mahdollisuus sisällyttää se. Lisää linkki videoosi tällä tagilla.

Nämä tunnisteet lisätään samalla kaavalla kuin aiemmin:

Twitter ja muut sosiaalisen median verkostot avoimen kaavion avulla

Suurin osa sosiaalisista verkostoista noudattaa avoimen kaavion standardien perusteita, mutta muutama niistä sisältää myös oman laajennuksen, joka auttaa mukauttamaan ulkoasua ja tuntumaa ekosysteeminsä sisällä.

Esimerkiksi Twitterissä voit määrittää twitter:card, minkä tyyppistä "korttia" voit käyttää, kun he näyttävät verkkosivustoasi. Tällä hetkellä heidän korttityyppejään ovat:

  • yhteenveto
  • yhteenveto_suuri_kuva
  • sovellus
  • pelaaja

Tämä auttaa sinua valitsemaan, kuinka linkkejäsi käytetään niiden syötteessä. Jos valitset summary_large_imageesimerkiksi, Twitter näyttää linkkisi suurilla korkean resoluution kuvilla, kunhan annat sen og:imagetagissa.

Tässä on joitain pikaviitteitä dokumentaatioon siitä, miten avoimia kaaviotageja käytetään joidenkin sosiaalisen median sivustojen kanssa:

  • Twitter: //developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started
  • Facebook: //developers.facebook.com/docs/sharing/webmasters/
  • Pinterest: //developers.pinterest.com/docs/rich-pins/overview/?
  • LinkedIn: //www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin?lang=fi

Kuvat avoimessa kaaviossa

Vaikka kuvan lisääminen og:imagepitäisi usein riittää, joskus voi olla haastavaa saada kuva näyttämään oikein. Jos näyttää olevan vaikeuksia, avoin kaaviostandardi sisältää muutaman kuvalapun, kuten og:image:urlvs og:image:secure_urlsekä og:image:widthand og:image:height.

Yritä varmistaa, että noudatat kaikkia avoimen kaavion dokumentaation huomautuksia ja esimerkkejä. Lisäksi joillakin sosiaalisilla verkostoilla on kuvavaatimuksia. Esimerkiksi Twitter vaatii suhde 2: 1, vähimmäiskoko 300x157 ja maksimikoko 4096x4096, joka on alle 5 Mt ja JPG, PNG, WEBP tai GIF.

Jos olet jumissa, testaa tunnisteitasi sosiaalisen median verkoston työkalujen avulla nähdäksesi, löytyykö ongelma.

Testataan avoimia kuvaajatunnisteita

Onneksi suosikki sosiaaliset verkostomme tarjoavat myös työkaluja, joiden avulla voimme korjata tunnisteitamme. Kun olet varmistanut, että tagisi näkyvät todella verkkosivustosi lähdekoodissa, voit esikatsella verkkosivustosi ulkoasua syötteessä.

  • Twitter: //cards-dev.twitter.com/validator
  • Facebook: //developers.facebook.com/tools/debug/
  • Pinterest: //developers.pinterest.com/tools/url-debugger/

Kaivaminen edelleen avoimiin kaavioihin

Vaikka useimpien näistä pitäisi kattaa perussivusto, on olemassa muutama lisää tunnisteita, jotka voivat auttaa sinua ja yritystäsi havaitsemaan sosiaaliset verkostot.

Jos olet kiinnostunut sukeltamaan enemmän, dokumentaatio tekee hyvää työtä tarjoamalla luettelon kaikista käytettävissä olevista tunnisteista, joita voit käyttää.

//ogp.me/

Voinko saada esimerkin?

Jos etsit vain esimerkkiä aloittaaksesi, sinun pitäisi päätyä, kun asetat tagit blogikirjoitukseen:

Etsitkö muita tapoja optimoida ja analysoida sisältöäsi?

  • Kuinka lisätä sosiaalisen median kuva Github-projekti-arkistoon
  • Kuinka ymmärtää Google Analyticsia ja verkkosivustosi liikennettä
  • Kuinka määrittää ja seurata YouTube-kanavan suorituskykyä Google Analyticsin avulla

Seuraa minua saadaksesi lisää Javascriptiä, UX: ää ja muita mielenkiintoisia asioita!

  • ? Seuraa minua Twitterissä
  • ? ️ Tilaa Youtube
  • ✉️ Rekisteröidy uutiskirjeeseen