Vue.jsに動的OGP画像を実装する方法3選
OGP画像の重要性 ogp画像はシェアされた際に、シェアした人のタイムラインにページタイトル・URL・概要・画像を表示させる仕組みのことを指します。OGPを正しく設定することで訴求力が高まり、SNSからの訪問者を増やすことに繋がります。 しかしながらTwitterのクローラーはjavascriptを実行しない為、Vueを用いたSPAではindex.htmlに設定されたOGP画像のみ返す事ができます。つまりurl毎にOGP画像を変えたり、文章や画像を生成することはVue単体では不可能です。 1. Server Side Rendering サーバーサイドレンダリング(SSR)はその名の通りサーバー側でアプリケーションの HTMLを生成し、レスポンスとして返すことを言います。SPAは表示したいものがあれば、都度APIから取得してくるのに対してSSRは初回のみAPI通信が不要なHTMLを返すのです。初月のみ無料、初月以降月額料金になるサブスクみたいな感じですかね。 URLによってJavascriptを使わずにHTMLファイルを変えられるので、動的にOGPも編集できます Pros: ページの読み込み高速化、SEOにも良い Cons: SPAを作り直す必要がある、技術取得コストが高い 要件定義の段階のプロジェクトにはSSRは有力な候補になります。既存のSPAアプリをSSRに変更するにはとても時間がかかりそうです。 2. Dynamic Rendering ダイナミック レンダリングとは、特定のユーザーエージェントを対象に、クライアント側でレンダリングされるコンテンツとプリレンダリングされるコンテンツを切り替えることを指します。人によって態度を変える上司みたいな感じだと考えれば想像に難くないですね。Twitter Botなど特定のクライアントの時のみOGP画像が設定されたHTMLファイルを返すことでURLごとに違うOGPを返す事ができます。 Pros: 導入がSSRより簡単、SEOにも良い Cons: 画像や文章の生成が動的にできない 3. バックエンド側がOGPを返す フロントエンドURLへのリダイレクトとOGPがセットされたHTMLファイルを返すエンドポイントをバックエンドで実装します。Twitter クローラーはjavascriptを実行しないのでOGPのみ表示するのに対し、エンドポイントにアクセスしたユーザーはフロントエンドにリダイレクトされます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta property="og:title" content="タイトル"> <meta property="og:image" content="画像"> <meta property="og:description" content="サイトの説明"> <meta property="og:url" content="サイトのURL"> <meta property="og:type" content="website"> <meta property="og:site_name" content="サイトの名前"> <meta name="twitter:site" content="@tos"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="タイトル"> <meta name="twitter:image" content="画像"> <meta name="twitter:description" content="説明"> <script> window....