Bendrinimo kortelės: Open Graph žymos ir paveikslėlis

Kas yra nuorodos peržiūra

Kai kas nors pasidalija nuoroda socialiniame tinkle ar pokalbių programėlėje, platforma perskaito puslapį ir sukuria mažą kortelę: paveikslėlį, pavadinimą, trumpą tekstą ir domeną. Dauguma platformų tam skaito Open Graph protokolo žymas – meta elementus puslapio head dalyje. X, anksčiau Twitter, skaito ir savo žymas, prasidedančias twitter:. Kiekviena platforma kortelę kuria pati ir sprendžia, kiek teksto rodyti. Tu sprendi, ką puslapis pasako platformoms.

Pagrindinės žymos

Open Graph protokolas, paskelbtas ogp.me, nurodo keturias savybes, kurias turėtų turėti kiekvienas puslapis: og:title, og:type, og:image ir og:url. og:url yra kanoninis puslapio adresas. Neprivalomos, bet naudingos yra og:description, og:site_name ir og:locale – žymų kalba ir regionas, pavyzdžiui, de_DE.

<meta property="og:title" content="Vasaros išpardavimas: visi puodeliai pigiau">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/blog/summer-sale">
<meta property="og:image" content="https://example.com/img/summer-sale-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Šeši mėlyni puodeliai ant medinio stalo">
<meta property="og:description" content="Iki rugpjūčio 31 d.: mažesnės puodelių ir lėkščių kainos.">
<meta property="og:site_name" content="Pavyzdinė parduotuvė">
<meta name="twitter:card" content="summary_large_image">

Kiekvieną adresą rašyk visą, su https://. Protokolas adresą apibrėžia kaip URL, kuriame naudojamas http:// arba https://, todėl kelias, pavyzdžiui, /img/sale.jpg, nėra tinkama vertė. og:url turėtų sutapti su kanonine puslapio nuoroda. Jei žyma pasikartoja su skirtingomis vertėmis, protokolas pirmenybę teikia pirmajai.

Bendrinimo paveikslėlis

Dauguma peržiūrų paveikslėlį rodo plačiai. Paprastai rekomenduojamas maždaug 1,91 : 1 santykio paveikslėlis, pavyzdžiui, 1200 × 630 pikselių, kuris daugumoje kortelių tilpsta neapkarpytas. Kvadratiniai paveikslėliai dažnai apkarpomi viršuje ir apačioje, todėl svarbų turinį laikyk viduryje. Google Discover atveju Google rekomenduoja bent 1200 pikselių pločio paveikslėlius, didelę peržiūrą, leidžiamą nustatymu max-image-preview:large, ir paveikslėlį, nurodytą su og:image arba schema.org žymėjimu. Google taip pat pataria nenaudoti bendrinių paveikslėlių, pavyzdžiui, svetainės logotipo.

og:image:width ir og:image:height nurodo paveikslėlio dydį pikseliais. og:image:alt aprašo, kas yra paveikslėlyje, tai nėra paveikslėlio aprašas po juo. Protokole sakoma, kad puslapis su og:image taip pat turėtų nurodyti og:image:alt.

Pavadinimas ir aprašymas

og:title gali skirtis nuo title elemento. Jame nereikia svetainės pavadinimo, nes jį perduoda og:site_name. Platformos ilgus tekstus nukerpa savo nustatytu ilgiu, todėl svarbiausius žodžius rašyk pirmiausia. Open Graph žymos svarbios ir už socialinių tinklų ribų. Google og:title turinį nurodo kaip vieną iš pavadinimo nuorodų paieškos rezultatuose šaltinių, svetainės pavadinimui atsižvelgia į og:site_name, o og:image nurodo kaip vieną iš būdų pasirinkti pageidaujamą paveikslėlį.

Žymos X tinklui

Žyma twitter:card parenka kortelės tipą. Vertė summary_large_image prašo didelio, plataus paveikslėlio, summary – mažo. Jei tavo puslapyje jau yra Open Graph žymų, dažnai pakanka pridėti twitter:card. X kūrėjų puslapių šiam vadovui perskaityti nepavyko, todėl prieš pasikliaudamas(-a) kokia nors smulkmena, patikrink ten galiojančias taisykles.

Kiekvienam puslapiui – sava kortelė

Daugelis svetainių kiekvienam puslapiui nustato tą patį pavadinimą ir paveikslėlį, dažnai per temą. Tada kiekviena bendrinama nuoroda atrodo vienodai. Kiekvienam svarbiam puslapiui suteik savą og:title, og:description ir og:image: produkto puslapiui – produkto nuotrauką, straipsniui – jo pagrindinį paveikslėlį. og:type atveju protokolas, be kitų tipų, bendram puslapiui naudoja website, o straipsniui – article. Parduotuvės ar turinio valdymo sistema šias žymas gali užpildyti automatiškai iš kiekvieno puslapio pavadinimo, santraukos ir pagrindinio paveikslėlio. Po pakeitimo patikrink po vieną kiekvieno šablono puslapį.

Kodėl peržiūra nesikeičia

Daugelis platformų sukurtą kortelę išsaugo. Jei vėliau pakeiti paveikslėlį ar pavadinimą, žmonės dar kurį laiką gali matyti seną kortelę. Padeda naujas failo pavadinimas naujam paveikslėliui, nes tada platforma mato naują adresą. Kai kurios platformos siūlo įrankį, kuris puslapį nuskaito iš naujo.

Prieš bendrindamas(-a) puslapį

• Ar yra og:title, og:type, og:image ir og:url ir ar og:url yra kanoninis adresas?
• Ar kiekvienas adresas pilnas, su https://?
• Ar paveikslėlis pakankamai platus, ar jis įsikelia ir ar svarbus turinys yra viduryje?
• Ar nustatytos og:image:alt, og:image:width ir og:image:height?
• Ar yra twitter:card žyma ir ar pavadinimas pakankamai trumpas?

Dirbk su Do4U

„Bendrinimo kortelės patikra“ parodo, kaip atrodo puslapis, kai jo nuoroda bendrinama, ir patikrina už peržiūros esančias žymas. Įvesk vieną adresą. Do4U perskaito puslapį ir jo bendrinimo paveikslėlio pradžią. Kodas surenka Open Graph žymas, Twitter/X kortelės žymas ir atsargines vertes, t. y. pavadinimą, meta aprašymą ir pirmąjį paveikslėlį, taip pat kanoninę nuorodą ir kalbą. Iš failo jis nuskaito tikrąjį paveikslėlio formatą ir dydį ir palygina juos su žymomis. Gauni neutralią peržiūrą, visų žymų lentelę, radinius su trumpa priežastimi ir siūlomas žymas, kurias gali nukopijuoti. Žymos, kurias puslapis nustato tik su JavaScript, nematomos. DI nenaudojamas, patikra nemokama, su dienos riba.

Do4U randa užuominų, tu patikrini ir sprendi. Peržiūra yra neutralus eskizas: kaip platforma parodys nuorodą, sprendžia pati platforma.