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

support
1

Screenshot_1
Screenshot_1.png963×194 14.4 KB

here is the code,

    <head>
    <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"
        href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i">
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i">
    <link rel="stylesheet" href="/css/grayscale.css">
    <link rel="stylesheet" href="/fancybox-2.1.7/jquery.fancybox.min.css">

</head>

and the repo link

https://github.com/TenSketch/Prabhat

happens in my other hugo sites too,

Kindly anyone help me with this

2

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.)

3

Hi,

Can you send me the screenshot of the whatsapp share?

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

4

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.

5

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

6

i mean like this
Screenshot_1

when compared to this,
Screenshot_3

this is web.whatsapp.com

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

7

i checked it.

https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fwww.prabhatha.com%2F

it shows preview, but in whatsapp not seen