vue

素のHTMLファイルで書くシェアボタン <a target="_blank" rel="nofollow" role="button" href="https://twitter.com/intent/tweet?text=こんにちは！"> Twitterで共有 </a> hrefの中にツイート用URLとツイート内容を入れる感じです。ちなみにこんにちは！の部分はパーセントエンコードでエスケープすることを強く推奨します。ただ、Vue routerを使っていると<a>タグはハードコーディングみたいで気持ち悪いのでVue routerで完結させるようにさせます。 Vue routerでシェアボタン router/index.jsのroutesに以下のパスを追加します const routes = [ { path: '/share', name: 'Share', beforeEnter() { const url = 'https://twitter.com/intent/tweet?text='; const text=`こんにちは！`; const encodedText = encodeURIComponent(text); //エスケープ処理 window.open(url + encodedText, '_blank'); } }, ] export default router ルートにwindow.open()かlocation.href=''を使うことでページ移動出来ます。移動先がツイート内容を付け加えたツイート用URLになる訳です。 <router-link :to="{name: 'Share'}"> ツイートする </router-link> vue routerを使ったシェアボタンの完成です。 vue routerに変数を渡したい人向け const routes = [ { path: '/share', name: 'Share', beforeEnter(to) { //変更点1 const url = 'https://twitter....

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....

Vue routerでTwitterシェアボタン

Vue.jsに動的OGP画像を実装する方法3選