De essentiële meta-tags voor sociale media

Dezer dagen moedigt bijna elke website bezoekers aan om hun pagina’s te delen op sociale media. We hebben allemaal de alomtegenwoordige Facebook- en Twitter-pictogrammen gezien, die er gewoon om smeken om aangeklikt te worden. Dit is geen verrassing, want delen via sociale media, de incarnatie van mond-tot-mondreclame op internet, is een van de meest effectieve manieren voor bedrijven en individuen om bekendheid te verwerven.

Wanneer gebruikers ervoor kiezen deze links te delen, is het de taak van de webontwikkelaar om ervoor te zorgen dat de bijbehorende webpagina’s goed worden voorbereid, en dat is waar we nu naar zullen kijken. Facebook en Twitter zijn verreweg de populairste social media-platforms, dus laten we ons op die twee richten.

Delen op Facebook en Twitter

Facebook biedt ontwikkelaars verschillende opties over hoe een gedeelde webpagina in de tijdlijn verschijnt, afhankelijk van de inhoud van de website. Tenzij anders aangegeven, is elke website standaard van het type dat, toepasselijk, “website” heet, en dat is het voorbeeld dat we zullen gebruiken.

Laten we zeggen dat iemand de homepage van een fictief reisbedrijf heeft gedeeld – Facebook geeft het als volgt weer:

Twitter heeft ook meerdere manieren om gedeelde webpagina’s die in zijn feed verschijnen op te maken, maar we zullen kijken naar de manier die veel lijkt op het bovenstaande voorbeeld van Facebook, die Twitter de “Summary Card with Large Image” noemt:

Zoals we kunnen zien, bevat elk meerdere attributen van de gedeelde webpagina:

een prominente afbeelding en titel
een beschrijving
de domeinnaam

Eigendomsrecht <meta> Tags

Hoe specificeren we deze attributen? Met <meta> tags. Wanneer een link wordt gedeeld, scrapen zowel Facebook als Twitter de bijbehorende webpagina en lezen de <meta> tags om de juiste informatie weer te geven.

Facebook gebruikt <meta> tags door gebruik te maken van het Open Graph protocol, een classificatiesysteem voor webpagina’s dat verder gaat dan de <meta> tags die al in HTML5 zijn gedefinieerd. Een volledige lijst van beschikbare <meta>-tags is te vinden op de Open Graph-website. Er zijn er zoveel waaruit je kunt kiezen dat het enigszins intimiderend kan zijn, maar slechts vier zijn er eigenlijk nodig:

<meta property="og:title" content="European Travel Destinations"><meta property="og:description" content="Offering tour packages for individuals or groups."><meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg"><meta property="og:url" content="http://euro-travel-example.com/index.htm">

Twitter heeft zijn eigen <meta> tags die vergelijkbaar zijn met het Open Graph protocol, maar gebruikt het “twitter” voorvoegsel in plaats van “og”. Net als bij Facebook zijn er maar een paar nodig. Het type weergaveformaat dat we van Twitter vragen is ook gespecificeerd:

<meta name="twitter:title" content="European Travel Destinations "><meta name="twitter:description" content=" Offering tour packages for individuals or groups."><meta name="twitter:image" content=" http://euro-travel-example.com/thumbnail.jpg"><meta name="twitter:card" content="summary_large_image">

Zowel Facebook als Twitter bieden richtlijnen voor het gebruik van de bovenstaande <meta> tags. Ze zijn vrij gelijkaardig aan elkaar, hoewel ze enigszins subjectief kunnen worden geïnterpreteerd. Merk op dat, voor onze doeleinden, Facebook verwijst naar de gedeelde webpagina bij het gebruik van de term “object”:

	Facebook	Twitter
Titel	De titel, kop of naam van het object.	Een beknopte titel voor de gerelateerde inhoud.
Beschrijving	Een korte beschrijving of samenvatting van het object.	Een beschrijving die de inhoud beknopt samenvat, zoals geschikt voor presentatie in een Tweet. Je moet niet de titel hergebruiken als de beschrijving of dit veld gebruiken om de algemene diensten van de website te beschrijven.
Afbeelding	De URL van de afbeelding voor je object. Het moet minstens 600×315 pixels zijn, maar 1200×630 of groter heeft de voorkeur (tot 5MB). Blijf in de buurt van een beeldverhouding van 1.91:1 om bijsnijden te voorkomen.	Een URL naar een unieke afbeelding die de inhoud van de pagina weergeeft. Gebruik geen algemene afbeelding zoals het logo van je website, een auteursfoto of een andere afbeelding die meerdere pagina’s beslaat. Afbeeldingen voor deze kaart moeten minstens 280px breed zijn, en minstens 150px hoog. De afbeelding moet minder dan 1MB groot zijn.
URL	De canonieke URL voor je pagina. Dit moet de onversierde URL zijn, zonder sessievariabelen, gebruikersidentificerende parameters of tellers.

