Cum să evitați aspectul rușinos al site-ului dvs. pe Twitter și Facebook

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.

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.

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

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:

Și asta pe Twitter:

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

Î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.

Ce este diferit acum?

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?

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 .

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

Carduri 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:

Nu e rău, dar nici grozav.

Când am terminat, iată ce vom avea 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.

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!