Twitter heeft haar eigen protocol en noemt deze “Twitter Cards”. Er is niet veel verschil tussen de “Twitter Cards” en Open Graph die Facebook gebruikt, alleen het type aanduiding. Twitter kent als types; Summary (het best te gebruiken voor een website (pagina), photo en player.
Je kunt de volgende regels gebruiken:
- twitter:card - Dit is het type
- twitter:url - De link de pagina
- twitter:description - De beschrijving van de pagina in een of twee zinnen
- twitter:image - Een link naar je gewenste afbeelding
Daarbij kun je nog de volgende regels gebruiken:
- twitter:site - @username voor de website
- twitter:creator - @username voor de auteur
Hoe voeg je die Open Graph regels nu toe aan je code?
In de open source platformen zijn er plug-ins te vinden waar je deze mee kunt toevoegen aan je website.
In WebBloxz kun je ze per pagina toevoegen (als je wilt) door bij het overzicht van de pagina’s op het tandwiel achter de paginanaam te klikken. Hiermee open je de instellingen van die pagina. Daar vindt je onder “Code” een blok met de naam “Head” hieronder staat een invulveld. Daar kun je de code zetten. De afbeelding kun je bovenaan uploaden via “Afbeelding” onderaan even op “Opslaan” klikken, website publiceren en klaar.
Hoe ziet zo’n code er dan uit?
Je moet de code natuurlijk wel goed opmaken, hieronder de code zoals wij hem voor deze blog hebben gebruikt (de afbeelding hoef je dus niet meer te doen, die heb je bovenaan bij de instellingen al gekozen):
<meta property="og:type" content="blog" />
<meta property="og:url" content="https://www.webbloxz.nl/blog/open-graph" />
<meta property=”og:site_name” content=”WebBloxz, gemaakt voor jouw gemak” />
<meta property="og:description" content="Open Graph? Het wat, waarom en hoe over Open Graph" />
<meta property="og:title" content="Open Graph | WebBloxz" />
Wij gebruiken geen Twitter, dus deze hebben wij niet toegevoegd, maar deze zou er zo uit kunnen zien:
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@WebBloxz" />
<meta name="twitter:creator" content="@marcelvanest" />
<meta property="og:url" content="https://www.webbloxz.nl/blog/open-graph" />
<meta property="og:title" content="Open Graph | WebBloxz" />
<meta property="og:description" content="Open Graph? Het wat, waarom en hoe over Open Graph" />
Dit kun je dus per pagina doen, hoeft niet. Doe het vooral wel bij de pagina’s die je wilt delen via social media.