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?
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.
Please also check whether your baseURL is set, I remmember that it wonât work with relative image (og:image meta tag) URLs.
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.
that said I use the internal templete {{ template â_internal/opengraph.htmlâ . }}
I donât know why there is no reference to the image?
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?
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.
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.
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?
It maybe a cache issue or something else, I test your site with another page on Twitter, it works after you specifying the baseURL.
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>
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>
<head> tag.<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>