1 min read

GridsomeでTwitterやYouTubeをembedで埋め込む

nabeen

SSG の弱い部分の一つに embed がある(と思っている)。

僕は Twitter の埋め込みを結構使うんだけど、SSG だと多くの場合、WEB サイトで開いて埋め込み用のコードをコピーしてくる必要がある。

一方で、みんな大好き WordPress やはてなブログの場合、URL をコピペすれば embed で展開してくれる。

ブラウザ拡張とか使えばもしかしたらひと手間くらいは省けるのかもしれないが、それでも若干手間がかかるのは間違いない。僕は Tweetbot をメインで使っているので、Tweetbot から chrome を開くってこと自体が手間だと感じてしまう。

Gridsome での実現方法

Gridsome ではプラグインを使えば embed できる。野良プラグインはいくつかありそうだけど、公式で紹介されていたのは以下。

README を見てみると一番上のプラグインが下の 2 つを内包してる感じだったので、@noxify/gridsome-plugin-remark-embedを使ってみることにした。

導入方法

まずは公式通りにnpm installする。

$ npm install --save @noxify/gridsome-plugin-remark-embed

設定自体はこんな感じ。公式とは少し違うが、以下の箇所に設定した。

module.exports = {
  transformers: {
    remark: {
      plugins: [
        [
          '@noxify/gridsome-plugin-remark-embed',
          {
            enabledProviders: ['Youtube', 'Twitter', 'Gist'],
            Twitter: {
              align: 'center',
            },
          },
        ],
      ],
    },
  },
};

基本はこれでおしまい。簡単。

YouTube

YouTube であれば、この時点ですでに embed できる。

この記述をすれば、

https://www.youtube.com/watch?v=ony539T074w

こんな感じに展開してくれる。白日いいよね、毎日聞いてる。

しゅごい(小並感)。

Twitter

さて次は Twitter だが、これはちょっとひと手間かかる。

公式サイトにある通り、外部 JS を読み込む必要があるので、それの対応をしていく。

The Twitter embed requires the following external asset:

https://platform.twitter.com/widgets.js

どこに書けば追加できるんや...と思ってたら、公式サイトに答えはあった。困ったら公式サイトは真理。main.jsに書いていく。

Populating - Gridsome

こんな感じで OK。

export default function(Vue, { head }) {
  head.script.push({
    src: 'https://platform.twitter.com/widgets.js',
    async: true,
  });
}

この記述をすれば、

https://twitter.com/_nabeen/status/1187741058513473537

こんな感じに展開してくれる。

はい優勝。

SEO 的なところ

ここでちょっと気になることがあって、それは SEO 周り。

他の人のブログとか見てると、Tweet 貼り付けのあとにblockquoteでわざわざテキストでも貼り付けてる人がいて、embed だと googlebot が読んでくれないのかも?という懸念が残る。

まぁでも Gridsome の仕組み上、build 時に普通にblockquoteで吐き出されそうだな?と思ったので、実際に build してみたらビンゴ。

以下のようにちゃんとblockquoteで出力されていた。

<div>
  <blockquote
    class="twitter-tweet"
    align="center"
    data-dnt="true"
    data-theme="light"
  >
    <p lang="ja" dir="ltr">embedはいいぞおじさん「embedはいいぞ」</p>
    — nabeen (@_nabeen)
    <a
      href="https://twitter.com/_nabeen/status/1187741058513473537?ref_src=twsrc%5Etfw"
      >October 25, 2019</a
    >
  </blockquote>
</div>

まぁ僕の中ではブログの SEO 対策はもはや無意味だという結論に帰着しているので、個人的にはどっちでもいいことである。

P.S.

これで Twitter の貼り付けが非常に楽になった。控えめに言って最高である。