Share
Ingen to nettsteder 'oppsummering er opprettet like. Som sådan kan det være vanskelig for sosiale medier-plattformer som Facebook å finne riktig informasjon i innholdet som skal vises når siden deles på nyhetsstrømmen.
Det er her Open Graph Protocol (OGP) kommer inn i spill; et initiativ utviklet av Facebook som gjør det mulig å gjenkjenne webinnhold enkelt og vise det pent i plattformen.
Undersøk følgende:
Side gjengitt i Facebook-feed, uten Open Graph meta tagsDette gir oss et anstendig innholdsforhåndsvisning på Facebook Feed, med tittelen og utdraget. Hvis vi ser på innholdet på vår demoside, er det imidlertid noen flere elementer som kan benyttes; for eksempel bildet og forfatternavnet. Facebook vil ikke plukke opp disse detaljene uten hjelp.
Så la oss ta en titt på hvordan vi kan bruke Open Graph til å forbedre innholdspresentasjonen på Facebook.
Open Graph angir en rekke metakoder som definerer metainformasjon av innholdet, ligner på metatakene som vi mater til søkemotorer i vanlige SEO-praksis. Før vi legger til disse metataggerne, må vi sette XML-navneglasset for åpen graf i html.
Navneavstandens oppfattelse i HTML ligner på andre webspråk; det forhindrer tvetydighet på datastrukturen. Det refererer til hvilke semantiske vokabularer eller syntaks skal brukes når navnsområdet er til stede i dokumentet. I vårt tilfelle, og namespace refererer til Open Graph Protocol, mens fb namespace refererer til Facebook-egen Open Graph-spesifikasjon.
Alternativt kan vi bruke prefiks attributt til å definere disse navneområdene. For eksempel:
Facebook krever at noen få koder skal være til stede hele tiden.
Først, innholdstypen, spesifisert av og: type eiendom. På hjemmesiden setter vi vanligvis verdien til nettsted.
Og sett det ofte til artikkel for innholdet.
En rekke andre mulige verdier kan også settes inn og: type metakode som inkluderer produkt, sted, video.movie, books.book, og mange flere hvis innholdet ditt ikke er en vanlig artikkel som et blogginnlegg eller en nyhet.
For eksempel:
Nettadressen til nettadressen, spesifisert med og: url eiendom, må inneholde en absolutt webadresse for nettsiden uten søkestrenger eller hashes, som ligner på kanonisk link. På hjemmesiden er nettadressen hjemmesiden URL:
Nettadressen til innholdet vil være litt mer detaljert:
Metatittelen, spesifisert med og: tittel eiendom, definerer tittelen for forhåndsvisningen. Verdien av tittelen stemmer kanskje ikke alltid med tittelen som er angitt i tittel stikkord; Du kan velge å endre eller forkorte tittelen for deling.
For eksempel, innholdet på vår side handler om CSS og har rett til formål med sosiale medier "Lær CSS: The Complete Guide". Dokumenttittelen er imidlertid "Open Graph Protocol - Tuts +", og dermed:
Det er ikke en definert tegngrense for og: tittel, men Facebook er kjent for å kutte titler til tider, spesielt for innhold som deles i kommentar-tråden der plassen er smal.
Facebook avkorter tittel og beskrivelse av det delte innholdet på Facebook Wall Meta beskrivelsen, spesifisert med og: description tagger, gir det utdragte delte innholdet.
Facebook angir ikke en definert tegn- eller ordgrense til beskrivelsen. Likevel vil Facebook avkorte beskrivelsen når den passer, så hold beskrivelsen kort og fristende.
Meta-bildet er definert med og: image, slik at du visuelt representerer innholdet, og verdien trenger ikke alltid å være et bilde i innholdet. Bruk det beste bildet for å lokke leserne til å klikke og til slutt lese innholdet.
I tillegg til nettadressen kan du også legge til i metakoder som angir bildestørrelsen og bildet MIME-typen. Disse metatagger er valgfrie, men vil bidra til å lette Facebook arbeidsbelastning når det gjelder å parsing og caching bildet.
Den minste bildestørrelsen er på 200 x 200 piksler, men Facebook anbefaler at bildestørrelsen er 1200x630 piksler for best mulig utfall.
Liten vs stort bilde i Facebook delt innhold.Du kan også vurdere aspektforholdet til bildet ditt også:
"Prøv å holde bildene så nær 1,91: 1 som mulig for å vise det fulle bildet i Nyhetsfeed uten beskjæring." - Facebook Utviklere
Innenfor Facebook, legger du til Facebook App ID med fb: APP_ID meta tag er svært oppmuntret. App ID vil tillate Facebook å knytte nettstedet ditt og generere en omfattende oversikt over hvordan brukere samhandler med nettstedet ditt og innholdet.
Du kan ignorere det, hvis det ikke er nødvendig å analysere nettstedet ditt.
Noen få metakoder er valgfrie, men vil komme til bruk i visse tilfeller.
Nettstedet er spesifisert med og: SITE_NAME metakode. Det definerer nettstedet navn, eller mer nøyaktig ditt nettsted merke. Nettstedet merke eller navn kan ikke alltid være ditt domenenavn. Tuts +, i dette tilfellet, er et godt eksempel.
I henhold til retningslinjene for merkevarebygging bør dette skrives som Tuts + i stedet for Tutsplus, enda tutsplus.com er domenenavnet siden et domene ikke kan inneholde + karakter, derfor:
Facebook viser ikke dette nettstednavnet på innholdet som deles. I stedet vil du finne det vist på varselet når du har installert en Facebook Social Plugin, som Facebook Kommentar på nettstedet ditt.
Det finnes en rekke metatags relatert til den angitte innholdstypen. Som underforstått, varierer disse kodene avhengig av verdien som er angitt i og: type metakode. Her har vi en artikkel. en artikkel kan være ledsaget av noen få støttende metakoder slik artikkel: forfatter, artikkel: published_time, artikkel: utgiveren, artikkel: seksjon, og artikkel: tag.
Før du inkluderer disse metatagger, må vi legge til et nytt navneområde som peker på spesifikasjonen for Open Graph Article. Så, på dette tidspunktet har vi tre navneområder, nemlig og, fb, og artikkel.
Ifølge Facebook, den artikkel: forfatter metakode skal inneholde en Facebook-profiladresse eller IDen til artikkelens forfatter.
Legge til mer enn en nettadresse eller ID er tillatt dersom flere forfattere bidro til artikkelen.
Tips: Hvis forfatteren ikke har en Facebook-konto, kan du erstatte artikkel: forfatter med følgende forfatter metakode.
Facebook vil vise forfatternavnet på forhåndsvisningen, som følger.
Selv om Facebook antyder at vi inkluderer artikkeltagger som artikkel: published_date og artikkel: seksjon de legger ikke til noen betydning når de skrives. Det vil si, med mindre du har å gjøre med en Instant Article-side.
Som nevnt, er disse kodene i stor grad avhengig av innholdstypen din. Hvis innholdstypen er video.movie, mer passende koder ville være video: skuespiller, video: regissør, og video: varighet i stedet for artikler: published_date.
Av den grunn vil jeg forlate den delen av Open Graph opp til deg for å utforske. Facebook har gitt omfattende referansemateriale på disse metakoder sammen med noen få eksempler på kodestykker.
Open Graph har siden blitt vedtatt av andre sosiale medier-plattformer som Twitter (selv om Twitter også har sin egen proprietære merking kalt Twitter Cards), Pinterest, LinkedIn og Google+ i en eller annen form. I denne opplæringen så vi på noen få åpne metatagger for grafikk og utnyttet dem for å gjøre innholdsforhåndsvisningen mer overbevisende.
Til slutt, hvis du finner innholdet ditt ikke gjengitt som forventet, bruk Facebook Sharing Debugger for å finne ut hva som er galt med merkingen.
Accentsconagua