Open Graph-tags uitgelegd, met een live tagbouwer | We.Inc
De vier verplichte Open Graph-tags, afbeeldingseigenschappen, og:type-waarden en article-tags met uitleg, plus een bouwer die de markup voor de head schrijft.
Open Graph-tags uitgelegd
Open Graph-tags zijn meta-elementen in de head van een pagina die bepalen hoe een link eruitziet als hij wordt gedeeld. Het protocol vereist er vier: og:title, og:type, og:image en og:url. Elk gebruikt het property-attribuut, bijvoorbeeld meta property="og:title" content="...". Voeg og:description, og:site_name en de breedte, hoogte en alt van de afbeelding toe voor betere voorbeelden.
De vier verplichte eigenschappen
Eigenschap
Wat erin hoort
og:title
De titel zoals die op de deelkaart moet verschijnen
og:type
Het soort object, zoals website of article
og:image
Een volledige URL naar de voorbeeldafbeelding
og:url
De canonieke URL die de pagina identificeert
Voorbeelden bij het delen komen uit een handvol tags die u makkelijk net verkeerd zet: een relatief pad naar de afbeelding, een ontbrekende breedte en hoogte, of een titel die alleen in het title-element staat. Vul de bouwer in voor correcte markup en lees daarna wat elke eigenschap doet.
Vul in de bouwer de titel, beschrijving, pagina-URL en afbeeldings-URL in.
Kies het type: website voor de meeste pagina's, article voor blogposts.
Bekijk de globale voorbeeldkaart en kopieer daarna de gegenereerde tags naar de head van uw pagina.
Test de live pagina met de eigen sharing debugger van het platform, want elk netwerk cachet voorbeelden.
Gebruik absolute https-URL's voor og:image en og:url. Relatieve paden zijn een veelvoorkomende reden dat voorbeelden geen afbeelding tonen.
Voeg og:image:width en og:image:height toe, zodat een app de vorm van de afbeelding uit de tags kan halen zonder het bestand te meten.
Schrijf og:image:alt voor mensen die op sociale platforms een schermlezer gebruiken.
Gebruik een nieuwe bestandsnaam als u de afbeelding wijzigt. Platforms cachen afbeeldingen, dus met de oude URL kan de verouderde afbeelding blijven staan.
Veelgestelde vragen
Welk formaat moet een Open Graph-afbeelding hebben?
Het protocol schrijft geen formaat voor. 1200 bij 630 pixels is een veelgebruikt liggend formaat en is het formaat dat de Next.js-documentatie in haar voorbeelden gebruikt. Houd belangrijke tekst weg van de randen, want sommige apps snijden de afbeelding bij.
Helpen Open Graph-tags bij SEO?
Hun taak is de deelkaart, niet de ranking. Een duidelijke titel en afbeelding kunnen meer klikken opleveren als mensen uw link doorsturen in chats en feeds. Houd og:title gelijk aan uw title-element, zodat elk kanaal de pagina op dezelfde manier beschrijft.
Waarom gebruiken Open Graph-tags property in plaats van name?
Het protocol is gebouwd op RDFa, dat het property-attribuut gebruikt. De voorbeelden op ogp.me schrijven meta property="og:title". Twitter card-tags gebruiken daarentegen het name-attribuut, zoals in meta name="twitter:card".
Heb ik nog Twitter card-tags nodig?
Voeg minstens twitter:card toe, ingesteld op summary_large_image als u de lay-out met grote afbeelding wilt. Veel apps lezen de og-waarden voor titel, beschrijving en afbeelding als bijpassende twitter-tags ontbreken, maar platformregels veranderen, dus test uw live URL voordat u ervan uitgaat dat die terugval werkt.
Kan een pagina meer dan één og:image hebben?
Ja. Het protocol staat arrays toe: herhaal de og:image-tag en zet de breedte, hoogte en alt van elke afbeelding direct na de afbeelding die ze beschrijven. Bij tegenstrijdige waarden geeft het protocol voorrang aan de eerste tag van boven.
Gestructureerde eigenschappen horen bij de tag erboven
Eigenschappen zoals og:image:width beschrijven de laatste og:image die daarvoor is gedeclareerd. De volgorde telt: declareer eerst de afbeelding, dan de breedte, hoogte, het type en de alt, en dan de volgende afbeelding.
og:image:secure_url is een extra https-adres voor dezelfde afbeelding. Als uw og:image al https gebruikt, hebt u het niet nodig.
Types en hun extra tags
website is de standaard voor pagina's die geen specifiek soort object zijn. article ontgrendelt article:published_time, article:modified_time, article:author, article:section en article:tag.
Het protocol definieert ook book, profile en de groepen music en video. Gebruik ze alleen als de pagina echt dat object is; een productpagina is meestal website.
Elke eigenschap, met uitleg
Optionele en gestructureerde Open Graph-eigenschappen