Kas yra „Open Graph“ ir kaip jį naudoti savo svetainėje?

Turinio kūrimas ir svetainės palaikymas gali užtrukti daug laiko. Kaip galime įsitikinti, kad mūsų turinys išsiskiria, kai mes dalijamės socialiniuose kanaluose internete?

  • Kas yra „Open Graph“?
  • Kodėl man to reikia?
  • Kas atsitiks, jei aš jo neturiu?
  • Pradedant atvirojo grafo pagrindais
  • Svetainės atviro diagramos tipas
  • Keletas kitų atvirų diagramų žymių, kurias verta pridėti
  • „Twitter“ ir kiti socialinės žiniasklaidos tinklai, naudojant atvirą diagramą
  • Vaizdai atvirame grafike
  • Testuojamos jūsų atviros diagramos žymos
  • Ar galiu gauti pavyzdį?

Kas yra „Open Graph“?

„Open Graph“ yra interneto protokolas, kurį iš pradžių sukūrė „Facebook“, siekdamas standartizuoti metaduomenų naudojimą tinklalapyje, kad būtų parodytas puslapio turinys.

Joje galite pateikti išsamią informaciją, pavyzdžiui, puslapio pavadinimą arba tokią pat, kaip vaizdo įrašo trukmė. Visi šie kūriniai sutampa ir sudaro kiekvieno atskiro interneto puslapio vaizdą.

Kodėl man to reikia?

Interneto turinys paprastai kuriamas turint bent vieną tikslą - pasidalinti juo su kitais. Tai nebūtinai turi reikšmės, jei jūs jį siunčiate tik vienam draugui, bet jei norite juo pasidalinti arba norite, kad jis būtų bendrinamas bet kuriame socialiniame tinkle ar programoje, kurioje naudojamos gausios peržiūros, norėsite, kad ši peržiūra būtų tokia pat efektyvi kaip įmanoma.

Kaip tapti pilno tinklo kūrėju 2020 m. #Javascript #fullstack //t.co/A1TsFaDguD

- Colby Fayock (@ colbyfayock) 2020 m. Kovo 10 d

Tai padės paskatinti žmones patikrinti jūsų turinį ir neišvengiamai spustelėti jūsų turinį.

Kas atsitiks, jei aš jo neturiu?

Pagal numatytuosius nustatymus dauguma socialinių tinklų bandys dėti visas pastangas kurdami jūsų turinio peržiūrą. Tai dažniausiai ne taip gerai.

Paimkime, pavyzdžiui, mano svetainę colbyfayock.com.

Jis teisingai sugriebia mano puslapio pavadinimą ir aprašą, tačiau tai nėra labiausiai viliojančiai atrodantis tviterio kanalas.

Palyginkite su vieno įrašo peržiūra ir pamatysime kitą istoriją.

Taigi, kas atsitiks, jei neturite atvirų diagramų žymių? Nieko blogo nenutiks, tačiau jūs nepasinaudosite kai kuriomis funkcijomis, kurios padeda jūsų turiniui išsiskirti šalia daugybės kitų internete skelbiamų turinių.

Pradedant atvirojo grafo pagrindais

Keturi pagrindiniai atviro grafikas žodžius, kurie reikalingi kiekvienam puslapyje yra og:title, og:type, og:image, ir og:url. Šios žymos turėtų būti unikalios kiekvienam jūsų aptarnaujamam puslapiui, vadinasi, visos jūsų pagrindinio puslapio žymos turėtų skirtis nuo jūsų tinklaraščio įrašo straipsnio puslapio.

Nors tai turėtų būti gana paprasta, pateikiame kiekvieno žymos suskirstymą:

  • og:title: Jūsų puslapio pavadinimas. Paprastai tai yra tas pats, kas jūsų tinklalapio žyma, nebent norėtumėte ją pateikti kitaip.
  • og:type: Turimos svetainės „tipas“. Daugiau paaiškinsiu kitame skyriuje, nors bendras „tipas“ yra „svetainė“.
  • og:image: Tai turėtų būti nuoroda į vaizdą, kurį norite vaizduoti savo turinį. Tai turėtų būti didelės raiškos vaizdas, kurį socialiniai tinklai naudos savo sklaidos kanaluose.
  • og:url: Tai turėtų būti dabartinio puslapio URL.

Įdėdami žymą į savo svetainę, turėtumėte ją įdėti kartu su kitais metaduomenimis. Naudojama žyma bus žyma ir turėtų atrodyti taip:

Taigi, jei savo svetainei, colbyfayock.com, norėčiau sukurti keturias pagrindines atviro grafiko žymes, tai gali atrodyti taip:

Svetainės atviro diagramos tipas

Atviro grafiko protokole yra keletas palaikomų svetainių „tipo“ variantų. Tai apima svetaines, straipsnius ar vaizdo įrašus.

Nustatydami atvirų diagramų žymas, turėsite įsivaizduoti, kuris tipas bus prasmingesnis jūsų svetainei. Jei jūsų puslapis sutelktas į vieną vaizdo įrašą, tikriausiai prasminga naudoti „video“ tipą. Jei tai yra bendra svetainė, kurioje nėra konkrečios vertikalės, tikriausiai norėtumėte naudoti tipą „svetainė“.

Panašus į kitus, tai unikalus kiekviename puslapyje. Taigi, jei jūsų pagrindinis puslapis yra „svetainė“, visada galite turėti kitą „video“ tipo puslapį.

