fix implement og image (#12)

* fix implement og image
jmau111 · Jan 5, 2023 · efa7e23 · efa7e23
1 parent de30542
commit efa7e23
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 28 deletions.
diff --git a/README.md b/README.md
@@ -52,7 +52,28 @@ It's not the best practice, but I like to keep things simple.
 
 That's why I call svgs in templates now.
 
-### Subheader and featured images
+### Images
+
+#### Default image
+
+Use absolute URLs:
+
+```
+[params]
+  defaultImage = "https://raw.githubusercontent.com/jmau111/hugo-theme-ava/main/images/default.jpeg"
+```
+
+#### Default og & meta image
+
+Use absolute URLs:
+
+```
+[params]
+  [params.meta_tags]
+    meta_og_image = "https://raw.githubusercontent.com/jmau111/hugo-theme-ava/main/images/default.jpeg"
+```
+
+#### Subheader and featured images
 
 Use the `image` parameter in your frontmatter (posts). If you want to use an external image use an absolute path.
 

diff --git a/layouts/partials/meta-image.html b/layouts/partials/meta-image.html
@@ -0,0 +1,6 @@
+{{- with .image }}
+<meta itemprop="image" content="{{ . | safeHTMLAttr }}" />
+<meta property="og:image" content="{{ . | safeHTMLAttr }}" /> 
+<meta name="twitter:image" content="{{ .| safeHTMLAttr }}" />
+<meta name="twitter:image:src" content="{{ . | safeHTMLAttr }}" />
+{{- end }}
diff --git a/layouts/partials/og.html b/layouts/partials/og.html
@@ -1,48 +1,52 @@
 <!--
     Provided by https://www.skcript.com/svr/perfect-seo-meta-tags-with-hugo/
 -->
-<title itemprop="name">{{ .Title }} | {{ .Site.Params.meta_tags.meta_og_title }}</title>
-<meta property="og:title" content="{{ .Title }} | {{ .Site.Params.meta_tags.meta_og_title }}" />
-<meta name="twitter:title" content="{{ .Title }} | {{ .Site.Params.meta_tags.meta_og_title }}" />
-<meta itemprop="name" content="{{ .Title }} | {{ .Site.Params.meta_tags.meta_og_title }}" />
-<meta name="application-name" content="{{ .Title }} | {{ .Site.Params.meta_tags.meta_og_title }}" />
+{{- $permalink := .Permalink -}}
+{{- $title := .Title -}}
+{{- $og_title := .Site.Params.meta_tags.meta_og_title -}}
+{{- $desc := .Params.description | default .Site.Params.meta_tags.meta_description -}}
+{{- $og_image := .Site.Params.meta_tags.meta_og_image -}}
+<title itemprop="name">{{ $title }} | {{ $og_title}}</title>
+<meta property="og:title" content="{{ $title }} | {{ $og_title}}" />
+<meta name="twitter:title" content="{{ $title }} | {{ $og_title}}" />
+<meta itemprop="name" content="{{ $title }} | {{ $og_title}}" />
+<meta name="application-name" content="{{ $title }} | {{ $og_title}}" />
 <meta property="og:site_name" content="{{ .Site.Params.meta_tags.meta_og_sitename }}" />
 
-<meta name="description" content="{{ .Params.description | default .Site.Params.meta_tags.meta_description }}" />
-<meta itemprop="description" content="{{ .Params.description | default .Site.Params.meta_tags.meta_description }}" />
-<meta property="og:description" content="{{ .Params.description | default .Site.Params.meta_tags.meta_description }}" />
-<meta name="twitter:description" content="{{ .Params.description | default .Site.Params.meta_tags.meta_description }}" />
+<meta name="description" content="{{ $desc | safeHTMLAttr }}" />
+<meta itemprop="description" content="{{ $desc | safeHTMLAttr }}" />
+<meta property="og:description" content="{{ $desc | safeHTMLAttr }}" />
+<meta name="twitter:description" content="{{ $desc | safeHTMLAttr }}" />
 
-<base href="{{ .Permalink }}">
-<link rel="canonical" href="{{ .Permalink }}" itemprop="url" /> 
-<meta name="url" content="{{ .Permalink }}" />
-<meta name="twitter:url" content="{{ .Permalink }}" /> 
-<meta property="og:url" content="{{ .Permalink }}" />
+<base href="{{ $permalink }}">
+<link rel="canonical" href="{{ $permalink }}" itemprop="url" /> 
+<meta name="url" content="{{ $permalink }}" />
+<meta name="twitter:url" content="{{ $permalink }}" /> 
+<meta property="og:url" content="{{ $permalink }}" />
 
 <meta property="og:locale" content="{{ .Language.Lang }}">
 <meta name="language" content="{{ .Language.LanguageName }}">
 {{ range .AllTranslations }}
-  <link rel="alternate" hreflang="{{ .Language.Lang }}" href="{{ .Permalink }}" title="{{ .Language.LanguageName }}">
+  <link rel="alternate" hreflang="{{ .Language.Lang }}" href="{{ $permalink }}" title="{{ .Language.LanguageName }}">
 {{ end }}
 
 {{ with .Params.image }} 
-  <meta itemprop="image" content="{{ . | absURL }}" />
-  <meta property="og:image" content="{{ . | absURL }}" /> 
-  <meta name="twitter:image" content="{{ . | absURL }}" />
-  <meta name="twitter:image:src" content="{{ . | absURL }}" /> 
+  {{- if or (hasPrefix . "//") (or (hasPrefix .  "http://") (hasPrefix . "https://")) }} }}
+    {{- partial "meta-image" (dict "image" .)}}
+  {{- else }}
+    {{- $img := print $permalink . }}
+    {{- partial "meta-image" (dict "image" $img) }}
+  {{- end }}
 {{ else }}
