Open Graph-voorvertoning

Volgende

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. 1

    Typ de velden van de kaart

    Titel, sitenaam, beschrijving, pagina-URL en afbeeldings-URL. Elk veld komt overeen met één og:-tag.

  2. 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. 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. 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

Tool beschikbaar in andere talen