Hvad er Open Graph, og hvordan kan jeg bruge det til mit websted?

Det kan tage meget tid at oprette indhold og vedligeholde et websted. Hvordan kan vi sikre os, at vores indhold skiller sig ud, når vi deles på sociale feeds på internettet?

  • Hvad er Open Graph?
  • Hvorfor har jeg brug for det?
  • Hvad sker der, hvis jeg ikke har det?
  • Startende med det grundlæggende i den åbne graf
  • Webstedets åbne graftype
  • Nogle andre åbne graf-tags, der er værd at tilføje
  • Twitter og andre sociale medianetværk ved hjælp af åben graf
  • Billeder i åben graf
  • Test af dine åbne graf-tags
  • Kan jeg få et eksempel?

Hvad er Open Graph?

Open Graph er en internetprotokol, der oprindeligt blev oprettet af Facebook for at standardisere brugen af ​​metadata på en webside for at repræsentere indholdet på en side.

Inden for det kan du give detaljer så enkle som titlen på en side eller så specifikke som varigheden af ​​en video. Disse stykker passer alle sammen for at danne en repræsentation af hver enkelt side på internettet.

Hvorfor har jeg brug for det?

Indhold på internettet oprettes typisk med mindst et mål i tankerne - at dele det med andre. Dette betyder ikke nødvendigvis noget, hvis du bare sender det til en ven, men hvis du vil dele det eller vil have det til at blive delt på et hvilket som helst socialt netværk eller app, der bruger rig forhåndsvisning, vil du gerne have, at forhåndsvisning er lige så effektiv som muligt.

Sådan bliver du en webstedsudvikler i fuld stak i 2020 #javascript #fullstack //t.co/A1TsFaDguD

- Colby Fayock (@colbyfayock) 10. marts 2020

Dette hjælper med at tilskynde folk til at tjekke dit indhold og uundgåeligt klikke videre til dit indhold.

Hvad sker der, hvis jeg ikke har det?

De fleste sociale netværk vil som standard forsøge at gøre deres bedste for at oprette en forhåndsvisning af dit indhold. Dette går oftere end ikke så godt.

Tag for eksempel min hjemmeside colbyfayock.com.

Det griber korrekt titlen på min side og beskrivelsen, men det er ikke den mest lokkende tweet i et feed.

Kontraster det med forhåndsvisning af et enkelt indlæg, og vi ser en anden historie.

Så hvad sker der, hvis du ikke har åbne graf-tags? Intet dårligt vil ske, men du udnytter ikke nogle af de funktioner, der hjælper med at få dit indhold til at skille sig ud ved siden af ​​de mange andre indhold, der bliver lagt ud på Internettet.

Startende med det grundlæggende i den åbne graf

De fire grundlæggende åbne graf-tags, der kræves for hver side og:title, og:typeer og:image,,, og og:url. Disse tags skal være unikke for hver side, du betjener, hvilket betyder, at din starts tags bør alle være forskellige fra din blogindlægs side.

Selvom det skal være ret ligetil, er her en oversigt over, hvad hver af tags betyder:

  • og:title: Titlen på din side. Dette er typisk det samme som din websides tag, medmindre du gerne vil præsentere det anderledes.
  • og:type: Den "type" websted, du har. Jeg forklarer mere i det næste afsnit, selvom en generisk "type" er "hjemmeside".
  • og:image: Dette skal være et link til et billede, som du gerne vil repræsentere dit indhold. Det skal være et billede i høj opløsning, som de sociale netværk bruger i deres feeds.
  • og:url: Dette skal være URL'en til den aktuelle side.

Når du placerer et tag på dit websted, skal du placere det sammen med andre metadata. Det anvendte mærke er et mærke og skal se ud som dette mønster:

Så hvis jeg skulle oprette et sæt fire grundlæggende åbne graf-tags til mit websted, colbyfayock.com, kan det se ud som:

Webstedets åbne graftype

Den åbne grafprotokol har et par variationer af den "type" webside, den understøtter. Dette inkluderer typer som hjemmeside, artikel eller video.

Når du opretter dine åbne grafkoder, vil du gerne have en idé om, hvilken type der giver mere mening for dit websted. Hvis din side er fokuseret på en enkelt video, giver det sandsynligvis mening at bruge typen "video". Hvis det er et generelt websted uden nogen specifik lodret, vil du sandsynligvis bare bruge typen “website”.

I lighed med de andre er dette unikt for hver side. Så hvis din startside er "hjemmeside", kan du altid have en anden side af typen "video".

Så hvis jeg oprettede en åben graftype til mit websted, kunne det se ud som følgende på min startside:

Når du navigerer til et blogindlæg, ser det ud som:

