Dacă înțelegeți deja ce sunt Facebook Open Graph și Twitter Cards, acest articol este nu vizează tine. Vă rog să îl transmiteți cuiva care nu înțelege ce sunt acestea.

Introducere

Conform Masabil, 52% din linkurile partajate de pe Twitter sunt articole și imagini, imaginile luând aproximativ 36% din plăcintă. În medie, oamenii împărtășesc despre 30 de milioane de imagini unice pe zi.

Cum sa evitati aspectul rusinos al site ului dvs pe Twitter
Din Masabil

Ai gâfâit?

Am facut.

Tweet-urile cu linkuri de imagine obțin de două ori rata de implicare a celor fără, spune Tampon.

Acum, aceste statistici sunt doar pentru Twitter. Statisticile combinate pentru alte platforme de socializare populare vă vor sufla mintea.

Linia de fund este: oamenii sunt ființe vizuale.

Dacă site-ul dvs. este distribuit pe rețelele de socializare și arată ca o tocană acră plictisitoare, angajamentul va fi redus. Distribuiți un link care apare frumos în cronologia oamenilor și este mai probabil să obțineți tipul de angajament pe care îl căutați.

Nu le luați în considerare atunci când vă construiți site-ul? Cu siguranță faci ceva greșit.

Care este exact aspectul rușinos?

Ei bine, nu toate legăturile sunt create egale. Luați în considerare grafica de mai jos. Ele reprezintă apariția a două linkuri diferite distribuite pe Twitter. Una este de la Medium, cealaltă de pe un site de-al meu.

Cum sa evitati aspectul rusinos al site ului dvs pe Twitter
Acesta este un articol mediu comun și cu siguranță arată bine!

Grafica anterioară are o imagine mare, titlu, descriere și, în general, arată bine.

1611069727 877 Cum sa evitati aspectul rusinos al site ului dvs pe Twitter
Iată propriul link către site-ul meu comun, iar acest lucru nu arată la fel de bine. Lucruri triste 🙁

Pur și simplu nu arată la fel de bine. Deci, ce face Medium sub capotă pentru ca adresele URL partajate să arate grozav?

Trecând de la zero la erou

Să adoptăm o abordare pas cu pas pentru a lua un site de la „aspect rușinos” la „extraordinar de minunat”.

Pentru considerațiile noastre, voi folosi unul dintre site-urile mele, TheReduxJSBooks.com, ca șobolan de laborator.

În primul rând, pentru a previzualiza modul în care va fi afișată previzualizarea link-ului dvs. pe Twitter și Facebook, ambele companii oferă depanatori în care lipiți în link și aruncați o privire pentru dvs.

Iată linkul pentru Debugger de partajare Facebook, și acest pentru Twitter.

Începând de la „zero”, să vedem ce TheReduxJSBooks.com arată ca atunci când este distribuit acum.

Iată ce avem pe facebook:

1611069727 604 Cum sa evitati aspectul rusinos al site ului dvs pe Twitter
Săracul arată atunci când este distribuit pe Facebook (FB). Așa cum a fost simulat pe depanatorul de partajare FB, FB a reușit să afișeze adresa URL și primul fragment de text pe site

Și asta pe Twitter:

1611069728 727 Cum sa evitati aspectul rusinos al site ului dvs pe Twitter
Foarte rău – nu sunt afișate previzualizări 🙁 Twitter nu scoate nicio informație de pe site. Trebuie să faci treaba.

Acestea nu par impresionante în acest moment, dar vom remedia asta în scurt timp.

Pentru a avea un anumit control asupra aspectului linkurilor dvs. atunci când sunt partajate, Facebook a dezvoltat tehnologia numită Deschideți graficul. Aproape că devine un standard în alte servicii și nu doar Facebook. Twitter le numește ceva diferit, Carduri Twitter.

Să vedem cum funcționează acestea.

Facebook Open Graph

1611069728 929 Cum sa evitati aspectul rusinos al site ului dvs pe Twitter

În termenii cei mai simpli, graficul deschis de Facebook are ca scop includerea anumitor meta etichete în capul dvs. html.

Aceste metadate vor fi citite de pe site-ul dvs. și afectează modul în care linkul dvs. este previzualizat atunci când este distribuit.

Acum, aruncați o privire asupra rezultatelor finale pe care le vom obține atunci când linkul este distribuit pe Facebook.

1611069729 746 Cum sa evitati aspectul rusinos al site ului dvs pe Twitter
Rezultatul final pe care îl obținem.

Ce este diferit acum?

1611069729 124 Cum sa evitati aspectul rusinos al site ului dvs pe Twitter
Iată ce este diferit.

Acum, arată frumos. Cu o imagine, un titlu și o descriere personalizate, controlați complet modul în care este afișată previzualizarea linkului.

Acum, iată codul care a generat previzualizarea pe care o vedeți mai sus:

<!-- Facebook Opengraph -->
<meta property="og:url" content="https://thereduxjsbooks.com" />
<meta property="og:type" content="website" />
<meta property="og:title" content="The ReduxJS Books" />
<meta property="og:description" content="What you ar about to view is a complete guide to mastering Redux from total novice to badass, and with every skill level catered for. Ready?"/>

<meta property="og:image" content="https://thereduxjsbooks.com/images/redux-trio-1200x630.png" />
<meta property="og:image:alt" content="3 books on ReduxJS. A sequel that takes you from beginner to pro." />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Știu că se simte mult cod, dar nu este.