Taigi, jei norėčiau sukurti atvirą diagramos tipą savo svetainei, mano pagrindiniame puslapyje tai gali atrodyti taip:

Naršant į tinklaraščio įrašą tai atrodytų taip:

Dažniausiai pasitaikančius atvirų diagramų svetainių tipus galite rasti atvirojo grafiko tinklalapyje: //ogp.me/#types

Keletas kitų atvirų diagramų žymių, kurias verta pridėti

Nors jums paprastai viskas gerai su pagrindais, čia yra dar keletas dalykų, kuriuos būtų verta pridėti:

  • og:description: Jūsų puslapio aprašymas. Panašiai kaip og:titletai gali būti tas pats, kas jūsų svetainės žyma, nebent norėtumėte ją pateikti kitaip.
  • og:locale: Jei norite lokalizuoti savo žymas, tikriausiai būtų prasminga įtraukti lokalę. Formatas yra language_TERRITORYten, kur numatytasis en_US.
  • og:site_name: Visos svetainės, kurioje yra jūsų turinys, pavadinimas. Jei esate tinklaraščio įrašų puslapyje, galbūt titlenaudojate to tinklaraščio įrašo pavadinimą, kur site_namebūtų jūsų tinklaraščio pavadinimas.
  • og:video: Ar turite vaizdo įrašą, palaikantį jūsų turinį? Čia yra galimybė jį įtraukti. Pridėkite nuorodą prie savo vaizdo įrašo naudodami šią žymą.

Šios žymos bus pridėtos pagal tą patį modelį kaip ir anksčiau:

„Twitter“ ir kiti socialinės žiniasklaidos tinklai, naudojant atvirą diagramą

Dauguma socialinių tinklų laikosi atvirų diagramų standartų pagrindų, tačiau keli iš jų taip pat turi savo plėtinį, kuris padės pritaikyti savo ekosistemos išvaizdą ir jausmą.

Pavyzdžiui, „Twitter“ leidžia jums nurodyti twitter:card, kokio tipo „kortelę“ galite naudoti, kai jie rodo jūsų svetainę. Šiuo metu jų kortelių tipai yra šie:

  • santrauka
  • santrauka_didelis_vaizdas
  • programa
  • grotuvas

Tai padės pasirinkti, kaip nuorodos bus naudojamos jų sklaidos kanale. summary_large_imagePavyzdžiui, jei pasirinksite , „Twitter“ parodys jūsų nuorodas su dideliais didelės raiškos vaizdais, jei tai nurodysite og:imagežymoje.

Čia pateikiamos kelios greitos nuorodos į dokumentaciją, kaip naudoti atvirų diagramų žymas kai kuriose socialinės žiniasklaidos svetainėse:

  • „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=en

Vaizdai atvirame grafike

Pridedant vaizdą taip, kaip og:imagedažnai turėtų pakakti, kartais gali būti sudėtinga, kad vaizdas būtų teisingai parodytas. Jei atrodo, kad kyla problemų, į atvirojo grafiko standartą įtraukiamos kelios vaizdų žymos, pvz., „ og:image:urlVs“ og:image:secure_url, taip pat og:image:widthir og:image:height.

Pabandykite įsitikinti, kad laikotės visų pastabų ir pavyzdžių, pateiktų atvirojo diagramos dokumentacijoje. Be to, kai kurie socialiniai tinklai turi įvaizdžio reikalavimus. Pavyzdžiui, „Twitter“ reikalingas santykis 2: 1, mažiausias dydis 300x157, o didžiausias dydis 4096x4096, kuris yra mažesnis nei 5 MB, ir JPG, PNG, WEBP ar GIF formatas.

Jei esate užstrigęs, išbandykite savo žymas naudodamiesi socialinės žiniasklaidos tinklo įrankiais ir sužinokite, ar galite rasti problemą.

Testuojamos jūsų atviros diagramos žymos

Laimei, mūsų mėgstamiausi socialiniai tinklai taip pat teikia įrankius, padedančius mums derinti žymes. Įsitikinę, kad žymos iš tikrųjų rodomos jūsų svetainės šaltinio kode, galėsite peržiūrėti, kaip jūsų svetainė atrodys sklaidos kanale.

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

Toliau kasti į atvirų diagramų žymes

Nors dauguma jų turėtų apimti pagrindinę svetainę, yra dar kelios žymos, kurios gali padėti jums ir jūsų verslui rasti socialiniuose tinkluose.

Jei jus domina nardymas daugiau, dokumentai puikiai padeda pateikti visų galimų naudoti žymų sąrašą.

//ogp.me/

Ar galiu gauti pavyzdį?

Jei tiesiog ieškote pavyzdžio, kaip pradėti, štai ką turėtumėte baigti nustatydami tinklaraščio įrašo žymas:

Ieškote kitų būdų, kaip optimizuoti ir analizuoti savo turinį?

  • Kaip pridėti socialinės žiniasklaidos vaizdą į savo „Github“ projekto saugyklą
  • Kaip suvokti „Google Analytics“ ir srautą į savo svetainę
  • Kaip nustatyti ir stebėti „YouTube“ kanalo našumą naudojant „Google Analytics“

Sekite mane, norėdami sužinoti daugiau „Javascript“, „UX“ ir kitų įdomių dalykų!

  • ? Sekite mane „Twitter“
  • ? ️ Užsiprenumeruokite „My Youtube“
  • ✉️ Prisiregistruokite gauti mano naujienlaiškį