Mis on Open Graph ja kuidas seda oma veebisaidil kasutada?

Sisu koostamine ja veebisaidi pidamine võib võtta palju aega. Kuidas saaksime veenduda, et meie sisu paistab silma, kui jagatakse suhtlusvoogudes Internetis?

  • Mis on avatud graafik?
  • Miks mul seda vaja on?
  • Mis juhtub, kui mul seda pole?
  • Alustades avatud graafi põhitõdedest
  • Veebisaidi avatud graafiku tüüp
  • Mõned muud avatud graafi sildid, mida tasub lisada
  • Twitter ja muud sotsiaalmeedia võrgustikud, kasutades avatud graafikut
  • Pildid avatud graafikus
  • Avatud graafimärgendite testimine
  • Kas ma saaksin näite?

Mis on avatud graafik?

Open Graph on Interneti-protokoll, mille algselt lõi Facebook selleks, et standardida metaandmete kasutamist veebilehel lehe sisu esitamiseks.

Selles saate esitada üksikasju nii lihtsalt kui lehe pealkiri või sama konkreetne kui video kestus. Need tükid sobivad kokku, moodustades iga Interneti-lehekülje esitusviisi.

Miks mul seda vaja on?

Interneti sisu luuakse tavaliselt vähemalt ühte eesmärki silmas pidades - seda teistega jagada. See ei pruugi tingimata olla oluline, kui saadate selle lihtsalt ühele sõbrale, kuid kui soovite seda jagada või soovite, et seda jagataks mis tahes sotsiaalses võrgustikus või rakenduses, mis kasutab rikkalikke eelvaateid, soovite, et see eelvaade oleks sama tõhus kui võimalik.

Kuidas saada täisversiooni veebiarendajaks 2020. aastal #javascript #fullstack //t.co/A1TsFaDguD

- Colby Fayock (@colbyfayock) 10. märts 2020

See aitab inimesi julgustada teie sisu kontrollima ja paratamatult teie sisule klikkima.

Mis juhtub, kui mul seda pole?

Enamik sotsiaalvõrgustikke püüab vaikimisi teie sisu eelvaate loomisel endast parima anda. See ei lähe enamasti nii hästi.

Võtame näiteks minu veebisaidi colbyfayock.com.

See haarab õigesti minu lehe pealkirja ja kirjelduse, kuid see pole voos kõige köitvama välimusega säuts.

Kontrastige seda ühe postituse eelvaatega ja näeme erinevat lugu.

Mis siis juhtub, kui teil pole avatud graafi silte? Midagi hullu ei juhtu, kuid te ei kasuta ära mõnda funktsiooni, mis aitab teie sisu silma paista lisaks paljude muude internetti postitatavate sisu kõrvalt.

Alustades avatud graafi põhitõdedest

Nelja põhilist avatud graafik silte, mis on vajalik iga lehekülje on og:title, og:type, og:imageja og:url. Need sildid peaksid olema iga teenitava lehe jaoks ainulaadsed, see tähendab, et teie avalehe märgendid peaksid kõik erinema teie blogipostituse artikli lehest.

Ehkki see peaks olema üsna lihtne, on siin toodud jaotus selle kohta, mida kõik sildid tähendavad:

  • og:title: Teie lehe pealkiri. See on tavaliselt sama mis teie veebilehe silt, kui te ei soovi seda teisiti esitada.
  • og:type: Teie veebisaidi tüüp. Selgitan rohkem järgmises jaotises, kuigi üldine „tüüp” on „veebisait”.
  • og:image: See peaks olema link pildile, mida soovite oma sisu esindada. See peaks olema kõrge eraldusvõimega pilt, mida sotsiaalvõrgustikud oma voogudes kasutavad.
  • og:url: See peaks olema praeguse lehe URL.

Kui lisate oma veebisaidile sildi, peaksite selle asetama koos kõigi muude metaandmetega. Kasutatav silt on silt ja peaks välja nägema selline muster:

Nii et kui ma peaksin oma veebisaidi, colbyfayock.com jaoks looma neli põhilist avatud graafi silti, võib see välja näha järgmine:

Veebisaidi avatud graafiku tüüp

Avatud graafiku protokollil on mõned variatsioonid selle veebisaidi tüübist, mida see toetab. See hõlmab selliseid tüüpe nagu veebisait, artikkel või video.

Avatud graafimärgendite seadistamisel peaksite saama aimu, milline tüüp on teie veebisaidi jaoks mõistlikum. Kui teie leht on keskendunud ühele videole, on tõenäoliselt mõttekas kasutada tüüpi „video”. Kui see on üldine veebisait, millel puudub konkreetne vertikaal, peaksite tõenäoliselt lihtsalt kasutama tüüpi „veebisait“.

Sarnaselt teistele on see iga lehe jaoks ainulaadne. Nii et kui teie koduleht on "veebisait", võib teil alati olla teine ​​leht, mille tüüp on "video".