Omdat deze eigen <meta> tags uiteindelijk naar dezelfde elementen verwijzen, zou het ideaal zijn als er op de een of andere manier een manier zou zijn om de twee met elkaar in overeenstemming te brengen. Gelukkig is die er.

Het verzoenen van <meta> Tags

Het kan geen kwaad om meerdere <meta> tags te hebben die overbodig lijken. Te veel informatie heeft nooit iemand kwaad gedaan, behalve door een paar extra bytes aan het HTML-bestand toe te voegen.

Maar voor onze doeleinden, en omwille van de beknoptheid, kunnen we gebruik maken van het feit dat Twitter ons toestaat Open Graph <meta> tags te vervangen door zijn eigen. Uiteindelijk is, behalve de noodzaak om een weergave-indeling te specificeren, geen van de aangepaste Twitter <meta> tags nodig. Dit geeft ons het volgende, dat kan worden beschouwd als het absolute minimum aan <meta> tags dat nodig is om een webpagina geschikt te maken voor het delen via sociale media:

<meta property="og:title" content="European Travel Destinations"><meta property="og:description" content="Offering tour packages for individuals or groups."><meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg"><meta property="og:url" content="http://euro-travel-example.com/index.htm"><meta name="twitter:card" content="summary_large_image">

Het aanpassen van de richtlijnen voor de afbeelding is eenvoudig: volg de aanbeveling van Facebook van een minimumafmeting van 1200×630 pixels en een beeldverhouding van 1.91:1, maar houd je aan Twitter’s eis van een bestandsgrootte van minder dan 1MB.

Valideren van <meta> Tags

Als er twijfels zijn over de legitimiteit van het terugbrengen tot deze vijf tags, kunnen we de handige Facebook Sharing Debugger en Twitter Card Validator gebruiken. Beide tools scrapen elke webpagina op een publieke server op relevante <meta> tags en laten zien hoe het eruit zou zien als het gedeeld wordt. Het zal ook eventuele fouten vermelden en suggesties geven. Dus hoe hebben we het gedaan met ons specifieke voorbeeld? Twitter lijkt het prima te vinden, maar Facebook daarentegen geeft één item als waarschuwing:

Dit is een perfecte segue om te praten over…

Social Media Analytics

Wat Facebook aangeeft is dat als je hun analytics tool gaat gebruiken, die zij Domain Insights noemen, je het unieke ID-nummer moet opgeven dat aan je account is gekoppeld. De <meta> tag zou er dan ongeveer zo uitzien:

<meta property="fb:app_id" content="your_app_id" />

Twitter heeft iets vergelijkbaars dat ze Twitter Card Analytics noemen. Om het meeste uit deze tool te halen, raadt Twitter aan de volgende <meta>-tag te gebruiken die de Twitter-gebruikersnaam bevat die je aan de gedeelde webpagina wilt koppelen:

<meta name="twitter:site" content="@website-username">

Bedenk wel dat als u geen specifieke interesse hebt in het gebruik van deze analytische tools, het weglaten van de twee bovenstaande <meta> tags geen effect heeft op hoe een gedeelde webpagina verschijnt op een Facebook tijdlijn of Twitter feed.

Alles anders?

In de documentatie bij Facebook wordt één extra <meta>-tag aanbevolen, maar deze is niet verplicht. Een <meta> tag die de naam van de website aangeeft waar de gedeelde pagina zich bevindt:

<meta property="og:site_name" content="European Travel, Inc.">

Twitter suggereert nog een <meta> tag die ook wordt aanbevolen, maar niet vereist is:

<meta name="twitter:image:alt" content="Alt text for image">

Dit geeft een alternatieve beeldbeschrijving voor mensen die slechtziend zijn.

Final Markup

Dat zou het moeten doen. Nogmaals, als je kijkt naar documentatie van Facebook en Twitter voor het delen van webpagina’s, zijn er vele andere <meta> tags beschikbaar die kunnen worden gebruikt om verschillende soorten inhoud te specificeren. Maar in het algemeen zal het volgende volstaan:

<!-- Essential META Tags --><meta property="og:title" content="European Travel Destinations"><meta property="og:description" content="Offering tour packages for individuals or groups."><meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg"><meta property="og:url" content="http://euro-travel-example.com/index.htm"><meta name="twitter:card" content="summary_large_image"><!-- Non-Essential, But Recommended --><meta property="og:site_name" content="European Travel, Inc."><meta name="twitter:image:alt" content="Alt text for image"><!-- Non-Essential, But Required for Analytics --><meta property="fb:app_id" content="your_app_id" /><meta name="twitter:site" content="@website-username">