Share
Niciun marcaj de site-uri web nu este creat egal. Ca atare, poate fi dificil pentru platformele de social media cum ar fi Facebook să găsească informațiile corecte din conținutul care trebuie afișat când pagina este partajată în Feed Feed.
Aici intră în joc Open Graph Protocol (OGP); o inițiativă dezvoltată de Facebook, care îi permite să recunoască cu ușurință conținutul web și să o afișeze frumos pe platforma lor.
Examinați următoarele:
Pagina redată în fluxul Facebook, fără meta tag-uri Open GraphAcest lucru ne oferă o previzualizare decentă a conținutului pe Feed-ul Facebook, cu titlul și extrasul. Dacă ne uităm la conținutul de pe pagina noastră de demo, sunt totuși câteva elemente care ar putea fi utilizate; cum ar fi imaginea și numele autorului. Facebook nu va alege aceste detalii fără ajutor.
Deci, să aruncăm o privire asupra modului în care putem folosi Open Graph pentru a îmbunătăți prezentarea conținutului pe Facebook.
Open Graph specifică un număr de etichete meta care definesc meta informația despre conținut, similar cu meta-tagurile pe care le feed-uri către motoarele de căutare în practicile SEO comune. Înainte de a adăuga aceste metaetichete, va trebui să setăm spațiul de nume XML pentru Open Graph în html.
Concepția spațiului de nume în HTML este similară cu alte limbi web; previne ambiguitatea asupra structurii datelor. Se referă la care vocabulari semantice sau sintaxă ar trebui să fie utilizate atunci când spațiul de nume este prezent în document. În cazul nostru, og namespace se referă la Open Graph Protocol, în timp ce pensiune completă namespace se referă la specificația Open Graph a propriului cont pe Facebook.
Alternativ, putem folosi prefix atribut pentru a defini aceste spații de nume. De exemplu:
Facebook necesită câteva etichete care să fie prezente în orice moment.
În primul rând, tipul de conținut specificat de og: Tip proprietate. Pe pagina de pornire, de obicei, setăm valoarea la website.
Și, de obicei, a stabilit-o la articol pentru conținut.
Pot fi de asemenea setate și alte valori posibile og: Tip meta tag care includ produs, loc, video.movie, books.book, și multe altele în cazul în care conținutul dvs. nu este un articol tipic ca un post sau știri de blog.
De exemplu:
URL - ul conținutului, specificat cu og: url proprietatea, trebuie să conțină o adresă URL absolută a paginii web fără șiruri sau hash-uri de interogare similare cu canonic legătură. În pagina de pornire, adresa URL este adresa URL a paginii de pornire:
URL-ul conținutului va fi puțin mai detaliat:
Titlul meta, specificat cu og: titlu proprietate, definește titlul pentru previzualizare. Valoarea titlului s-ar putea să nu corespundă întotdeauna titlului setat în titlu etichetă; puteți alege să modificați sau să abreviați titlul pentru partajare.
De exemplu, conținutul paginii noastre este legat de CSS și este îndreptățit în scopurile social media "Learn CSS: The Complete Guide". Cu toate acestea, titlul documentului este de fapt "Open Graph Protocol - Tuts +", astfel:
Nu există o limită de caractere definită pentru og: titlu, dar Facebook este cunoscut pentru a trunchia titlurile ocazional, în special pentru conținutul partajat în firul de comentariu în cazul în care spațiul este îngust.
Facebook trunchiază titlul și descrierea conținutului partajat pe Facebook Wall Meta descrierea specificată cu og: descriere tag, furnizează extrasul de conținut partajat.
Facebook nu stabilește un caracter definit sau o limită de cuvânt la descriere. Totuși, Facebook va trunchice descrierea atunci când consideră potrivit, astfel încât descrierea să fie scurtă și tentantă.
Imaginea meta este definită cu og: image, permițându-vă să reprezentați vizual conținutul, iar valoarea nu trebuie întotdeauna să fie o imagine în cadrul conținutului. Utilizați cea mai bună imagine pentru a atrage cititorii să facă clic și în cele din urmă să citească conținutul.
În plus față de adresa URL, puteți adăuga și etichete meta care specifică dimensiunea imaginii și tipul de imagine MIME. Aceste metaetichete sunt opționale, dar vă vor ajuta să ușurați volumul de lucru Facebook atunci când este vorba despre parsarea și cachearea imaginii.
Dimensiunea minimă a imaginii este limitată la 200x200 pixeli, dar Facebook recomandă dimensiunea imaginii să fie 1200x630 pixeli pentru cel mai bun rezultat posibil.
Imagine mică împotriva imaginii de dimensiuni mari pe Facebook.Poate doriți să luați în considerare și aspectul imaginii imaginii dvs.:
"Încercați să păstrați imaginile cât mai aproape de raportul de aspect 1.91: 1 posibil pentru a afișa imaginea completă în News Feed fără nici o decupare." - Facebook Developers
În Facebook, adăugând ID-ul aplicației Facebook cu fb: APP_ID meta tag este foarte încurajată. ID-ul aplicației va permite companiei Facebook să vă conecteze site-ul web și să genereze o imagine de ansamblu asupra modului în care utilizatorii interacționează cu site-ul web și cu conținutul dvs..
Puteți să o ignorați dacă nu aveți nevoie de analiză a site-ului dvs..
Câteva metaetichete sunt opționale, dar vor fi utile în anumite cazuri.
Numele site-ului este specificat cu og: SITE_NAME meta tag. Definește numele site-ului sau, mai exact, marca dvs. de site web. Este posibil ca marca sau numele site-ului web să nu fie întotdeauna numele dvs. de domeniu. Tuts +, în acest caz, este un exemplu bun.
În conformitate cu regulile noastre de branding, acest lucru ar trebui să fie scris ca Tuts + în loc de Tutsplus, totuși tutsplus.com este numele domeniului deoarece un domeniu nu poate conține + caracter, prin urmare:
Facebook nu afișează acest nume de site pe conținutul partajat. În schimb, veți găsi acest lucru afișat în notificare atunci când ați instalat un plug-in social Facebook, cum ar fi Comentariul Facebook pe site-ul dvs. Web.
Există un număr de etichete meta referitoare la tipul de conținut specificat. După cum se presupune, aceste etichete diferă în funcție de valoarea specificată în og: Tip meta tag. Aici avem un articol. Un articol pot fi însoțite de câteva meta-tag-uri de sprijin, cum ar fi articol: autor, articol: published_time, articol: editor, articol: secțiunea, și articol: tag.
Înainte de a include aceste metaetichete, va trebui să adăugăm un nou spațiu de nume care să indice specificația articolului Open Graph. Deci, în acest moment, avem trei spații de nume, și anume og, pensiune completă, și articol.
Potrivit Facebook, articol: autor meta-tag-ul ar trebui să conțină o adresă URL a profilului Facebook sau ID-ul autorului articolului.
Adăugarea mai multor adrese URL sau de identificare este permisă în cazul în care au contribuit mai mulți autori la articol.
Bacsis: dacă autorul nu are un cont Facebook, puteți înlocui articol: autor cu următoarele autor meta tag.
Facebook va afișa numele autorului în previzualizare, după cum urmează.
Deși Facebook sugerează includerea de etichete de articole, cum ar fi articol: published_date și articol: secțiunea ele nu adaugă nici o semnificație la momentul scrierii. Adică dacă nu aveți de-a face cu o pagină de articole instantanee.
După cum am menționat, aceste etichete depind în mare măsură de tipul de conținut. Dacă este tipul de conținut video.movie, tag-uri mai adecvate ar fi film: actor, Video: director, și film: durata in loc de articole: published_date.
Din acest motiv, voi lăsa acea parte din Open Graph să vă explorați. Facebook a furnizat materiale de referință cuprinzătoare pe aceste meta-etichete împreună cu câteva exemple de fragmente de cod.
Open Graph a fost adoptat de alte platforme sociale, cum ar fi Twitter (deși Twitter are, de asemenea, un markup propriu numit Twitter Cards), Pinterest, LinkedIn și Google+ într-o formă sau alta. În acest tutorial am analizat câteva meta tag-uri Open Graph și le-am folosit pentru a face previzualizarea conținutului mai convingătoare.
În cele din urmă, dacă descoperiți că conținutul dvs. nu este redat așa cum era de așteptat, utilizați instrumentul Debugger pentru partajarea Facebook pentru a afla ce este în neregulă cu marcarea.
Accentsconagua