【Vue】SPAアプリにOGP設定をする方法を✅

就活面談を通して、つくづくRUNTEQのサポートは手厚いなぁとしみじみ感じている酒ケ酒ケジュール作成中のスバスバです。

さて、今回はSPA(SinglePageApplication)アプリにOGP設定をする方法を✅していきます。

OGPとは
- なんで使う？
- アプリにOGP設定をしていく
twitter share
line share
- 追記

OGPとは

どんなWebページに対してもアクセスされた時の見た目をリッチにしてくれるプロトコル。The Open Graph protocolの略。

https://ogp.me/#metadata

サイトを共有するときにTwitterCardに埋め込まれている画像や、サイトを検索したときにサイト名の下に書かれている説明文なんかが当てはまる。

なんで使う？

共有されたユーザーの訴求率が高まり、より多くの人に記事を見てもらうことが可能になるから。

適切に設定することで、どのようなページで何を伝えたいのかが明確になる。

Facebookではこれを設定することで、分析や解析に役立つ「ページインサイト」の機能を利用することができるようになるらしい。

アプリにOGP設定をしていく

app/views/layouts/application.html.erbのheadタグにmetaタグを埋め込んでいく。

<html>
  <head>
    <title>ZEROKEN</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta property="og:type" content="website"/>
    <meta property="og:title" content="ZEROKEN(ゼロケン) - 一軒目に飲むお酒の順番を診断します。あなたにあったお酒の順番を把握。アルハラを予防しましょう。 - " />
    <meta property="og:url" content="<https://zeroken.herokuapp.com/>" />
    <meta property="og:image" content="<https://firebasestorage.googleapis.com/v0/b/zeroken-42112.appspot.com/o/zeroken_ogp.png?alt=media&token=d9b88af8-c935-40b5-82a5-88117a6e16f7>" />
    <meta property="og:description" content="一軒目に飲むお酒の順番を診断します。あなたにあったお酒の順番を把握。アルハラを予防しましょう。" />
    <meta name="keywords" content="ZEROKEN,ゼロケン,飲み会,酒豪、下戸、お酒の強さ" />
    <meta name="description" content="ZEROKENは、あなたにあった一次会で飲むお酒の量を提供します。" />

    <meta property="og:site_name" content="ZEROKEN(ゼロケン)" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:image" content="<https://japaclip.com/files/alcoholic-beverages.png>" />
    <meta name="twitter:site" content="ZEROKEN(ゼロケン)" />

この状態だと全て共通の内容になってしまう。動的に変更する方法もあるみたい。firebaseと連携させたり、vue-metaやhelperを使って実装できるみたいだが、今回は見送らせていただく。

Twitterでシェアをする機能をつけていく。

Twitterボタンを作成

こちらは、material uiが用意しているアイコンを使用している。

 <v-icon color="#1da1f2"> mdi-twitter </v-icon>

シェアする内容を作成

「material UIで作成したtwitterのiconをv-list-itemで囲み、クリックしたらTwitterシェア画面に遷移すること」を実現したい。順を追って実装を進めていく。

まずはテンプレートファイルから。

<template>
         <v-list-item>
              <v-list-item-action>
                <v-icon color="#1da1f2"> mdi-twitter </v-icon>
              </v-list-item-action>
              <v-btn :href="sns.twitter" target="_blank"> Twitter </v-btn>
            </v-list-item>
          <v-list-item>
</template>

次がjavascript部分になる。

<script>
export default{
data(){
return:{
sns: {
        twitter: '',
        url: '',
        title: '',
        hashtags: 'ZEROKEN,アルハラ防止',
        line: '',
        lineDescription: 'で一次会に向けてお酒の強さを診断しましょう。',
      },
}
},
methods: {
snsUrl() {
      setTimeout(
        function () {
          // 現在のurlをエンコード
          this.sns.url = encodeURIComponent(`https://zeroken.herokuapp.com`);
          this.sns.title = encodeURIComponent(document.title);
          this.sns.twitter =
            '<https://twitter.com/intent/tweet?url=>' +
            this.sns.url +
            '&text=' +
            this.sns.title +
            '&hashtags=' +
            this.sns.hashtags;
          this.sns.line =
            '<https://timeline.line.me/social-plugin/share?url=>' +
            this.sns.url +
            '&text=' +
            this.sns.title +
            this.sns.lineDescription;
        }.bind(this),
        300
      );
    },
}
}
</script>

解説

encodeURIComponent()

引数をエンコードしている。例えばhttps://zeroken.herokuapp.comは下記のようエンコーディングされる。

encodeURIComponent(<https://zeroken.herokuapp.com>)

⇨https%3A%2F%[2Fzeroken.herokuapp.com](<http://2fzeroken.herokuapp.com/>)

**https://twitter.com/intent/tweet?url=**

⇨Twitterシェアする時のurl。url=の後ろにアプリのURLを続ける。

&text=

⇨ツイートにデフォルトで表示させる文字を設定させる

&hashtags=

⇨ツイートにデフォルトで表示させるハッシュタグを設定させる

実際にシェアされる時のツイートを確認

twitter社が用意しているtwitter card validatorで実際にシェアされる時のツイートを確認することができる。

(https://cards-dev.twitter.com/validator)

lineシェアも先程とほとんど同じロジックで実装できてしまう。

実際にシェアボタンを押してみると下記のような画面に遷移する。

送る人を自分で選択し、送信ボタンを押す。なんかLineでシェアすると気まずい空気が流れる。

追記

アプリのイメージ画像が出来上がった！自分で作ったにしては上出来！！酒とゼロケンの融合！

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

OGPとは

なんで使う？

アプリにOGP設定をしていく

twitter share

シェアする内容を作成

解説

実際にシェアされる時のツイートを確認

line share

追記