Nginx 未显示动态 og：社交媒体上的图像

Question

I am facing an issue with the OG image of my Next.js website. I have tested it with Facebook debugger, and there is no error but specific product images are not showing.

in every product page like example.com/product/2 source code showing <meta property="og:image" content="https://staticimage.azureedge.net/images/F_ Cumin-Powder-_-IMG_6017.png"/>

I have checked with ngrok ngrok http 3000 it gave me a link that was showing a dynamic OG image of every page.

I am running my Next.Js app with pm2. And here is my Nginx config

server {

        root /home/ecom/websites/ecomproject/.next;
        index index.html index.htm index.nginx-debian.html;

        server_name ecom.com.bd www.ecom.com.bd;

        location / {
                proxy_pass http://localhost:3000;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;

        }


    ssl_protocols TLSv1.2 TLSv1.3;
    listen [::]:443 ssl ipv6only=on;
    listen 443 ssl;
    ssl_certificate /home/ecom/SSL/ecom/ecom.com.bd.chained.crt; # managed by Godaddy
    ssl_certificate_key /etc/nginx/sites-available/ecom.com.bd.key; # managed by Godaddy

}
server {
    if ($host = www.ecom.com.bd) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    if ($host = ecom.com.bd) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


        listen 80;
        listen [::]:80;

        server_name ecom.com.bd ecom.com.bd;
    return 404; # managed by Certbot

  gzip on;
  gzip_proxied any;
  gzip_comp_level 4;
  gzip_types text/css application/javascript image/svg+xml;

}

There is something I am missing in my Nginx config. Please suggest what mistake I am making. Thanks.

Answer 1

Found out that I had a problem with Next.js projects product.js file.

Adding height & width solved this.

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

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