twitterにリンクを張ったら出てくるアレ（twitterカード）を設定する

ブログをURLをtwitterに貼り付けたとき表示される、twitterカードの設定をしました。その備忘録です。

プラグイン vuepress-plugin-seo のインストールと設定

インストール：

npm i vuepress-plugin-seo -D

config.jsの設定はこちらを参考にしました。

VuePressでSEOに強いOGPを自動生成する

plugins: {
  'seo': {
    description: ($page, $site) =>
      $page.frontmatter.description ||
      ($page.excerpt && $page.excerpt.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g, '')) ||
      $site.description || '',
    title: ($page, $site) => $page.title || $site.title,
    author: (_, $site) => $site.themeConfig.author,
    twitterCard: _ => 'summary_large_image',
  },
},

OGP Checkerでの確認

ChromeプラグインのLocalhost OGP チェッカーで設定が正しくされているかチェックします。

手順はここを参考にしました。

2020/09/30 追記：Chromeプラグインを使用せずにCard validatorで確認できました。

サイトマップvuepress-plugin-sitemap のインストールと設定

と、ここまでやってtwitter上で確認しても表示されず……sitemapの設定が必要そうだということで、こちらをやりました。

vuepress-plugin-sitemap

インストール：

npm install vuepress-plugin-sitemap

config.jsの設定は以下の通り。

plugins: {
  'sitemap': {
    hostname: 'https://koktn.github.io/',
    changefreq: 'weekly',
  },
},

robots.txtの設定

robots.txtも必要とのことで設定します。

robots.txt の仕様

User-agetnt: Twitterbot
Disallow:
User-agent: *
Disallow: /log/
Sitemap: https://koktn.github.io/sitemap.xml

User-agetnt: Twitterbotは結果不要な気もしますが、試行錯誤の流れで入れています。また、robots.txtは、src/.vuepress/publicに配置しています。

Google Search Consoleへの登録

Google Search Consoleにsitemapを登録します。

まず、プロパティの追加をします。方法は今回、URLプレフィックスを選択しました。

タグを追加して確認をします。

追加先はconfig.jsです。

head: [
  ['meta', { name: 'google-site-verification', content: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' }],
],

確認ができたら、sitemap.xmlを登録します。

左メニューのサイトマップから、「新しいサイトマップの追加」を行います。

うまく行けば、ステータスが「成功しました」となります。

※プロパティ登録直後だと、私の場合サイトマップの登録に失敗しました。翌日試したらできたので時間がかかるものだと思っておいたほうが良いです。

twitterでの確認

twitterにブログポストのURLを入力して、twitterカードが表示されるかどうか確認します。

それでも表示されないときは（キャッシュクリア）

私の場合、上記手順を試してもうまく表示されなかったのですが、twitterに記載するURLを

https://koktn.github.io/?aaa

とするとうまくいきました。（?を入力して以降の文字列aaaは適当）

こちらを参考にするとtwitterに残っているキャッシュを?でクリアしているそうです。

とりあえず、これで解決しました！