Next.js Open Graph-afbeelding werkt niet

De meeste Next.js-previewfouten worden veroorzaakt door de Metadata API: een ontbrekende metadataBase, een openGraph-object dat het bovenliggende object overschrijft, of een afbeeldingsbestand dat de limiet overschrijdt.

Laatst bijgewerkt

Controleer je URL

Voorbeeld vernieuwen

Tags genereren

Snelle oplossing


  1. Stel metadataBase in de root layout in, zodat relatieve afbeeldingspaden absolute URL's worden.

  2. Herhaal het volledige openGraph-object op elke pagina die dit overschrijft.

  3. Houd opengraph-image onder de 8 MB en twitter-image onder de 5 MB.

  4. Controleer de geïmplementeerde URL met de meta-tagcontrole, niet localhost.


Waarom het Next.js-voorbeeld ontbreekt of onjuist is

  • Relatieve afbeeldingspaden zonder metadataBase. Een relatieve URL in een op URL gebaseerd metadataveld zonder metadataBase veroorzaakt een build-fout, en platforms kunnen relatieve paden sowieso niet ophalen.

  • Een pagina overschrijft openGraph en raakt de afbeelding kwijt. Metadata van layouts en pagina's wordt oppervlakkig samengevoegd (shallow merge), dus het openGraph-object van een pagina vervangt de volledige openGraph van de layout, inclusief afbeelding.

  • Het afbeeldingsbestand is te groot. opengraph-image moet kleiner zijn dan 8 MB en twitter-image kleiner dan 5 MB, anders mislukt de build.

  • U hebt getest op localhost of een beveiligde preview-implementatie. Platforms halen gegevens op vanaf hun eigen servers en kunnen er niet bij.

  • Het platform heeft een eerdere implementatie in de cache opgeslagen. Vernieuw deze na de oplossing.

Hoe u dit oplost

  1. Stel in app/layout.tsx het volgende in: metadataBase: new URL('https://your-domain.com').

  2. Wanneer een pagina openGraph instelt, voeg dan images opnieuw toe, of spread de bovenliggende afbeeldingen vanuit generateMetadata.

  3. Of voeg een opengraph-image.png-bestand toe aan het routesegment. Next.js voegt automatisch og:image, het type, de breedte en de hoogte voor u toe.

  4. Gebruik voor gegenereerde afbeeldingen ImageResponse vanuit next/og met size = { width: 1200, height: 630 }.

  5. Implementeer (deploy) en controleer vervolgens de openbare URL met de meta-tag-checker.

Tags die Next.js zou moeten uitvoeren

  • og:title, og:description, og:url

  • og:image met og:image:width, og:image:height en og:image:type

  • og:image:alt vanuit opengraph-image.alt.txt

  • twitter:card en twitter:image (absolute URL)

U kunt deze handmatig schrijven met de meta-tag-generator en ze vergelijken met uw build.

Regels voor afbeeldingsgrootte

  • opengraph-image: .jpg, .jpeg, .png of .gif, max. 8 MB

  • twitter-image: dezelfde bestandstypen, max. 5 MB

  • 1200 x 630 px is het formaat dat Next.js gebruikt in zijn voorbeelden

Streaming metadata en crawlers

Nieuwere versies van Next.js kunnen metadata van generateMetadata naar de body streamen. Voor bots met beperkte HTML-ondersteuning, zoals facebookexternalhit, blokkeert Next.js het renderen nog steeds en plaatst het de tags in de head. Het detecteert deze bots op basis van de user-agent. U kunt deze lijst overschrijven met htmlLimitedBots in next.config.

Hoe u een vernieuwing forceert

Next.js kan de cache van een ander platform niet wissen. Vernieuw na het implementeren elk platform: Post Inspector voor LinkedIn, de Sharing Debugger voor Facebook, een nieuwe query-string voor X, Slack en Discord. De vernieuwingstool bevat ze allemaal.

Bronnen

Veelgestelde vragen

Waarom is mijn Next.js og:image een relatieve URL?

metadataBase is niet ingesteld. Stel dit in de root-layout in, zodat Next.js relatieve paden omzet in absolute URL's.

Waarom verliest mijn pagina de og:image van de lay-out?

Next.js voegt metadata oppervlakkig (shallow) samen. Als een pagina openGraph definieert, vervangt dit het openGraph-object van de layout. Voeg de afbeeldingen op de pagina daarom opnieuw toe.

Wat is de maximale bestandsgrootte voor opengraph-image in Next.js?

8 MB voor opengraph-image en 5 MB voor twitter-image. Bij grotere bestanden mislukt de build.

Controleer je pagina en vernieuw vervolgens het voorbeeld

Plak je URL in de gratis checker om te zien welke tags elke app precies uitleest. Zodra de tags kloppen, gebruik je de vernieuwingstool om het oude voorbeeld te wissen.

Controleer je URL

Voorbeeld vernieuwen

Tags genereren

Gerelateerde gidsen

X (Twitter)-card wordt niet weergegeven of niet bijgewerkt

X genereert de kaart op basis van twitter:-tags, en valt terug op og:-tags. Er is geen validator meer die de cache ververst, dus de oplossing is goede tags plus een nieuwe URL.

Framer sociale media-voorvertoning wordt niet bijgewerkt

Framer stelt een sitewide sociale voorvertoning, pagina-overschrijvingen en CMS-afbeeldingen per item in. Als de nieuwe afbeelding live staat maar de oude nog steeds wordt weergegeven, is de cache van het platform de oorzaak.

Webflow Open Graph-afbeelding werkt niet

Webflow stelt Open Graph per pagina in, nooit globaal. CMS-sjabloonpagina's hebben een afbeeldingsveld nodig, en elke afbeelding in die collectie moet dezelfde afmetingen hebben.