Share
De opmaak van twee websites is niet hetzelfde. Als zodanig kan het voor sociale mediaplatforms zoals Facebook moeilijk zijn om de juiste informatie te vinden in de inhoud die moet worden weergegeven wanneer de pagina wordt gedeeld op de nieuwsfeed.
Dat is waar het Open Graph Protocol (OGP) in het spel komt; een initiatief ontwikkeld door Facebook waarmee het webinhoud eenvoudig kan herkennen en mooi weergeven op hun platform.
Bestudeer het volgende:
Pagina weergegeven in Facebook-feed, zonder Open Graph-metatagsDit geeft ons een degelijke inhoudsvoorvertoning op de Facebook-feed, met zowel de titel als het uittreksel. Als we echter naar de inhoud op onze demopagina kijken, zijn er nog een paar elementen die kunnen worden gebruikt; zoals de afbeelding en de naam van de auteur. Facebook haalt deze gegevens niet zonder hulp op.
Laten we dus eens kijken hoe we Open Graph kunnen gebruiken om onze inhoudspresentatie op Facebook te verbeteren.
Open Graph specificeert een aantal metatags die meta-informatie over de inhoud definiëren, vergelijkbaar met de metatags die we in veelgebruikte SEO-praktijken aan zoekmachines leveren. Voordat we deze metatags toevoegen, moeten we de XML-naamruimte voor Open grafiek instellen in de html.
De naamruimte-conceptie in HTML is vergelijkbaar met andere webtalen; het voorkomt dubbelzinnigheid op de datastructuur. Het verwijst naar welke semantische vocabulaires of syntaxis moeten worden gebruikt wanneer de naamruimte in het document aanwezig is. In ons geval is de og naamruimte verwijst naar het Open Graph Protocol, terwijl de fb naamruimte verwijst naar Facebook-eigen Open Graph-specificatie.
Als alternatief kunnen we de voorvoegsel attribuut om deze naamruimten te definiëren. Bijvoorbeeld:
Facebook vereist dat er altijd een paar tags aanwezig zijn.
Ten eerste, het inhoudstype, gespecificeerd door de og: soort eigendom. Op de startpagina stellen we meestal de waarde in op website.
En meestal ingesteld op artikel voor de inhoud.
Er kunnen ook een aantal andere mogelijke waarden worden ingesteld og: soort metatag die omvat artikel, plaats, video.movie, books.book, en nog veel meer als uw inhoud geen typisch artikel is zoals een blogpost of nieuws.
Bijvoorbeeld:
De inhoud-URL, opgegeven met de og: url eigenschap, must bevat een absolute URL van de webpagina zonder queryreeksen of hashes, vergelijkbaar met de kanoniek link. Op de startpagina is de URL de startpagina-URL:
De content-URL zal iets gedetailleerder zijn:
De metatitel, gespecificeerd met de og: title eigenschap, definieert de titel voor het voorbeeld. De waarde van de titel komt mogelijk niet altijd overeen met de titel die is ingesteld in de titel label; je kunt ervoor kiezen om de titel voor delen te wijzigen of af te korten.
De inhoud van onze pagina gaat bijvoorbeeld over CSS en heeft recht op sociale media "Learn CSS: The Complete Guide". De documenttitel is echter eigenlijk "Open Graph Protocol - Tuts +", dus:
Er is geen gedefinieerde tekenlimiet voor de og: title, maar Facebook staat erom bekend titels af en toe af te kappen, met name voor inhoud die wordt gedeeld in de commentaarthread, waar de ruimte smal is.
Facebook kapt de titel en beschrijving van de gedeelde inhoud op Facebook Wall af De metabeschrijving, gespecificeerd met de og: beschrijving tag, geeft het gedeelde inhoudsfragment.
Facebook stelt geen gedefinieerd teken of woordlimiet in voor de beschrijving. Toch zal Facebook de beschrijving afbreken wanneer dit nodig lijkt, dus houd de beschrijving kort en aanlokkelijk.
De metabeeld wordt gedefinieerd met og: image, zodat u de inhoud visueel kunt weergeven en de waarde hoeft niet altijd een afbeelding binnen de inhoud te zijn. Gebruik de beste afbeelding om lezers te verleiden om te klikken en uiteindelijk de inhoud te lezen.
Naast de URL kunt u ook de meta-tags toevoegen die de afbeeldingsgrootte en het afbeelding MIME-type opgeven. Deze metatags zijn optioneel, maar zullen de werkbelasting van Facebook helpen verminderen als het gaat om het parseren en cachen van de afbeelding.
De minimale afbeeldingsgrootte is begrensd op 200x200 pixels, maar Facebook beveelt aan dat de afbeeldingsgrootte 1200x630 pixels is voor de best mogelijke uitkomst.
Klein versus groot beeld in gedeelde content van Facebook.Misschien wilt u ook de beeldverhouding van uw afbeelding overwegen:
"Probeer uw afbeeldingen zo dicht mogelijk bij de beeldverhouding van 1,91: 1 te houden om de volledige afbeelding in de nieuwsfeed te tonen zonder bij te snijden." - Facebook Developers
Binnen Facebook, het toevoegen van de Facebook-app-ID met fb: APP_ID metatag wordt sterk aangemoedigd. Met de app-ID kan Facebook uw website koppelen en een uitgebreid overzicht genereren van hoe gebruikers omgaan met uw website en inhoud.
U mag het negeren als het niet nodig is om uw website te analyseren.
Een paar metatags zijn optioneel, maar zullen in bepaalde gevallen nuttig zijn.
De sitenaam wordt gespecificeerd met de og: site_name metatag. Het definieert de naam van de website, of beter gezegd uw websitemerk. Het merk of de naam van de website is misschien niet altijd uw domeinnaam. Tuts + is in dit geval een goed voorbeeld.
Volgens onze huisstijlrichtlijnen zou dit nog moeten worden geschreven als Tuts + in plaats van Tutsplus tutsplus.com is de domeinnaam, omdat een domein het bestand niet kan bevatten + karakter, vandaar:
Facebook geeft deze sitenaam niet weer op de gedeelde inhoud. In plaats daarvan zul je het in de melding zien staan wanneer je een Facebook Social Plugin zoals Facebook Comment op je website hebt geïnstalleerd.
Er zijn een aantal meta-tags gerelateerd aan het opgegeven inhoudstype. Zoals geïmpliceerd, verschillen deze tags afhankelijk van de waarde die is opgegeven in og: soort metatag. Hier hebben we een artikel. Een artikel kan gepaard gaan met een paar ondersteunende metatags zoals artikel: auteur, artikel: published_time, artikel: uitgever, artikel: sectie, en artikel: tag.
Voordat we deze metatags toevoegen, moeten we een nieuwe naamruimte toevoegen die verwijst naar de specificatie Open Graph-artikel. Dus op dit moment hebben we drie namespaces namelijk og, fb, en artikel.
Volgens Facebook, de artikel: auteur metatag moet een Facebook-profiel-URL of de ID van de auteur van het artikel bevatten.
Het toevoegen van meer dan één URL of ID is toegestaan voor het geval meerdere auteurs hebben bijgedragen aan het artikel.
Tip: als de auteur geen Facebook-account heeft, kunt u deze vervangen artikel: auteur met het volgende schrijver metatag.
Facebook geeft de auteursnaam in het voorbeeld als volgt weer.
Hoewel Facebook suggereert dat we artikel tags zoals artikel: published_date en artikel: sectie ze geven geen enkele betekenis op het moment van schrijven. Dat wil zeggen, tenzij u te maken hebt met een Instant Article-pagina.
Zoals vermeld, zijn deze tags grotendeels afhankelijk van uw inhoudstype. Als het inhoudstype is video.movie, meer geschikte tags zouden zijn video: acteur, video: director, en video: duration in plaats van de artikelen: published_date.
Om die reden zal ik dat deel van Open Graph aan jou overlaten om te verkennen. Facebook heeft uitgebreid referentiemateriaal over deze metatags verstrekt, samen met enkele voorbeelden van codefragmenten.
Open Graph is inmiddels overgenomen door andere social-mediaplatforms zoals Twitter (hoewel Twitter ook zijn eigen merkopmaak genaamd Twitter Cards heeft), Pinterest, LinkedIn en Google+ in een of andere vorm. In deze zelfstudie hebben we een aantal Open Graph-metatags bekeken en hebben we deze gebruikt om onze inhoudsvoorproef aantrekkelijker te maken.
Als u tot slot vindt dat uw inhoud niet wordt weergegeven zoals verwacht, gebruikt u de Debugger voor het delen van Facebook om te achterhalen wat er mis is met de markup.
Accentsconagua