Acestea sunt plasate în capul tău html pagină. De exemplu

<head>
   <!-- put them here -->
</head>

Acum, să trecem peste fiecare Open Graph meta etichetați unul după altul.

Iată primul:

<meta property="og:url" content="https://thereduxjsbooks.com" />

Ceea ce aveți acolo este un meta etichetă cu două atribute, property și content.

property definește proprietate a metaetichetei în cauză. În acest caz, are valoarea, og:url.

După cum probabil ați ghicit, og este scurt pentru Open Graph și url denotă că acest lucru descrie url a linkului partajat.content apoi deține valoarea pentru url, adică „https://thereduxjsbooks.com”.

A fost ușor.

Acum, același lucru este valabil și pentru type, title, și description Etichete. Le vezi?

1611069730 22 Cum sa evitati aspectul rusinos al site ului dvs pe Twitter
Etichetele de tip, titlu și descriere.

Următorul set de meta etichetele sunt cele care descriu previzualizarea imaginii. Primul are o proprietate, og:image, si content este adresa URL a imaginii.

<meta property="og:image" content="https://thereduxjsbooks.com/images/redux-trio-1200x630.png" />

Un lucru important de remarcat este că, pentru Facebook Open Graph, trebuie să furnizați width și height a imaginii – de preferință 1200px by 630px

Celelalte etichete descriu în continuare imaginea alt text, type, width , și height .

1611069730 257 Cum sa evitati aspectul rusinos al site ului dvs pe Twitter
Textul alternativ, tipul, lățimea și înălțimea imaginii!

Grozav! Acum știți cei mai importanți biți ai graficului deschis de Facebook.

Carduri Twitter

1611069731 651 Cum sa evitati aspectul rusinos al site ului dvs pe Twitter

La fel ca Facebook, aveți și control total asupra modului în care este afișat linkul dvs. atunci când este distribuit pe Twitter.

Dacă partajați linkul pe Twitter, presupunând că aveți deja setate metaetichetele Open Graph Facebook, veți obține de fapt o previzualizare.

Poate arăta cam așa:

1611069731 237 Cum sa evitati aspectul rusinos al site ului dvs pe Twitter
O descriere de bază este extrasă din metaetichetele Facebook Open Graph. Nu chiar așa de rău

Nu e rău, dar nici grozav.

Când am terminat, iată ce vom avea pe Twitter:

1611069732 792 Cum sa evitati aspectul rusinos al site ului dvs pe Twitter
Rezultatul mai bun de urmărit pe Twitter.

După cum puteți vedea, imaginea de previzualizare este mult mai mare, iar descrierea nu este la fel de lungă. Facebook ia mai multe caractere – dar nu Twitter.

Deci, iată etichetele de bază de care aveți nevoie.

<!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:image" content="https://thereduxjsbooks.com/images/redux-trio-560x300.png" />
    <meta name="twitter:image:alt" content="3 books on ReduxJS. A sequel that takes you from beginner to pro." />
    <meta name="twitter:description" content="For every book you buy, we will send a free copy to a developer in India, Nigeria, and Tunisia who can't afford the cost."
    />

Simplu!

Primul meta eticheta este super important.

<meta name="twitter:card" content="summary_large_image" />

Spre deosebire de Facebook Open Graph cu property și content atribute, utilizarea cardurilor Twitter name și content atribute.

Aici, numele este twitter:card și conținutul, summary_large_image. Aceasta descrie tipul de card Twitter pe care îl doriți. Există multe tipuri diferite de carduri Twitter disponibile, dar summary_large_image vă oferă previzualizarea mare a imaginii pe care ați văzut-o mai devreme.

Spre deosebire de Facebook, da nu trebuie să descriu imaginea width și height

Doar având numele, twitter:image și content Adresa URL va funcționa!

<meta name="twitter:image" content="https://thereduxjsbooks.com/images/redux-trio-560x300.png" />

În cele din urmă, includeți doar imaginea alt text și un text mai scurt description pentru Twitter.

<meta name="twitter:image:alt" content="3 books on ReduxJS. A sequel that takes you from beginner to pro." />
<meta name="twitter:description" content="For every book you buy, we will send a free copy to a developer in India, Nigeria, and Tunisia who can't afford the cost."
''  />

Și asta este!

Ce este și mai frumos este că configurarea acestei setări înseamnă că alte servicii pot căuta în mod egal aceste metadate și vă pot afișa legăturile frumos!

Iată o previzualizare a momentului în care linkul este distribuit pe Slack.

1611069732 376 Cum sa evitati aspectul rusinos al site ului dvs pe Twitter
Același link distribuit pe Slack. Arata bine!

Slack este doar unul dintre multele servicii care onorează tehnologia Facebook Open Graph și Twitter Card.

Concluzie

Am omis multe informații pentru a menține acest articol scurt. Pentru mai multe informații tehnice, asigurați-vă că consultați documentele oficiale pentru ambele Facebook Open Graph și Carduri Twitter.

Acum știți acele frumoase previzualizări de linkuri pe Twitter și Facebook nu a ajuns acolo prin magie.

Cineva a scris codul și acum știi cum.

Creați site-uri care arată super minunat atunci când sunt partajate pe Twitter și Facebook!