How to show images preview of website posts on facebook page

Nedjma_Media · October 10, 2023, 7:48pm

I created a site with Hugo and I would like to share the articles from the site on my Facebook page.

when the article is shared the image of the article is not displayed on the Facebook page

Knowing that I added the internal open graph template

and i used facebook debugger

what should I change in my hugo site see the article overview?

idarek · October 11, 2023, 11:05am

You don’t need Facebook developer

Rightly configured Opengraph is needed with reference to image

Have you advertising <meta property=“og:image” … ?

Share link to your website or article that is not displaying picture and will advise further.

razon · October 11, 2023, 11:16am

Please also check whether your baseURL is set, I remmember that it won’t work with relative image (og:image meta tag) URLs.

Nedjma_Media · October 11, 2023, 11:35am

here is my site : https://nedjma.org/

chrillek · October 11, 2023, 11:45am

you have nothing in your og: elements referring to an image. Nor is your og:url helpful.

Aside: Although I don’t like Adenauer particularly, I think one should not distort his image as your website does.

Nedjma_Media · October 11, 2023, 12:00pm

that said I use the internal templete {{ template “_internal/opengraph.html” . }}

I don’t know why there is no reference to the image?

razon · October 11, 2023, 12:07pm

In fact, there is og:image meta tag on the page, i.e. Konrad Adenauer | Nedjma Institut, but it’s relative URL, could you please check if the baseURL is set, to make image URL to be absolute?

idarek · October 11, 2023, 12:13pm

as @razon mentioned, the URL is not pointing correctly (add | absURL }} to relevant place).

Here is my template for opengraph, maybe you will find it useful.

<meta property="og:title" content="{{ .Title }}">
<meta property="og:description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}">
<meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}">
{{ $href := .Permalink }}
{{ with $.Paginator }}
  {{ if gt .PageNumber 1 }}
  {{ $href = .URL | absURL }}
  {{ end }}
{{ end }}
{{- with .Site.Params.title }}<meta property="og:site_name" content="{{ . }}" />{{ end }}
<meta property="og:url" content="{{ $href }}">
<meta property="og:locale" content="{{ .Site.LanguageCode }}">

{{ if .Params.featuredImage }}
  <meta property="og:image" content="{{ .Params.featuredImage | absURL }}">
  {{ if (findRE `(?s)<img.+?>` .Content) }}{{ range $k, $_ := findRE `(?s)<img.+?>` .Content }}{{ if $k }}{{ end }}
      <meta property="og:image" content="{{ replaceRE `(?s).*src="(.+?)".*` "$1" . | absURL }}">
  {{ end }}{{ end }}
{{ else }}
  <meta property="og:image" content="{{.Site.BaseURL}}{{ .Site.Params.og_image }}"> <!-- use 1.91:1 minimum 1200x630 -->
  {{ if (findRE `(?s)<img.+?>` .Content) }}{{ range $k, $_ := findRE `(?s)<img.+?>` .Content }}{{ if $k }}{{ end }}
      <meta property="og:image" content="{{ replaceRE `(?s).*src="(.+?)".*` "$1" . | absURL }}">
  {{ end }}{{ end }}
{{ end }}

{{- $iso8601 := "2006-01-02T15:04:05-07:00" -}}
{{- if .IsPage }}

{{- if not .PublishDate.IsZero }}<meta property="article:published_time" {{ .PublishDate.Format $iso8601 | printf "content=%q" | safeHTMLAttr }}>
{{ else if not .Date.IsZero }}<meta property="article:published_time" {{ .Date.Format $iso8601 | printf "content=%q" | safeHTMLAttr }}>
{{ end }}

{{- if not .Lastmod.IsZero }}<meta property="article:modified_time" {{ .Lastmod.Format $iso8601 | printf "content=%q" | safeHTMLAttr }}>
<meta property="og:updated_time" {{ .Lastmod.Format $iso8601 | printf "content=%q" | safeHTMLAttr }}>{{ else }}<meta property="og:updated_time" {{ .Date.Format $iso8601 | printf "content=%q" | safeHTMLAttr }}>
{{- end }}

{{- end }}{{/* .IsPage */}}

{{- with .Params.audio }}<meta property="og:audio" content="{{ . }}">{{ end }}
{{- with .Site.Params.title }}<meta property="og:site_name" content="{{ . }}">{{ end }}
{{- with .Params.videos }}
{{- range . }}
<meta property="og:video" content="{{ . | absURL }}">
{{ end }}{{ end }}

{{- /* If it is part of a series, link to related articles */}}
{{- $permalink := .Permalink }}
{{- $siteSeries := .Site.Taxonomies.series }}{{ with .Params.series }}
{{- range $name := . }}
  {{- $series := index $siteSeries ($name | urlize) }}
  {{- range $page := first 6 $series.Pages }}
    {{- if ne $page.Permalink $permalink }}<meta property="og:see_also" content="{{ $page.Permalink }}">{{ end }}
  {{- end }}
{{ end }}{{ end }}