Du kan finde de mest almindelige websteder med åben graf på den åbne graf-webside: //ogp.me/#types

Nogle andre åbne graf-tags, der er værd at tilføje

Selvom du generelt har det godt med det grundlæggende, er der et par flere, der ville være værd at tilføje:

  • og:description: En beskrivelse af din side. På samme måde kan og:titledette være det samme som dit websteds tag, medmindre du gerne vil præsentere det anderledes.
  • og:locale: Hvis du vil lokalisere dine tags, ville det sandsynligvis være fornuftigt at medtage landestandard. Formatet er language_TERRITORY, hvor standard er en_US.
  • og:site_name: Navnet på det samlede websted, dit indhold er på. Hvis du er på en blogindlægsside, har du muligvis titlebrug af det blogindlægs titel, hvor det site_nameville være navnet på din blog.
  • og:video: Har du en video, der understøtter dit indhold? Her er en chance for at inkludere det. Tilføj et link til din video ved hjælp af dette tag.

Disse tags tilføjes i samme mønster som før:

Twitter og andre sociale medianetværk ved hjælp af åben graf

De fleste af de sociale netværk overholder det grundlæggende i åbne grafstandarder, men nogle få af dem inkluderer også deres egen udvidelse for at tilpasse udseendet og følelsen inden for deres økosystem.

Twitter giver dig for eksempel mulighed for at specificere twitter:card, hvilken type "kort" du kan bruge, når de viser dit websted. På dette tidspunkt inkluderer deres korttyper:

  • Resumé
  • resume_stør_billede
  • app
  • spiller

Dette hjælper dig med at vælge, hvordan dine links bruges i deres feed. Hvis du f.eks. Vælger summary_large_image, vil Twitter vise dine links med store billeder i høj opløsning, så længe du angiver det i og:imagetagget.

Her er nogle hurtige referencer til dokumentationen for, hvordan man bruger åbne graf-tags med nogle af de sociale mediesider:

  • Twitter: //developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started
  • Facebook: //developers.facebook.com/docs/sharing/webmasters/
  • Pinterest: //developers.pinterest.com/docs/rich-pins/overview/?
  • LinkedIn: //www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin?lang=en

Billeder i åben graf

Mens du tilføjer dit billede, som og:imagedet ofte skal være nok, kan det nogle gange være udfordrende at få dit billede til at vises korrekt. Hvis du ser ud til at løbe ind i problemer, inkluderer den åbne grafstandard et par billedkoder som og:image:urlvs og:image:secure_urlsamt og og:image:widthog og:image:height.

Prøv at sikre dig, at du følger alle noterne og eksemplerne i den åbne grafdokumentation. Derudover har nogle af de sociale netværk billedkrav. Twitter kræver for eksempel et forhold på 2: 1 med en minimumsstørrelse på 300x157 og en maksimumstørrelse på 4096x4096, der er under 5 MB og i JPG-, PNG-, WEBP- eller GIF-format.

Hvis du sidder fast, skal du teste dine tags ved hjælp af værktøjerne til det sociale medienetværk for at se, om du kan finde problemet.

Test af dine åbne graf-tags

Heldigvis giver vores foretrukne sociale netværk også værktøjer til at hjælpe os med at debugge vores tags. Når du først er sikker på, at dine tags faktisk vises i kildekoden på dit websted, kan du se et eksempel på, hvordan dit websted vil se ud i feedet.

  • Twitter: //cards-dev.twitter.com/validator
  • Facebook: //developers.facebook.com/tools/debug/
  • Pinterest: //developers.pinterest.com/tools/url-debugger/

Gravning videre i åbne graf tags

Mens de fleste af disse skal dække et grundlæggende websted, er der et par flere tags, der kan hjælpe dig og din virksomheds opdagelighed gennem sociale netværk.

Hvis du er interesseret i at dykke mere, gør dokumentationen et godt stykke arbejde med at give en liste over alle de tilgængelige tags, du kan bruge.

//ogp.me/

Kan jeg få et eksempel?

Hvis du bare leder efter et eksempel for at komme i gang, er det her, hvad du skal ende med, når du konfigurerer dine tags til et blogindlæg:

Leder du efter andre måder at optimere og analysere dit indhold på?

  • Sådan tilføjes et billede af sociale medier til dit Github-projektlager
  • Sådan får du mening om Google Analytics og trafikken til dit websted
  • Sådan opsættes og spores YouTube-kanalens ydeevne med Google Analytics

Følg mig for mere Javascript, UX og andre interessante ting!

  • ? Følg mig på Twitter
  • ? ️ Abonner på min Youtube
  • ✉️ Tilmeld dig mit nyhedsbrev