~mpldr/website

50328b698db7627f7bee4a92323ccd9ea8d8693a — Moritz Poldrack 2 months ago 67b591b
add lesson 5 to the opengraph post
2 files changed, 24 insertions(+), 2 deletions(-)

M content/blog/opengraph-with-hugo.md
M themes/hugo-98/layouts/partials/opengraph.html
M content/blog/opengraph-with-hugo.md => content/blog/opengraph-with-hugo.md +22 -0
@@ 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

M themes/hugo-98/layouts/partials/opengraph.html => themes/hugo-98/layouts/partials/opengraph.html +2 -2
@@ 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 }}