GitHubリポジトリをソーシャルメディアに貼った時のカッコ良さを気にしてみた

GitHubリポジトリをソーシャルメディアに貼った時の展開のされ方が気になったので、
この記事ではシェア用のGitHub Pagesを作ることで問題の回避を試みます。

展開されるカードのビフォーアフター

先に Twitter, Facebook, LinkedIn において、
URL共有時に展開されるサマリーカードの改善前後の比較画像を貼っておきます。
左がリポジトリをそのまま貼った時のもの、右がシェア用のページを貼った時のものです。

リポジトリをそのまま貼った時の問題点

自分のGitHubリポジトリをそのままソーシャルメディアに貼ると、次の問題が起こります。

• 自分のGitHubアカウントのアイコンが展開されて照れくさい
• LinkedInに貼るとアイコンがめっちゃアップになってスゴみを感じる
• TwitterではContribute to <repository-name> development by creating an account on GitHubという記述が追記されて、たま消したいことがある

解決法ないのかしらと探してみたところ、githubの要望受付リポジトリに立てられたSupport custom (per repository) og:image thumbnails.というIssueを発見。
二年ほど前から「リポジトリごとにロゴ画像を設定したいッッッ」という要望はあったようです。
この機能あると便利ですね。

ソーシャルメディア上での見た目を改善する方法

ひとまず今回は自力救済でなんとかします。

GitHubリポジトリのメタタグはおそらく制御できないので、
他にソフトウェアを紹介するための公式ウェブサイトを作るしかなさげです。
これはGitHub Pagesが使えるので、設定方法が分かっていれば時間をかけずに構築できます。

手順:

• GitHub Pagesで公開するためのドキュメントを作る（README.mdの使い回し可）
• リポジトリのロゴ画像を作る（高さ630 / 幅1200 参考 Qiita: OGP画像サイズ）
• jekyll-seo-tagsに読んでもらうためのコンフィグ（_config.yml）を書く
• GitHub Pagesで公開する

ちなみにコンフィグ（_config.yml）はこんな感じです。
ロゴ画像とtwitterユーザ名の設定しかしてないですね。

theme: jekyll-theme-cayman
twitter:
  username: set0gut1
defaults:
  - scope:
      path: ""
    values:
      image:
        path: /img/logo.jpg
        height: 630
        width: 1200

以上の作業の後、GitHub Pagesの方のURLをソーシャルメディアに貼ると、冒頭のスクリーンショットのように良い感じに展開されました。

成果物

• リポジトリ https://github.com/set0gut1/good-looking-repository/
• ウェブページ https://set0gut1.github.io/good-looking-repository/

参考リンク

• ソーシャル展開時の見た目チェックツール（公式）
  • Twitter card validator
  • Facebook share debugger
  • LinkedInは投稿欄にURLを打ち込むとプレビューされます
• コンフィグの設定項目の詳細（SEO用メタタグに関するものだけ）
  • About Jekyll SEO Tag
• GitHub Pages自体については次の記事が参考になります
  • Qiita: GitHubを使って3分でHPを公開する。