OGP設定にドハマリして 涙
Twitterカードの表示を調べていたら、The Open Graph protocolというものがSNSにホームページをシェアする際にとてもいいということで調べてたのですが、結果的にどうしていいのかわからなくなったので記事にしてみました。
まず、SNSでホームページをシェアする際に概要みたいな感じの表示にするしくみのようなのですが・・・
どうしてもわからなかった事。
meta property="og:site_name"
これってどこに表示されるの？
WEBで散々調べたけど、的確な答えのページが無い！どこに表示されるのよこれ！
Twitter→Card validator
Facebook→シェアデバッガー
まず、Twitterカードには必要ないよね。Facebookも表示には関係なさそうなんですけど・・・要素なの？諦めました。おしえて専門の人！一般的にどこで表示されてるのか。Facebook→シェアデバッガーしかかくにんできなかったんですけど・・・
ということで、TwitterカードだけでいいのならOGPなんて設定しなくていいのでは無いかとおもいます。
SNSによって優先順位が違う
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.eyebright.jp/index.html">
<meta property="og:site_name" content="eyebright">
<meta property="og:title" content="東京で一番速くディスクコピー出来る専門店">
<meta property="og:description" content="都内最速ＤＶＤコピー専門店 爆速コピーはアイブライト、飯田橋A2出口より走って12秒">
<meta property="og:image" content="https://www.eyebright.jp/images/fb-ogp-01.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@eyebright1996">
<meta name="twitter:title" content="ＤＶＤコピー専門店アイブライト">
<meta name="twitter:description" content="都内最速ＤＶＤコピー専門店 超速コピーはアイブライト、飯田橋A2出口より走って12秒">
とりあえずこんな設定にしてみたんですけど・・・
◉Twitterでは
<meta name="twitter:title" content="ＤＶＤコピー専門店アイブライト">
<meta name="twitter:description" content="都内最速ＤＶＤコピー専門店 超速コピーはアイブライト、飯田橋A2出口より走って12秒">
これが優先され、まあ、Twitterのタグだから優先されそうですが・・・
— DVDコピー激安＠アイブライト (@EyebrightTokyo) July 29, 2020
◉facebookとnoteは
<meta property="og:title" content="東京で一番速くディスクコピー出来る専門店">
<meta property="og:description" content="都内最速ＤＶＤコピー専門店 爆速コピーはアイブライト、飯田橋A2出口より走って12秒">
こっちが優先されました。
おまけ
<meta property="og:type" content="website">
これもどう必要なのか、"website"と"article"の使い分けについて使い分けたらどうなるのかを書いているサイトは無かった。日本語では。意味はわかるけど、設定して見た目がどうなるのか、記述が無いとどう困るのかとか全然書いてないよね。
ブロガーならそれを設定するとどうなるのかってサイトを作って欲しい。他力本願寺（笑）
おまけ２
この比較サイトが一番秀逸だった。好き。
一般的なヘッダー要素については
分かりやすい。
ミニマムな情報で必要なことだけ書いてある。