20211022のHTMLに関する記事は1件です。

適切な「og:type」を選択したい

こんにちは。こんばんは。おはようございます。 いつものように新規サイトを作ってて、いつものようにOGPタグを設定しようとして、いつものようにOGPのmetaタグを書いててふと手が止まりました。 検索すると「og:typeのTOPはwebsite、下層はarticle」って言われてるけど今もそうなの? …………調べようか。 まずは結論 種類 og:type 備考 TOP website indexページ 下層ページ website articleに該当しない個別ページアーカイブとかも含む 記事、投稿 article ブログ記事など プロフィール profile プロフィールページSNSのホーム画面とか 本 book 電子書籍のブラウザビューアとか 音楽 music 音楽プレイヤーがメインのページ 動画 video 動画プレイヤーがメインのページ ogp.meに書かれてることがすべてでした。そりゃそうだ 記事や投稿として扱えるならarticle、そうでないならデフォルト設定のwesiteでよさそうです。 その他にもページの用途に合わせてprofileにしたり、videoやmusicの場合はさらにいろいろ情報を入れ込むとイケイケかもしれません。 リファレンス 「TOPはwebsite、下層はarticle」はどこから? 調べたこと 「OGP」で検索して出てきた記事を読む 各リファレンスを読む 大手サイトをチェック(上記のリファレンスサイトとかYouTubeとか) Wayback Machine で過去の仕様を確認してみる やったのはだいたいこんな感じ。 上記リファレンスサイトには「TOPはwebsite、下層はarticle」みたいな記述は見当たりませんでした。にも拘わらず情報サイトにはog:typeを断言しているサイトが多い印象でした。どこに書いてあるんだよ 2011年10月頃まではog:typeがたくさんあった Wayback Machine や当時の記事を見る限り2011年10月頃まではog:typeの種類がたくさんあったようです。 2011年11月には現行のog:typeになっていたので10月のどこかで改定されたようです。 たまに見かけた「blog」とかECサイトでたまに使ってるのを見かける「product」なんかはこの頃の名残っぽいです。「blog」に関してはリファレンスで削除されたので使わない方がいいかも~と言ってる記事をいくつか見かけましたが、「product」に関しては調べ方が悪いのか目ぼしい情報が見つかりませんでした。 なんだか見えてきたぞ ブログなら(だいたい)間違ってない ブログは基本TOP(アーカイブ)と記事の構成だから「TOPはwebsite、下層はarticle」でだいたい問題ない。しいて言うならTOP以外のアーカイブページもarticleにしたら違和感あるかな?って感じ。 つまり「TOPはwebsite、下層はarticle」はブログ基準の書き方が呪文のように広まったのでは~!? 前提のブログ基準は深淵に消えてしまったようです。 ちなみに Facebook for Developers では 種類 og:type 参考URL TOP website https://developers.facebook.com/ 下層ページ website https://developers.facebook.com/products/ ドキュメントTOP website https://developers.facebook.com/docs/ ドキュメント記事 article https://developers.facebook.com/docs/sharing やはり下層ページでもページで扱うか記事・投稿で扱うかでちゃんと使い分けていました。 まとめ ページの用途に合わせてog:typeを設定しよう! 種類 og:type 備考 TOP website indexページ 下層ページ website articleに該当しない個別ページアーカイブとかも含む 記事、投稿 article ブログ記事など プロフィール profile プロフィールページSNSのホーム画面とか 本 book 電子書籍のブラウザビューアとか 音楽 music 音楽プレイヤーがメインのページ 動画 video 動画プレイヤーがメインのページ 以上! 現在のリファレンスにない「blog」や「product」を入れた場合のメリットデメリットはわかりませんでした。 個人的にはリファレンスに則って設定するのがいいんじゃないかな思います。 ちなみにprofileとかvideoはYouTubeのmetaタグがとても参考になりました。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む