-  <meta itemprop="image" content="{{ .Params.image | default .Site.Params.meta_tags.meta_og_image | absURL }}" />
-  <meta property="og:image" content="{{ .Params.image | default .Site.Params.meta_tags.meta_og_image | absURL }}" />
-  <meta name="twitter:image" content="{{ .Params.image | default .Site.Params.meta_tags.meta_og_image | absURL }}" />
-  <meta name="twitter:image:src" content="{{ .Params.image | default .Site.Params.meta_tags.meta_og_image | absURL }}" /> 
+  {{- partial "meta-image" (dict "image" $og_image )}}
 {{ end }}
 
-<meta property="og:updated_time" content={{ .Lastmod.Format "2006-01-02T15:04:05Z0700" | safeHTML }} />
+<meta property="og:updated_time" content={{ .Lastmod.Format "2006-01-02T15:04:05Z0700" | safeHTMLAttr }} />
 <link rel="sitemap" type="application/xml" title="Sitemap" href="{{ .Site.BaseURL }}sitemap.xml" /> 
 
 {{ with .OutputFormats.Get "RSS" }}
-  <link href="{{ .Permalink }}" rel="alternate" type="application/rss+xml" title="{{ $.Site.Title }}" />
-  <link href="{{ .Permalink }}" rel="feed" type="application/rss+xml" title="{{ $.Site.Title }}" />
+  <link href="{{ $permalink }}" rel="alternate" type="application/rss+xml" title="{{ $.Site.Title }}" />
+  <link href="{{ $permalink }}" rel="feed" type="application/rss+xml" title="{{ $.Site.Title }}" />
 {{ end }}
 
 <meta name="robots" content="index,follow" /> 

diff --git a/layouts/partials/subheader.html b/layouts/partials/subheader.html
@@ -1,5 +1,5 @@
 {{- $image := .context.Params.Image | default .site.Params.DefaultImage -}}
-<header class="subheader" style="background-image: url({{ $image | safeHTML }});">
+<header class="subheader" style="background-image: url({{ $image | safeHTMLAttr }});">
     <div class="title-container slide-invert"> 
         {{- if .context.IsHome }}
             <h2 class="h1 post-title">{{ .context.Title | default .site.Title }}</h2>