jekyll-seo-tagによるOGP設定を追加し、SNSでプレビューが表示されるように修正

[kcscarrot-konno]

59 への対応として、OGPタグの出力設定を追加しました。

65 で github-pages gemでGitHub Pagesで使用可能なgemを一括で追加する対応を前提としているため、この作業ではローカルへの直接的な jekyll-seo-tag gemのインストールは行っていません。

• jekyll-seo-tag の設定を追加
  • プラグイン設定を追加
  • デフォルトのOGPタグ設定を追加
• jekyll-seo-tag で参照するサムネイル画像のパラメータ名が image だったので、既存記事でサムネイルを指定している front matter変数名を img から image に修正
• デフォルトのサムネイル画像を追加 (作っちゃいました…)

一応ソースコードを確認しての出力内容の確認をしてはいるのですが、OGPタグは実際にプレビューしてみてのデバッグが難しいので、必要であれば一旦デプロイを行って実際に表示を確認しながら調整が出来ると助かります。

OGPタグ出力例(サムネ画像指定なし)

<!-- Begin Jekyll SEO tag v2.8.0 -->
<title>輪読会を開催してみた | KCS キャロットBlog</title>

<meta property="og:title" content="輪読会を開催してみた" />
<meta name="author" content="kcscarrot-shinomiya" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="はじめに" />
<meta property="og:description" content="はじめに" />
<link rel="canonical" href="http://localhost:4000/2024/08/26-circle-reading" />
<meta property="og:url" content="http://localhost:4000/2024/08/26-circle-reading" />
<meta property="og:site_name" content="KCS キャロットBlog" />
<meta property="og:image" content="http://localhost:4000/assets/images/ogp.png" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2024-08-26T00:00:00+09:00" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:image" content="http://localhost:4000/assets/images/ogp.png" />
<meta property="twitter:title" content="輪読会を開催してみた" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"kcscarrot-shinomiya"},"dateModified":"2024-08-26T00:00:00+09:00","datePublished":"2024-08-26T00:00:00+09:00","description":"はじめに","headline":"輪読会を開催してみた","image":"http://localhost:4000/assets/images/ogp.png","mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/2024/08/26-circle-reading"},"url":"http://localhost:4000/2024/08/26-circle-reading"}</script>
<!-- End Jekyll SEO tag -->

OGPタグ出力例(サムネ画像指定あり)

<!-- Begin Jekyll SEO tag v2.8.0 -->

<title>座談会: RubyKaigi 2024 について語る | KCS キャロットBlog</title>

<meta property="og:title" content="座談会: RubyKaigi 2024 について語る" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="座談会: RubyKaigi 2024 について語る" />
<meta property="og:description" content="座談会: RubyKaigi 2024 について語る" />
<link rel="canonical" href="http://localhost:4000/2024/07/19-rubykaigi2024" />
<meta property="og:url" content="http://localhost:4000/2024/07/19-rubykaigi2024" />
<meta property="og:site_name" content="KCS キャロットBlog" />
<meta property="og:image" content="http://localhost:4000/assets/images/rubykaigi2024/logo.png" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2024-07-19T00:00:00+09:00" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:image" content="http://localhost:4000/assets/images/rubykaigi2024/logo.png" />
<meta property="twitter:title" content="座談会: RubyKaigi 2024 について語る" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","dateModified":"2024-07-19T00:00:00+09:00","datePublished":"2024-07-19T00:00:00+09:00","description":"座談会: RubyKaigi 2024 について語る","headline":"座談会: RubyKaigi 2024 について語る","image":"http://localhost:4000/assets/images/rubykaigi2024/logo.png","mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/2024/07/19-rubykaigi2024"},"url":"http://localhost:4000/2024/07/19-rubykaigi2024"}</script>
<!-- End Jekyll SEO tag -->