The Goal: I have a Next JS website with lots of pages. Some pages will have specific OG Share images for that page for Facebook etc. but some won't have specific images and will just use a generic or globally set share image.
The Problem: Setting a global share image within _app.js works great and gives every page a share image. Setting a share image for a specific page also works and adds a OG Image tag in Head
. The problem now is there are two tags for an image, the global one and page specific one. Obviously Facebook doesn't know which one is best and just uses the first (global) one.
Possible Solutions:
- Currently I have removed the global tags and will be setting each page individually which isn't ideal. It would be nice to know a page will always have a share image as a fallback.
- When adding a page specific image tag overwrite/remove the globally set one.
- Position the page specific image tag above the global tag in
Head
. - Somehow only add the global tag if a page specific tag isn't found.
Would love know if anyone has had the same issue and what you did!