{{- if .IsPage }}
{{ with .Site.Author.facebook }}<meta property="article:author" content="https://www.facebook.com/{{ . }}">{{ end }}
{{ with .Site.Social.facebook }}<meta property="article:publisher" content="https://www.facebook.com/{{ . }}">{{ end }}
{{ with .GetTerms "categories"}}{{ range first 1 . }}<meta property="article:section" content="{{ .LinkTitle | lower  }}">
{{ end }}{{ end }}
{{- with .GetTerms "tags" }}{{ range . }}<meta property="article:tag" content="{{ .LinkTitle | lower  }}">
{{ end }}{{ end }}
{{ end }}

{{- /* Facebook Page Admin ID for Domain Insights */}}
{{- with .Site.Social.facebook_admin }}<meta property="fb:admins" content="{{ . }}">{{ end }}

ps. Turn on minification of your hugo website as well.

Nedjma_Media · October 11, 2023, 12:24pm

I have to put ( baseURL = ‘nedjma.org’ ) is that it?

razon · October 11, 2023, 12:36pm

Yep, you should specify it in your configuration file (baseURL = "https://nedjma.org/"), so that the image URL can be absolute, then be able to displayed on Facebook and Twitter.

You can verify the image URL by checking the source code (CTRL+U, and then search og:image) after re-deploying the site with baseURL set.

Nedjma_Media · October 11, 2023, 1:16pm

I applied the site url but it still doesn’t work! This is the image of the site logo that is displayed, why in your opinion?

razon · October 11, 2023, 1:25pm

It maybe a cache issue or something else, I test your site with another page on Twitter, it works after you specifying the baseURL.

idarek · October 11, 2023, 1:31pm

On this url: Konrad Adenauer | Nedjma Institut

Facebook still do not see correctly the image to pick.

Run post through Facebook Sharing Debugger Sharing Debugger - Meta for Developers

See: Sharing Debugger - Meta for Developers

When you do changes, run again and hit “Scrape Again” button to check if is working.

Also, sometimes OpenGraph is not enough and is worth to implement Schema.

Example of my Schema for posts:

<script type="application/ld+json">
    {
        "@context":"http://schema.org",
        "@type": "BlogPosting",
      "mainEntityOfPage": { "@type": "WebPage" },
      "headline": {{ .Title }},
        {{ if .Params.featuredImage }}"image": {{ .Params.featuredImage | absURL }},{{ else }}
      "image": {{ .Site.Params.og_image | absURL }},{{ end }}
        "url": {{ .Permalink }},
      "datePublished": {{ .PublishDate }},
      "dateModified": {{ .Lastmod }},
        "inLanguage": {{ .Site.LanguageCode }},
        "isFamilyFriendly": "true",
        "copyrightYear": "{{ now.Format "2006"}}",
        "copyrightHolder": "Person",
        "accountablePerson": {
            "@type": "Person",
            "name": {{ .Site.Params.author }},
            "url": {{ absLangURL "/" }}
        },
        "author": {
            "@type": "Person",
        "name": {{ .Site.Params.author }},
            "url": {{ absLangURL "/" }},
          "sameAs":[
          "https://github.com/{{ .Site.Params.github_url }}",
          "https://www.facebook.com/{{ .Site.Params.facebook_url }}",
          "https://{{ .Site.Params.mastodon_instance }}/{{ .Site.Params.mastodon }}",
          "https://www.linkedin.com/in/{{ .Site.Params.linkedin_url }}",
          "https://www.instagram.com/{{ .Site.Params.instagram_url }}",
          "https://www.youtube.com/user/{{.Site.Params.youtube}}"
          ]
        },
        "creator": {
            "@type": "Person",
        "name": {{ .Site.Params.author }},
            "url": {{ absLangURL "/" }}
        },
        "publisher": {
            "@type": "Organization",
        "name": {{ .Site.Params.author }},
            "url": {{ absLangURL "/" }},
            "logo": {
                "@type": "ImageObject",
                "url": {{ .Site.Params.logo | absURL }}
            }
        },
        "articleBody": {{ .Content | safeJS | htmlUnescape | plainify }},
      "description": {{ .Summary | plainify | safeHTML }},
      "keywords": [{{ range $i, $e := .Params.tags }}{{ if $i }}, {{ end }}{{ $e }}{{ end }}]
    }
</script>

razon · October 11, 2023, 2:16pm

I’ve looked close into the source code, and found that the HTML structure is weird, I doubt if it’s correct.

<head/>
...
<meta>
....
<body...>
</body>

There is no opening <head> tag.
The meta tags are not within the <head> tag.

Those points maybe valid, but will make some parsers failed to parse the page content and information, I’d recommend using common structure for HTML page. i.e.

<!DOCTYPE html>
<html>
  <head>
   PUT META HERE
  </head>
  <body>
    ...
  </body>
</html>

Nedjma_Media · October 11, 2023, 3:07pm

@razon @idarek it works now

thank you very much for your help

Topic		Replies	Views
Opengraph help support	9	534	May 11, 2023
Add Featured Image for Social Media share Using Themes	3	2717	April 28, 2020
Hugo Fix for Facebook OpenGraph og:image not pulling images tips & tricks	0	7236	May 8, 2017
Display first image in post in link preview support	8	6250	April 27, 2018
Hugo Site Preview When Posting URL on Social Media	3	1784	September 15, 2018

How to show images preview of website posts on facebook page

Related topics