Share
Inga webbplatser för två webbplatser skapas lika. Som sådan kan det vara svårt för sociala medieplattformar som Facebook att hitta rätt information i innehållet som ska visas när sidan delas på nyhetsflödet.
Det är här Open Graph Protocol (OGP) kommer in i spel; ett initiativ utvecklat av Facebook som gör att det enkelt kan identifiera webbinnehåll och visa det snyggt inom sin plattform.
Undersök följande:
Sidan gjord i Facebook-flöde, utan Open Graph metataggarDetta ger oss en anständig innehållsförhandsgranskning på Facebook-flödet, med titeln såväl som utdraget. Om vi tittar på innehållet på vår demosida finns det dock några fler element som kan användas. till exempel bild och författarnamn. Facebook väljer inte dessa uppgifter utan hjälp.
Så låt oss ta en titt på hur vi kan använda Open Graph för att förbättra innehållspresentationen på Facebook.
Open Graph anger ett antal metataggar som definierar metadata av innehållet, liknar de metataggar som vi matar till sökmotorer i vanliga SEO-metoder. Innan vi lägger till dessa metataggar måste vi ange XML namnrymden för öppen graf i html.
Namnrymduppfattningen i HTML liknar andra webbspråk; det förhindrar tvetydighet i datastrukturen. Det hänvisar till vilka semantiska vokabularer eller syntax ska användas när namnrymden är närvarande i dokumentet. I vårt fall är og namespace refererar till Open Graph Protocol, medan fb namespace refererar till Facebook-egen Open Graph-specifikation.
Alternativt kan vi använda prefix attribut att definiera dessa namnområden. Till exempel:
Facebook kräver några taggar att vara närvarande hela tiden.
För det första innehållstypen, som anges av og: typ fast egendom. På hemsidan ställer vi vanligtvis värdet till hemsida.
Och brukar sätta det på artikel för innehållet.
Ett antal andra möjliga värden kan också ställas in og: typ metakod som inkluderar produkt, plats, video.movie, books.book, och många fler om ditt innehåll inte är en vanlig artikel som ett blogginlägg eller nyheter.
Till exempel:
Webbadressens innehåll, som anges med og: url egendom, måste innehålla en absolut webbadress för webbsidan utan frågesträngar eller hash, som liknar kanonisk länk. På hemsidan är webbadressen hemsidaadress:
Webbadressens innehåll kommer att vara lite mer detaljerad:
Metatiteln, specificerad med og: titel egendom, definierar titeln för förhandsvisningen. Värdet på titeln kanske inte alltid matchar titelsatsen i titel märka; du kan välja att ändra eller förkorta titeln för delning.
Till exempel innehållet på vår sida handlar om CSS och har rätt till sociala medier "Lär CSS: The Complete Guide". Dokumenttiteln är dock "Open Graph Protocol - Tuts +", sålunda:
Det finns ingen definierad teckengräns för og: titel, men Facebook är känt att avkorta titlar ibland, särskilt för innehåll som delas i kommentartråden där utrymmet är smalt.
Facebook avkortar titeln och beskrivningen av det delade innehållet på Facebook Wall Meta beskrivningen, specificerad med og: beskrivning tagg, tillhandahåller delat innehållsutdrag.
Facebook ställer inte in en definierad tecken- eller ordgräns i beskrivningen. Fortfarande kommer Facebook att styra beskrivningen när den passar, så håll beskrivningen kort och lockande.
Meta-bilden definieras med og: image, så att du visuellt kan representera innehållet, och värdet behöver inte alltid vara en bild inom innehållet. Använd den bästa bilden för att locka läsarna att klicka och läsa innehållet så småningom.
Utöver webbadressen kan du också lägga till metataggarna som anger bildstorlek och bild MIME-typ. Dessa metataggar är valfria men hjälper till med att lätta på Facebook-arbetsbelastningen när det gäller att analysera och cache bilden.
Minsta bildstorlek är begränsad till 200x200 pixlar, men Facebook rekommenderar att bildstorleken är 1200x630 pixlar för bästa resultat.
Liten mot stor bild i Facebook delat innehåll.Du kanske vill överväga bildförhållandet på din bild också:
"Försök att hålla dina bilder så nära bildformatet 1,91: 1 som möjligt för att visa hela bilden i nyhetsflödet utan att beskära." - Facebook-utvecklare
Inom Facebook lägger du till Facebook App ID med fb: APP_ID metakod uppmuntras mycket. App ID gör det möjligt för Facebook att länka din webbplats och skapa en övergripande översikt över hur användarna interagerar med din webbplats och innehåll.
Du kan ignorera det om det inte är nödvändigt att analysera din webbplats.
Några metataggar är valfria men kommer att vara användbara i vissa fall.
Webbplatsnamnet anges med og: SITE_NAME metakod. Det definierar webbplatsens namn, eller mer exakt ditt webbplats varumärke. Webbplatsens varumärke eller namn kanske inte alltid är ditt domännamn. Tuts + är i detta fall ett bra exempel.
Enligt våra varumärkesriktlinjer bör det skrivas som Tuts + istället för Tutsplus tutsplus.com är domännamnet eftersom en domän inte kan innehålla + karaktär, följaktligen:
Facebook visar inte detta sajtnamn på det delade innehållet. Istället hittar du det som visas i meddelandet när du har installerat en Facebook Social Plugin, som Facebook Kommentar på din webbplats.
Det finns ett antal metataggar relaterade till den angivna innehållstypen. Som underförstått skiljer sig dessa taggar beroende på det värde som anges i og: typ metakod. Här har vi en artikel. En artikel kan åtföljas av några stödjande metataggar Artikel: Författare, Artikel: published_time, Artikel: utgivare, Artikel: avsnitt, och Artikel: tagg.
Innan vi inkluderar dessa metataggar måste vi lägga till ett nytt namnrymd som pekar på specifikationen för Open Graph Article. Så, vid denna tidpunkt har vi tre namnområden nämligen og, fb, och artikel.
Enligt Facebook är det Artikel: Författare metakod ska innehålla en Facebook-profiladress eller artikeln för artikelns författare.
Lägga till mer än en webbadress eller ett ID är tillåtet om flera författare bidrog till artikeln.
Tips: Om författaren inte har ett Facebook-konto kan du ersätta Artikel: Författare med följande författare metakod.
Facebook kommer att visa författarnamnet i förhandsvisningen, enligt följande.
Även Facebook föreslår att vi inkluderar artikel taggar som Artikel: published_date och Artikel: avsnitt de lägger inte till någon betydelse vid skrivningstillfället. Det vill säga, om du inte hanterar en direktartikelsida.
Som nämnts beror dessa taggar i stor utsträckning på din innehållstyp. Om innehållstypen är video.movie, mer lämpliga taggar skulle vara video: skådespelare, video: director, och video: varaktighet istället för artiklar: published_date.
Av den anledningen kommer jag att lämna den delen av Open Graph upp till dig att utforska. Facebook har tillhandahållit omfattande referensmaterial på dessa metataggar tillsammans med några exempel på kodutdrag.
Open Graph har sedan dess antagits av andra sociala medieplattformar som Twitter (även om Twitter också har egen proprietär markering kallad Twitter Cards), Pinterest, LinkedIn och Google+ i en eller annan form. I den här handledningen tittade vi på några Open Graph-metataggar och utnyttjade dem för att göra innehållsförhandsvisningen mer övertygande.
Slutligen, om du hittar ditt innehåll inte görs som förväntat, använd Facebook Sharing Debugger för att ta reda på vad som är fel med markupen.
Accentsconagua