Nii et kui ma peaksin oma veebisaidile looma avatud graafiku tüübi, võib see minu kodulehel välja näha järgmine:

Blogipostituse juurde navigeerimisel näeks see välja järgmine:

Kõige tavalisemad avatud graafi veebisaiditüübid leiate avatud graafi veebisaidilt: //ogp.me/#types

Mõned muud avatud graafi sildid, mida tasub lisada

Ehkki põhitõed on üldiselt korras, on siin veel mõned, mis tasuks lisada:

  • og:description: Teie lehe kirjeldus. Sarnaselt og:titlesellele võib see olla sama mis teie veebisaidi silt, kui te ei soovi seda teisiti esitada.
  • og:locale: Kui soovite oma silte lokaliseerida, oleks ilmselt mõttekas lisada lokaat. Vorming on see language_TERRITORY, kus vaikimisi on en_US.
  • og:site_name: Kogu veebisaidi nimi, kus teie sisu on. Kui olete blogipostituse lehel, võib teil olla titleselle blogipostituse pealkiri, kus see site_nameoleks teie blogi nimi.
  • og:video: Kas teil on video, mis toetab teie sisu? Siin on võimalus see lisada. Selle märgendi abil lisage oma videole link.

Need sildid lisatakse sama mustriga nagu varem:

Twitter ja muud sotsiaalmeedia võrgustikud, kasutades avatud graafikut

Enamik suhtlusvõrgustikke järgib avatud graafikastandardite põhitõdesid, kuid mõned neist sisaldavad ka oma laiendust, mis aitab oma ökosüsteemi välimust ja tunnet kohandada.

Näiteks Twitter võimaldab teil täpsustada twitter:card, millist tüüpi „kaarti” saate oma veebisaidi kuvamisel kasutada. Praegu hõlmavad nende kaarditüübid järgmist:

  • kokkuvõte
  • kokkuvõte_suur_pilt
  • rakendus
  • mängija

See aitab teil valida, kuidas linke nende voos kasutatakse. Näiteks kui valite summary_large_image, kuvab Twitter teie lingid suurte kõrglahutusega piltidega seni, kuni lisate selle og:imagemärgendis.

Siin on mõned kiired viited dokumentidele, kuidas kasutada avatud graafimärgendeid mõnes sotsiaalmeedia saidis:

  • 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=et

Pildid avatud graafikus

Kuigi oma pildi lisamisest, nagu see og:imagepeaks sageli olema piisav, võib mõnikord olla keeruline oma pildi õigesti kuvada. Kui teile tundub, et töötab hätta, avatud graafik standard sisaldab mõne pildi siltide nagu og:image:urlvs og:image:secure_urlsamuti og:image:widthja og:image:height.

Proovige veenduda, et järgite kõiki graafiku avatud dokumentatsiooni märkusi ja näiteid. Lisaks on mõnel suhtlusvõrgustikul pildinõuded. Näiteks nõuab Twitter suhtarvu 2: 1, minimaalse suurusega 300x157 ja maksimaalse suurusega 4096x4096, mis on alla 5 MB, ning JPG-, PNG-, WEBP- või GIF-vormingus.

Kui olete ummikus, proovige oma silte sotsiaalmeedia võrgustiku tööriistade abil, et teada saada, kas leiate probleemi üles.

Avatud graafimärgendite testimine

Õnneks pakuvad meie lemmik sotsiaalsed võrgustikud ka tööriistu, mis aitavad meil silte siluda. Kui olete veendunud, et teie silte kuvatakse teie veebisaidi lähtekoodis, saate eelvaadet vaadata, kuidas teie veebisait voos välja näeb.

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

Kaevamine edasi avatud graafide siltidesse

Kuigi enamik neist peaks hõlmama põhiveebisaiti, on veel paar silti, mis võivad aidata teil ja teie ettevõttel kogu sotsiaalsetes võrgustikes leida.

Kui olete huvitatud rohkem sukeldumisest, pakub dokumentatsioon suurepärast tööd kõigi saadaolevate siltide loendi pakkumisel.

//ogp.me/

Kas ma saaksin näite?

Kui otsite lihtsalt alustamiseks näite, peaksite ajaveebipostituse siltide seadistamisel jõudma järgmisele:

Kas otsite muid võimalusi oma sisu optimeerimiseks ja analüüsimiseks?

  • Kuidas lisada sotsiaalmeedia pilti oma Githubi projekti hoidlasse
  • Kuidas mõista Google Analyticsi ja oma veebisaidi liiklust
  • YouTube'i kanali toimivuse seadistamine ja jälgimine Google Analyticsi abil

Järgige mind, et saada rohkem Javascripti, UX-i ja muud huvitavat!

  • ? Jälgi mind Twitteris
  • ? ️ Telli Minu Youtube
  • ✉️ Registreeru minu uudiskirja saamiseks