Je bent deze insluitingen waarschijnlijk heel vaak tegengekomen zonder na te denken over het is wanneer je iemand een link stuurt op een social media-platform of berichten-app, de link wordt uitgebreid met inhoud van de website, meestal een afbeelding, titel en beschrijving. Hier leest u hoe u dat instelt.
Wat zijn Open Graph-metatags?
De configuratie voor deze insluitingen is gedaan met <meta> tags, meestal in de koptekst van uw site. Er is een standaard voor hen, oorspronkelijk gemaakt op Facebook, genaamd “the Open Graph Protocol.”
De tags zullen altijd het volgende formaat gebruiken, met een “ eigendom” waarde ingesteld op “og:” gevolgd door het type tag en een “content” waarde ingesteld op de waarde van de inhoud op de pagina:
<meta property=”og:type” content=”value” />
Een basisconfiguratie voor de meeste websites ziet er bijvoorbeeld als volgt uit:
<meta property=”og:image” content=”https://i.imgur.com/imagelink.jpg”> <meta property=”og:title” content=”Websitetitel” /> <meta property=”og:description” content=”Websitebeschrijving” /> <meta property=”og:type” content=”website” /> <meta property=”og:url” content=”https://example.com/” />
Dit stelt de afbeelding, titel & link, beschrijving en vertelt sites dat het een website is. Dit resulteert in een eenvoudige insluiting zoals de volgende:
Advertentie
Het is een eenvoudig formaat, maar er zijn nogal wat opties die de meeste websites zullen herkennen. Je kunt de volledige lijst ervan vinden op de Open Graph-website, maar de belangrijkste bespreken we hier.
Twitter zal OG-tags herkennen, maar het is vermeldenswaard dat ze ook hun eigen tags hebben die prioriteit hebben.
<meta name=”twitter:title” content=”Website Title”> <meta name=”twitter:description” content=”Websitebeschrijving”> <meta name=”twitter:image” content=”https://i.imgur.com/imagelink.jpg”>
OG-metatags gebruiken
Eerst de titel. dit is een uiterst eenvoudige tag, maar is voor iedereen noodzakelijk. Zelfs als uw insluiting een object vertegenwoordigt in plaats van een pagina, moet deze toch een titel hebben die uitlegt wat het is.
<meta property=”og:title” content=”Website Title” />
Als uw titel de klus niet afrondt, kunt u optioneel een uitgebreide beschrijving toevoegen:
<meta property=”og:description” content=”Website Description” />
De og:type-tag is ook erg belangrijk, omdat deze sites vertelt wat voor soort inhoud u linkt en hoe deze moet worden opgemaakt. Het staat ook verschillende soorten optionele parameters toe, afhankelijk van het type. Er zijn een paar verschillende opties:
- website, wat een basisstandaard is.
- article, dat een nieuws-/blogpost vertegenwoordigt, en de optionele parameters public_time , modified_time , author , section en tag .
li>
Voor optionele parameters moet u een aparte meta-eigenschap toevoegen met de parameternaam. Bijvoorbeeld: music:duration:
<meta property=”music:duration” content=”60″ /> Advertentie
U wilt ook de URL-tag instellen om terug te linken naar uw site.
<meta property=”og:url” content=”https://example.com /” />
Als je een afbeelding wilt laten zien met je insluiting, moet je dat ook instellen. Afbeeldingen hebben veel configuratie-opties:
<meta property=”og:image” content=”https://example.com/ogp.jpg” /> <meta property=”og:image:secure_url” content=”https://secure.example.com/ogp.jpg” /> <meta property=”og:image:type” content=”image/jpeg” /> <meta property=”og:image:width” content=”400″ /> <meta property=”og:image:height” content=”300″ /> <meta property=”og:image:alt” content=”Een glanzende rode appel met een hap eruit” />
Er zijn ook og:video- en og:audio-tags die op dezelfde manier werken, maar dan voor respectievelijk video en audio.
Je kunt de sitenaam ook handmatig instellen, als de titel dat niet doet. geef dat niet weg.
<meta property=”og:site_name” content=”CloudSavvy IT” />
Debuggen van metatags
Ze naar jezelf sturen om te debuggen is niet het beste idee. Veel platforms slaan de reactie in de cache op, waardoor het is moeilijker om snel wijzigingen aan te brengen.
Gelukkig zijn er een paar geweldige tools zoals opengraph.xyz, waar je je link kunt plaatsen en de insluitingsreactie voor verschillende platforms kunt bekijken.
Advertentie
Je wilt natuurlijk nog steeds de link naar elk platform sturen om te controleren of het werkt.
Kun je tags dynamisch genereren?
Natuurlijk! Tags zijn gewoon HTML en de meeste moderne webframeworks hebben alles te maken met het weergeven van dynamische HTML. Het moet echter in de koptekst staan, dus het kan dingen compliceren voor sommige frameworks die zijn gericht op het schrijven naar de hoofdtekst van de pagina.
In React kun je dit eenvoudig doen met een pakket met de naam react-helm , die in uw hoofdcomponent App() gaat. U kunt natuurlijk de standaard JSX-syntaxis gebruiken om een van de waarden te vervangen door waarden uit de staat van uw pagina.
import Reageren vanuit “reageren”; import Helm van “react-helm”; function App() { return ( <main> <Helmet> <title>Example</title> <meta itemprop=”name” content=”Example” /> <meta property=”og:title” content=”Voorbeeld” /> <meta itemprop=”description” content=”A description” /> <meta name=”description” content=”A description” /> <meta property=”og: description” content=”A description” /> <meta itemprop=”image” content=”http://example.com/example.png” /> <meta property=”og:image” content=” http://example.com/example.png” /> <meta property=”og:url” content=”https://example.com” /> <meta property=”og:type” content =”website” /> </Helmet> </main> ); }
Voor WordPress kun je dit configureren met een plug-in, of wat PHP toevoegen aan je header.php-bestand.
<meta name=”description” content=”<?php if ( is_single() ) { single_post_title('', true); } else { bloginfo('name'); echo ” – “; bloginfo('description'); } ?>” />
Voor andere frameworks zullen ze waarschijnlijk op de een of andere manier metatags ondersteunen, dus u zult willen controleren hoe het werkt voor uw toepassing.