Open Graph-voorvertoning
Typ je titel, beschrijving, sitenaam, pagina-URL en afbeeldings-URL, en dit hulpmiddel toont live een deelkaart voor Facebook en X (Twitter) die bij elke toetsaanslag meebeweegt. Het is een ontwerpomgeving voor je Open Graph-tags: er wordt niets opgehaald of gepubliceerd, dus je kunt de lengte van de kop en de uitsnede van de afbeelding uitproberen tot de kaart er goed uitziet, en daarna de tekst overnemen in je echte og:-tags.
Hoe de voorvertoning wordt opgebouwd
-
1
Typ de velden van de kaart
Titel, sitenaam, beschrijving, pagina-URL en afbeeldings-URL. Elk veld komt overeen met één og:-tag.
-
2
Bekijk hoe de kaarten meebewegen
De modellen van Facebook en X worden opnieuw getekend terwijl je typt, met de echte lay-out en afkapping van elk platform.
-
3
Voeg een afbeeldings-URL toe
Plak een absoluut https-afbeeldingsadres om de uitsnede te zien; laat het leeg en de Facebook-kaart toont een tijdelijke aanduiding.
-
4
Neem het over in je og:-tags
Als de kaart lekker leest, neem dan dezelfde titel, beschrijving en afbeelding over in de metatags van je pagina.
Wat elk veld wordt
| Veld | Open Graph-tag | Getoond op de kaart |
|---|---|---|
| Titel | og:title | Vetgedrukte kop, afgekapt tot één regel |
| Beschrijving | og:description | Grijze ondertitel, beperkt tot twee regels |
| Sitenaam | og:site_name | Klein label boven de Facebook-kop |
| URL | og:url | Het domein wordt getoond; de host bepaalt het |
| Afbeeldings-URL | og:image | Uitgesneden tot 1.91:1 op beide modelkaarten |
Het hulpmiddel leest de host uit de URL die je typt, dus https://blog.example.com/post toont blog.example.com op de kaart.
De twee kaarten en waarin ze verschillen
- Facebook toont de afbeelding uitgesneden tot 1.91:1, daarna het domein in kleinkapitaal, de vetgedrukte titel op één regel en de beschrijving op maximaal twee regels. Zonder afbeeldings-URL toont het een grijze tijdelijke aanduiding, wat verreweg de meest voorkomende oorzaak is van een vlakke deling zonder afbeelding in de praktijk.
- X (Twitter) toont een afgeronde
summary_large_image-kaart: de afbeelding in een 2:1-uitsnede, het domein, de titel en de beschrijving eronder.
De tekst passend maken
- Titel: mik op 60 tot 70 tekens. Facebook kapt rond 88 af en X rond 70, dus een titel binnen 70 blijft overal heel.
- Beschrijving: houd die onder ongeveer 160 tekens; de kaart beperkt tot twee regels en de rest vervalt.
- Afbeelding: ontwerp op 1200 x 630 px zodat de 1.91:1-uitsnede zuiver is, en host hem op een absolute
https://-URL. Een relatief pad laadt niet zodra de tags live gaan. - Sitenaam: kort en alleen het merk, geen slogan. Hij staat als label boven de kop.
Checklist voor de publicatiedag
- [ ] Titel onder 70 tekens
- [ ] Beschrijving onder 160 tekens
- [ ] Afbeeldings-URL is absoluut (https, niet // of een relatief pad)
- [ ] Afbeelding ontworpen op 1200 x 630 px, JPG of PNG
- [ ] URL komt overeen met de canonieke URL die je publiceert
- [ ] Tekst overgenomen in de echte og:-tags en daarna gecontroleerd met een checker
Veelgestelde vragen
Nee. Je typt de velden van de kaart met de hand in en het hulpmiddel maakt een model van hoe ze eruit zouden zien. Het is een ontwerpomgeving, geen scraper, dus het werkt ook voordat de pagina online staat. Om de tags te lezen die al op een pagina staan, plak je die pagina’s HTML in plaats daarvan in de Open Graph Checker.
Een Facebook-kaart en een X (Twitter)-kaart met grote afbeelding. Ze gebruiken dezelfde Open Graph-waarden, dus een kaart die hier goed leest is een goede indicatie voor LinkedIn, Slack, Discord en andere apps die uitvouwen op basis van dezelfde og:-tags, elk met iets andere limieten.
Omdat het afbeeldingsveld leeg is, of omdat de URL die je plakte geen werkend absoluut https-adres is. Voeg een volledige https-afbeeldings-URL toe en de uitsnede verschijnt meteen. Zorg dat het bestand bij livegang onder 5 MB blijft en wordt geserveerd met een openbaar content-type image/*.
Elk platform kapt op een ander punt af (Facebook rond 88 tekens, X rond 70), en de modelkaart weerspiegelt dat. Kort de titel in tot 60 tot 70 tekens en hij blijft op elk platform heel.
Gerelateerde tools
Indexerbaarheidscontrole
Controleer of een URL indeksbaar is: robots.txt, meta robots, X-Robots-tag, canonische signalen en HTTP-status.
Extractor voor interne links
Extraheer alle interne links uit een URL of geplakte HTML, inclusief ankertekst, rel-attributen en nofollow-status voor SEO-audits.
SERP-voorbeeld
Bekijk een Google-zoekresultaat voordat je publiceert. Live tekentellers waarschuwen bij te lange titels en metabeschrijvingen, en een fragment in Google-stijl laat zien hoe je resultaat oogt.
Mobielvriendelijke tester
Controleer de mobiele gebruiksvriendelijkheid van een URL: weergeef het paginaoppervlak in de schermgrootte van een telefoon en merk problemen op met aanraakdoelgebieden, te kleine tekst en ontbrekende viewport-meta-informatie.
UTM Link Builder
Bouw campagne-trackinglinks met de UTM-parameters source, medium, campaign, term en content. Schone, URL-gecodeerde links, klaar voor advertenties en nieuwsbrieven.
Beveiligingsheader-analyser
Plak je HTTP-responsheaders en krijg geprioriteerd advies over de beveiligingsheaders die ertoe doen: Content-Security-Policy, Strict-Transport-Security, X-Frame-Options, Referrer-Policy en meer.
Tool beschikbaar in andere talen
- معاينة Open Graph [AR]
- Open Graph Preview [DE]
- Podgląd Open Graph [PL]
- Pratinjau Open Graph [ID]
- Xem trước Open Graph [VI]
- Aperçu Open Graph [FR]
- Open Graph-förhandsvisning [SV]
- Open Graph プレビュー [JA]
- Prévia do Open Graph [PT]
- ตัวอย่าง Open Graph [TH]
- Vista previa de Open Graph [ES]
- Open Graph 미리보기 [KO]
- Open Graph 预览 [ZH]
- Open Graph Preview [EN]
- Anteprima Open Graph [IT]
- Предпросмотр Open Graph [RU]
- Open Graph Önizleme [TR]