HB Framework
Malformed Open Graph/Twitter Cards Image meta #33
-
|
Sorry, I couldn't find out where to put this issue at. My expectation for Open Graph and Twitter Cards are like these:
I always write post front matter like this: ---
images:
- 001.webp
---It should refer to But today, I found that I don't see any 'preview image' in Discord's link preview embed. Discord uses Open Graph (or Twitter Cards) to create fields of embed, so I inspected my blog's meta with opengraph.xyz. According to Official Hugo Documentation, Hugo supports both Open Graph and Twitter Cards. Post pagesWhen I inspected meta with one of my blog post link, I found <meta property="og:image" content="http://tetralog.haipa.xyz/001.webp">
<meta name="twitter:image" content="http://tetralog.haipa.xyz/001.webp">They are pointing to non-existent image link. The correct value would be like this: <meta property="og:image" content="https://tetralog.haipa.xyz/blog/genshin-impact/misc/re-adventure-rank-30/001.webp">
<meta name="twitter:image" content="https://tetralog.haipa.xyz/blog/genshin-impact/misc/re-adventure-rank-30/001.webp">It seems that Hugo wants to look into Non-post pagesSimilar thing also happens to non-post pages which don't have any For example, if I inspect my blog main page, its meta is like this: <meta property="og:image" content="https://tetralog.haipa.xyz/">
<meta name="twitter:image" content="http://tetralog.haipa.xyz/">I thought that this is because I didn't set # Default Open Graph / Twitter Cards image
images:
- images/card-twitter.pngBut I get this weird error message when building site.What should I do to solve this issue? All I wanted to do was setting default OG/TC image. TL;DR
|
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 13 replies
-
|
This theme uses the built-in template, it's expected, the Let's summary up the images selection order:
|
Beta Was this translation helpful? Give feedback.
-
|
Either way, it would require me to do a lot of work for both copying (optionally) and editing file names and editing content of post files... Before: ---
images:
- 030.webp
---
...
{{< gallery/image src="029:030:031" >}}
...After (Option 1): ---
images:
- 030cover.webp
---
...
{{< gallery/image src="029:030cover:031" >}}
...After (Option 2): ---
images:
- cover.webp
---
...
{{< gallery/image src="029:030:031" >}}
...This is why I asked for allowing I wish if there is a way to automate this... |
Beta Was this translation helpful? Give feedback.
-
|
Will try to create PR to Hugo project those two days. |
Beta Was this translation helpful? Give feedback.
-
|
Oh, many thanks! If I decide to modify and override |
Beta Was this translation helpful? Give feedback.
-
|
No sure, but you can override those two templates: layouts/partials/seo/modules/open-graph/index.html and layouts/partials/seo/modules/twitter-cards/index.html. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you! I should start from there. If you create PR to Hugo, can you let me know about it? I want to subscribe that PR. |
Beta Was this translation helpful? Give feedback.
-
|
No problem. |
Beta Was this translation helpful? Give feedback.
-
|
As for Open Graph and Twitter Cards, I've managed to modify code to correctly set image URL. But since I only have two case, so I'm not sure if this can cover all case or not.
<!-- Open Graph -->
{{- with $.Params.images -}}
{{- range first 6 . }}
{{- $url := "" -}}
{{- if or (hasPrefix . "http://") (hasPrefix . "https://") -}}
{{- $url = . -}}
{{- else -}}
{{- $url = printf "%s%s" $.Permalink . -}}
{{ end -}}
<meta property="og:image" content="{{ $url | absURL }}" />
{{ end -}}
{{- else -}}<!-- Twitter Cards -->
{{- with $.Params.images -}}
{{- $img := index . 0 -}}
{{- $url := "" -}}
<meta name="twitter:card" content="summary_large_image"/>
{{- if or (hasPrefix $img "http://") (hasPrefix $img "https://") -}}
{{- $url = $img -}}
{{- else -}}
{{- $url = printf "%s%s" $.Permalink $img -}}
{{ end -}}
<meta name="twitter:image" content="{{ $url | absURL }}"/>
{{ else -}} |
Beta Was this translation helpful? Give feedback.
-
Just noticed this, You shouldn't specify the |
Beta Was this translation helpful? Give feedback.
-
|
The second error was caused by the hugomods/images#26, probably need to rename it to others. |
Beta Was this translation helpful? Give feedback.
-
|
@TetraTheta the second error should be fixed by https://github.com/hugomods/images/releases/tag/v0.8.3. |
Beta Was this translation helpful? Give feedback.
No sure, but you can override those two templates: layouts/partials/seo/modules/open-graph/index.html and layouts/partials/seo/modules/twitter-cards/index.html.