HUGOで整えるSNSシェア時の見た目

1. 経緯

このブログのリンクをTwitterなどに貼り付けたときに見栄えが良くなかったので、metaタグなどを埋め込んで綺麗してみました。 方法を忘れたり、今後新たな記事を書くときに設定し忘れないようにここに記します。

↑↑上記のようなリンクを↓↓下記のように整えました。記事のリンクは違いますが、見栄え良くなっている気がしますね。

2. やったこと

リンクの見栄えを整えるために設定した項目が３点あります。

1. タイトルの設定
2. 概要の設定
3. サムネの設定

やることは下記です。

• metaタグの埋め込み
  • Open Graph protocol¹,²
  • Twitter用³
• 表示の確認
  • Twitter⁴
  • LINE
  • Discord
  • Slack

3. metaタグの埋め込み

記事のmdファイルの先頭にtitleとdescriptionとimagesを指定してあげれば、いい感じにmetaタグを埋め込んでくれます。

---
title: "HUGOで整えるSNSシェア時の見た目"
description: "リンクを貼り付けたときに、サムネや概要を整える方法のメモです。metaタグの設定をHUGOでする方法などをまとめました。"
images:
    - assets/20220121/20220121_thum.png
---

HUGOには各SNS向けのmetaタグなどをいい感じに埋め込んでくれるテンプレート³が用意されているので、特別タグを埋め込む必要もありませんでした。config.tomlにtwitter_cardsをtrueにすることでtwitter用のmetaタグが埋め込まれるようになります。

[Params]
twitter_cards = true

4. 表示の確認

他のブログなどを拝見すると1200x600pxくらいの画像を使われていることが多いので、 こんな画像を用意して、いくつかのサービスでどんなふうにリンクが描画されるのか確認してみました。

各サービスで確認してみたのが下記です。

なんかいい感じに表示されていますね。 今後は1200x600くらいのサイズで画像を用意しようと思います。

既に公開されている記事ですと、下記のサービスを利用することで共有された時のプレビューなどができるようです。

• https://cards-dev.twitter.com/validator
• https://developers.facebook.com/tools/debug/?locale=ja_JP

LINEとSlackとDiscordは実際に貼り付けて確認しました。

主要なSNSのリンク共有時のプレビューみたいなものをまとめてできる方法が欲しいなと思いました。 ローカルで立てたサーバーのリンクをプレビューできるようなツールとかもあったら便利だなと思いました。

5. まとめ

書き始めた当時は色々書けることがあったと思っていたようですが、 時間を置いて書き出してみると何も書くことがなくて何を記事にしたかったのだろうかと今は思っています。 サムネ作るところが一番楽しかったことは覚えています。

以上