猫になりたい

コンサルのデータ分析屋、計量経済とか機械学習をやっています。ｐｙてょｎは3.7を使ってマスコレルウィンストングリーン。

トップ > 初心者向け：Vue.jsで全ページ共通のOGPを設定する

初心者向け：Vue.jsで全ページ共通のOGPを設定する

Vue.jsで全ページ共通の（=静的な）OGPを設定する方法のまとめです。
ページごとに異なる（=動的な）OGPの設定方法については触れません。

この記事を書いた背景

ウェブサービスを作る際に初めてOGPというものをVue.jsで設定してみたのですが、調べても結局どうするのか初心者にはよくわかりませんでした。
そこでVue.jsでOGPを設定するのに必要最低限の情報だけをまとめました。

OGPの設定方法・例

OGPの設定を記載するファイル

Vue.jsで静的なOGPを設定する場合、./public/index.htmlに設定を記載します。

OGPの設定例

以下は自作ウェブサービス「通勤圏サーチ」でのOGPの記載例です

各設定項目の詳細は英語であれば The Website Anatomy -- Google Analytics Visualization Tool がコンパクトに纏まっていておすすめです。
日本語であれば Facebook・TwitterのOGP設定方法まとめ｜ferret が詳細に情報を記載しています。

<!-- OGPを使用することを宣言 -->
<head prefix="og: http://ogp.me/ns#">
<!-- ページタイトル -->
 <meta property="og:title" content="通勤圏サーチ" />
<!-- ページの種類。
トップページなら"Website"、トップページ以外なら"Article"、
ブログなら"blog"を設定する -->
<meta property="og:type" content="website" />
<!-- ページの説明-->
<meta property="og:description" content="職場の最寄駅への通勤時間から住む街を探すサービス" />
<!-- ページのURL（絶対パス）-->
<meta property="og:url" content="https://tuukinken-search.neko-ni-naritai.com/" />
<!-- ページの名前-->
<meta property="og:site_name" content="通勤圏サーチ" />
<!-- アイキャッチ用の画像のURL（絶対パス）-->
<meta property="og:image" content="https://tuukinken-search.neko-ni-naritai.com/ogp-image.png" />

<!-- twitter用の設定-->
<!-- twitterでの表示形式を指定。
"summary", "summary_large_image", "app", "player card"の4種類がある。-->
<meta name="twitter:card" content="summary" />

OGPの設定を確認するためのツール

OGPがきちんと設定できたか見た目を確認するためのツールが幾つか存在します。
私が試した限りでは日本語だと以下のツールが使いやすかったです。 rakko.tools

OGPを設定する際に注意すること

Vue.jsに限らず、OGPを設定する際は以下のことに注意して下さい。

1. URLには絶対パスしか使えない

OGPを設定する際の各種URLは絶対パスで指定する必要があります。 特にアイキャッチ用の画像を指定するところで、つい相対パスで設定したくなるかと思うのでご注意下さい。

2. twitter、facebookでOGPを使うには専用の設定をする必要がある

twitterやfacebookでOGPを使うには専用の設定を記載する必要があります。
詳細は下記の参考サイトを参照して頂きたいですが、twitter用に必要最低限の設定をするだけであれば上に記載してある「OGPの設定例」を丸パクリして貰えれば大丈夫です。

参考資料