【本を見ながら作ってみる】番外編 SNS（ラインスカイプなど）でサムネ表示させたいッ
後で続きからやっていくのですが、その前に…
スマホなどで見た時サムネ表示をさせたい！
ってことで番外編です。
調べていくとまだまだ沢山あるので
次回引き続き番外編2も書こうと思います。
↓↓のようにサムネ画像を表示するように設定してみました
※ニュースページも同様に設定したので時間がたったら
表示してくれる予定
ラインにもURL貼り付けて確認したら
トップページ、NEWページ共にファビコンが表示されてしまった…(T_T)
だけど、スカイプの画面のように時間がたてば
コーヒーの画像が表示してくれるはず。
…かなり時間待つこと多いというのが私の印象です。
参考にしたサイトはこちら
thumbnailメタタグの設定方法
<meta name="thumbnail" content="https://〇〇〇.com/image/〇〇〇.jpg">
<head prefix="og: https://ogp.me/ns#">とは
→これは初めて知ったけど大事みたい。
OGPを設定するときに避けたいこと
・全ページ全く同じ内容を設定する
・OGP設定できるサイトか否か？確認を怠る
・全ページ全く同じ内容を設定する
→全ページ全く同じ内容を設定すれば、ユーザーへの訴求力が低下するとのこと (T_T)それは嫌だなぁ
…などをわかりやすく解説してくれてます。こちらのことも
大事な一つだと思います。
基本的なOGPの設定手順
OGPはmetaタグをHTMLソースコード内に記述することで
設定すること出来るとのこと。
基本的な流れ
1. head要素に prefix=”og: http://ogp.me/ns#” を追加
2. headerタグ内のmetaタグで所定の要素を追加
3. 必要に応じて「表示用の画像」を用意
<head prefix="og: https://ogp.me/ns#">
<meta property="og:url" content=" ページのURL" />
→絶対パス(http～の形式)
<meta property="og:type" content=" ページの種類" />
<meta property="og:title" content=" ページのタイトル" />
<meta property="og:description" content=" ページの説明文" />
<meta property="og:site_name" content="サイト名・記事の種類" />
→実際によく使われるのは「website」と「article」
トップページの場合はwebsite
それ以外の記事ページの場合はarticleを設定
<meta property="og:image" content=" サムネイル画像のURL" />→これも絶対パス
Twitter独自の設定
<meta name="twitter:card" content="Twitterのカード種類" />
<meta name="twitter:site" content="@ユーザー名" />
OGR画像シュミレーターは便利そう。
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか？