fix: add og:title,url,description meta tags and prefix og:image with host

[danielroe]

🔗 Linked issue

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

The OpenGraph spec requires:

• og:title - The title of your object as it should appear within the graph, e.g., "The Rock".
• og:type - The type of your object, e.g., "video.movie". Depending on the type you specify, other properties may also be required.
• og:image - An image URL which should represent your object within the graph.
• og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "https://www.imdb.com/title/tt0117500/".

Two url related issues come up for future attention:

• support for trailing/non-trailing slash configuration - particularly platforms like netlify which redirect to trailing slash are relevant. I've bypassed this by currently rendering og:url for whatever url was actually accessed, but this is not optimal - ideally there's a canonical form of the url.
• support for rel=canonical URLs for document driven mode - this depends on the point above

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[netlify]

✅ Deploy Preview for nuxt-content ready!

Name	Link
🔨 Latest commit	308b97f
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt-content/deploys/63c58302d86238000740e829
😎 Deploy Preview	https://deploy-preview-1769--nuxt-content.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[Atinux]

Thanks @danielroe , what would you suggest for canonical?

[danielroe]

I would recommend, for now, we add a trailingSlash: true | false option to documentDriven in conten, and then enable the canonical code that's commented out here. Happy to add it to this PR if it's an acceptable approach. I wouldn't suggest implementing any kind of redirection between them (and tbh that isn't required if you have a canonical set).

[Atinux]

No need for redirect if we set the canonical meta tag indeed.

Those trailingSlash should be ported back to Nuxt at one point like we had on Nuxt 2.

Happy to update the PR and uncomment your code?

[farnabaz]

What should we do with canonical? Uncomment or keep it commented?

Also, What do you think about using HOST header and window.location to find the host if it isn't defined in the config?

/cc @Atinux @danielroe

[Atinux]

I like the idea of trying to guess the host as much as possible

[Atinux]

Regarding the canonical, what do you suggest @danielroe ?

[danielroe]

Sorry for the delay on this! I've guarded open graph integration behind process.server check (as it's not useful on client-side) and added host guess from host header - nice idea.

[farnabaz]

👍