Hugo sites doesn't display og:image and og:description

here is the code,

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=egde">
    <meta name="viewport" content="width=device-width, initial-scale=1 shrink-to-fit=no">
    <meta name="generator" content="Hugo 0.55.6">
    <title>{{ if .Title }}{{ .Title }}{{ end }}</title>
    {{ if .Params.description }}
    <meta name="description" content="{{ .Params.description }}">
    {{ else if .Site.Params.description }}
    <meta name="description" content="{{ .Site.Params.description }}">
    {{ end }}
    {{ if .Params.keywords }}
    <meta name="keywords" content="{{ .Params.keywords }}">
    {{ else if .Site.Params.keywords }}
    <meta name="keywords" content="{{ .Site.Params.keywords }}">
    {{ end }}
    <!-- og meta tags -->
    <meta property="og:url" content="{{.Site.BaseURL}}">
    <meta property="og:image" content="{{.Site.BaseURL}}images/logo2.png">
    {{ if .Params.description }}
    <meta property="og:description" content="{{ .Params.description }}">
    {{ else if .Site.Params.description }}
    <meta property="og:description" content="{{ .Site.Params.description }}">
    {{ end }}
    {{ if .Params.keywords }}
    <meta property="og:keywords" content="{{ .Params.keywords }}">
    {{ else if .Site.Params.keywords }}
    <meta property="og:keywords" content="{{ .Site.Params.keywords }}">
    {{ end }}
    <!-- favicons -->
    <link rel="apple-touch-icon" sizes="57x57" href="/images/favicons/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="/images/favicons/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/images/favicons/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/images/favicons/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/images/favicons/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/images/favicons/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/images/favicons/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/images/favicons/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/images/favicons/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192" href="/images/favicons/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/images/favicons/favicon-32x32.png">
    <link rel="manifest" href="/images/favicons/manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="/images/favicons/ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/fontawesome-free-5.9.0-web/css/all.min.css">
    <link rel="stylesheet"
    <link rel="stylesheet"
    <link rel="stylesheet" href="/css/grayscale.css">
    <link rel="stylesheet" href="/fancybox-2.1.7/jquery.fancybox.min.css">


and the repo link

happens in my other hugo sites too,

Kindly anyone help me with this

I downloaded the repo and built the site. For me both “og:image” and “og:desciption” meta tags was populated correctly.

(There are a number of other errors, missing resources etc. on the site but I assume you are still building it.)


Can you send me the screenshot of the whatsapp share?

and kindly let me know what are the errors and missing resources

I do not use any social media services.

I just confirmed that the meta tags was present on the site.

The errors you can see by opening the console in your browser.

If the link has not been posted on any social media yet, Facebook might not have scraped the image. Try using the Facebook Sharing Debugger

i mean like this

when compared to this,

this is

if view source meta tags are visible, but while sharing link og image and description not seen

i checked it.

it shows preview, but in whatsapp not seen