Mono Works

株式会社Mono Works OfficialSite

Twitterカードの設定をhugoのテンプレートに反映

Twitterカードの設定をhugoのテンプレートに反映

これまでなんとなく設定していたTwitterカードについて、きちんとhugoのテンプレートに対応させました。採用したのは、大きな画像の付いたTwitterカード。こんな感じに表示されます。

参考:keitakawamoto/orangebomb.org: My blog contents for Hugo.

やったこと

ブログ記事のトップ画像をTwitterカードに表示するため、archetypes/default.mdのFront Matterにeyecatchを追加。

+++
date = "{{ .Date }}"
slug = ""
title = ""
tags = ["", "", ""]
draft = true
eyecatch = "/img/post/original#01.jpg"
+++

あとは、<head>内にメタタグを設定。OGP設定については、以前から設定していましたが、こちら本家サイトを参考に、トップページとそれ以外のページでtitleimageを別々に設定して、Twitterカード用のタグを追加。

<!-- SEO -->
  <link rel="canonical" href="{{ .Site.BaseURL }}">
  {{ if eq .URL "/" }}
  <title>{{ .Site.Title }}</title>
  {{ else }}
  <title>{{ .Title }}&nbsp;-&nbsp;{{ .Site.Title }}</title>
  {{ end }}
  <!-- og property -->
  <meta property="og:title" content="{{ if eq .URL "/" }}<title>{{ .Site.Title }}</title>{{ else }}<title>{{ .Title }}&nbsp;-&nbsp;{{ .Site.Title }}</title>{{ end }}"></meta>
  <meta property="og:url" content="{{ .Permalink }}">
  <meta property="og:type" content="article">
  <meta property="og:site_name" content="{{ .Site.Title }}">
  <!-- og description -->
  <meta property="og:description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}">
  <meta name="description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}">
  <!-- og images -->
  {{ if eq .URL "/" }}
  <meta property="og:image" content="{{ .Site.BaseURL }}img/mwlogoicon.png">
  {{ else }}
  <meta property="og:image" content="{{ .Site.BaseURL }}{{ .Params.eyecatch }}">
  {{ end }}
  <!-- Twitter Card Summary with large image -->
  <meta name="twitter:card" content="summary_large_image" /></meta>
  <meta name="twitter:site" content="{{ .Site.Social.writer_twitter_id }}"></meta>
  <meta name="twitter:creator" content="{{ .Site.Social.writer_twitter_id }}"></meta>
  <meta name="twitter:title" content="{{ if eq .URL "/" }}<title>{{ .Site.Title }}</title>{{ else }}<title>{{ .Title }}&nbsp;-&nbsp;{{ .Site.Title }}</title>{{ end }}"></meta>
  <meta name="twitter:url" content="{{ .Permalink }}"></meta>
  <meta name="twitter:description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}"></meta>
  {{ if eq .URL "/" }}
  <meta name="twitter:image" content="{{ .Site.BaseURL }}img/mwlogoicon.png"></meta>
  {{ else }}
  <meta name="twitter:image" content="{{ .Site.BaseURL }}{{ .Params.eyecatch }}"></meta>
  {{ end }}

本家サイト:Getting started with cards — Twitter Developers

Twitter Cardに表示する画像条件

Summary card Summary with large image
アスペクト比 1:1 2:1
最小サイズ 144 × 144 ピクセル 300 × 157 ピクセル
最大サイズ 4096 × 4096 ピクセル 同左
最大ファイルサイズ 5MB 同左
対応フォーマット JPG、PNG、WEBP、GIF 同左

はまったところ

画像ファイルは、フルパスで指定しないとアカン。最初、/img/xxxxxx.jpgとしてましたが、https://monoworks.co.jp/img/xxxxxx.jpgとなるように指定しないと、カード自体がうまく表示されませんでした。

確認サイト

下記ページにカードを表示させたいページのURLを入力して、カードが表示されればOKです。

公式:Card Validator | Twitter Developers

おしまい。

comments powered by Disqus
Googleブログ検索
Amazon検索
執筆者
"ぽぽろんち" pporoch
pporoch120
Mono Worksの中の人。DQX内では "ぬここ" の中の人もやってます。好きなことをつらつらと書き留めてます。
"DQX@ぬここ(UD487-754)"
採用案内