2 files changed, 24 insertions(+), 2 deletions(-)

M content/blog/opengraph-with-hugo.md
M themes/hugo-98/layouts/partials/opengraph.html

@@ 268,6 268,28 @@ images, there are fewer pixels the following operations apply to. If you
 thought about it, good on you. If you didn't, you're welcome for significantly
 faster builds.
 
+### Lesson 5: URLs, not paths
+
+Remember the snippet where you include the OpenGraph preview in the header of your page? Turns some, but not all, websites don't like paths and would prefer URLs. So for maximal compatibility, it should be changed like this:
+
+```gitdiff
+  {{ with resources.Get "opengraph.png" | images.Filter $filters }}
+  <meta property="og:url" content="{{ $.Page.Permalink }}">
+  <meta property="og:type" content="website">
+  <meta property="og:title" content="{{ $.Page.Title }}">
+  <meta property="og:description" content="{{ $.Page.Description }}">
+- <meta property="og:image" content="{{ .RelPermalink }}">
++ <meta property="og:image" content="{{ .Permalink }}">
+  <meta name="twitter:card" content="summary_large_image">
+  <meta property="twitter:domain" content="moritz.sh">
+  <meta property="twitter:url" content="{{ $.Page.Permalink }}">
+  <meta name="twitter:title" content="{{ $.Page.Title }}">
+  <meta name="twitter:description" content="{{ $.Page.Description }}">
+- <meta name="twitter:image" content="{{ .RelPermalink }}">
++ <meta name="twitter:image" content="{{ .Permalink }}">
+  {{ end }}
+```
+
 [^1]: Certainly long enough to take a look into how to make something appear
       random, while being strictly deterministic.
 [^2]: I definitely knew that all along and didn't smash my head against the

@@ 54,11 54,11 @@
 <meta property="og:type" content="website">
 <meta property="og:title" content="{{ $.Page.Title }}">
 <meta property="og:description" content="{{ $.Page.Description }}">
-<meta property="og:image" content="https://moritz.sh{{ .RelPermalink }}">
+<meta property="og:image" content="{{ .Permalink }}">
 <meta name="twitter:card" content="summary_large_image">
 <meta property="twitter:domain" content="moritz.sh">
 <meta property="twitter:url" content="{{ $.Page.Permalink }}">
 <meta name="twitter:title" content="{{ $.Page.Title }}">
 <meta name="twitter:description" content="{{ $.Page.Description }}">
-<meta name="twitter:image" content="https://moritz.sh{{ .RelPermalink }}">
+<meta name="twitter:image" content="{{ .Permalink }}">
 {{ end }}