'og image meta tag with Next.js is not working

<meta property="og:image" content="https://mywebsite.com/images/s1.jpg"

I used next/head and I added the above meta tag image but when I shared the link the image didn't appear. how can I fix it?

htmlnext.jsmeta-tags


Solution 1:[1]

For me it finally worked: Inside _app.js

import Head from "next/head"

then within the return:

<Head>
<meta property="og:image" content="https://myurl.com/ogImage.png" />
</Head>

then i did a static export and uploaded the files from the "out" folder via FTP, because i host the project on a non node server. to do this, open "package.json" and change "export" to "next build && next export". then just run npm run export in the console and the files will be exported to html

Solution 2:[2]

You can use this meta tag in the <head> tag

<meta property="og:image" content="https://mywebsite.com/images/s1.jpg"/>

<meta property="og:title" content="Your Title"/>

<meta property="og:description" content="A full description of the page."/>

<meta property="og:image:width" content="1200"/>

<meta property="og:image:height" content="630"/>

Please close properly meta tag you missed "/>" from your tag.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Fabian
Solution 2 Anoop Singh

Related Questions