はなちるのマイノート

Unityをメインとした技術ブログ。自分らしくまったりやっていきたいと思いますー!

【Vue.js】ツイッターのツイートに画像がついてるツイッターカードのつけ方

はじめに

よくこのようにURLと一緒に画像とその説明があるものを目にしたことがないでしょか?

実はこれはツイッターカードというそうで、今回はこれをなるべくシンプルかつ簡単に実装していきたいと思います。

方針

これを実装するにはmetaタグをつける必要があります。
これらのサイトに細かい詳細について書いてあるのでぜひ一読ください。

saruwakakun.com

www.granfairs.com

実装

それでは実際に実装していきたいと思います。

なるでくシンプルということで、HTMLからmetaタグをつけるためにindex.htmlを開きましょう。
そこにあるheadタグの中に次にコードを入れます。

<meta name="twitter:card" content="カード種類">
<meta property="og:url" content="記事のURL">
<meta property="og:title" content="記事のタイトル">
<meta property="og:description" content="記事の要約(ディスクリプション)">
<meta property="og:image" content="画像のURL">

これを実際に自分のサイトに打ち込んでみた例を載せます。

<meta name="twitter:card" content="summary">
<meta property="og:url" content="https://note-334.firebaseapp.com">
<meta property="og:title" content="334ノート">
<meta property="og:description" content="334ノートを使って自分だけのランキングを作ろう!">
<meta property="og:image" content="https://note-334.firebaseapp.com/logo.png">

また、twitter:cardには2種類があり
・"summary" : 左に小さく画像を表示する
・"summary_large_image" : 大きく画像を表示する
となっています。

さいごに

このやり方はおそらく一番シンプルな方法だと思います。
ネットで検索をすると、動的に変更などの記事が多いようです。
vue-routerでtitleとdescriptionを動的に切り替える - GAミント至上主義
もし、このやり方はまずいんじゃ・・・などありましたら指摘していただけると嬉しいです!