はじめに
よくこのようにURLと一緒に画像とその説明があるものを目にしたことがないでしょか?
知識ゼロの状態から3日でwebサービスを作ってみました!
— はなちる@ゲーム制作 (@hanaaaaaachiru) 2018年11月28日
《334ノートとは?》
・334ツイートの自分だけのランキングが作れる
・twitterログインなので5秒でログインができる
・機能がめちゃめちゃシンプルなので一瞬で使い方が分かる
・どんどんアップデートするかもhttps://t.co/niftOh4ODH
実はこれはツイッターカードというそうで、今回はこれをなるべくシンプルかつ簡単に実装していきたいと思います。
実装
それでは実際に実装していきたいと思います。
なるでくシンプルということで、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ミント至上主義
もし、このやり方はまずいんじゃ・・・などありましたら指摘していただけると嬉しいです!