多店舗展開ECシステム開発日誌

多店舗化の命題にシステム化を選択したひとり店長奮闘記

NEW ARTICLE
流行りのChatGPTにWordPressの記事生成をさせてみた

SEO対策でHTMLヘッダーに施すogp等の内容と書き方について

SEO対策でHTMLヘッダーに施すogp等の内容と書き方について
目次

SEO対策でHTMLヘッダーに施すogp等の内容と書き方について

XMLとかは置いておいて、Googleさんとお話しする場所は各ページのヘッダーにも存在します。

今回はそんな事柄をまとめて保存しておきます。

SEO＆SNS向けのヘッダー設定はこんな感じ

ヘッダーの文字数多いね。

OGPの設定

▼上のスクリプトのここら辺

OGPとは「Open Graph Protocol」の略。
SNS関係で記事をシェアされた時に「こんなページ」とまとめて表示されるデータがここに集約されてます。

最初の1文は宣言。
OGP設定するよ～と言うアナウンスです。

【 <html lang=”ja” prefix=”og: http://ogp.me/ns#”> 】とhtmlで宣言してもOK。
<head>か<html>かどちらが良いかって論争もあるらしいけど、Facebookの推奨は<head>なのでheadに書くのが無難です。

【 <meta property=”og:url” ~~】からはどんな内容でクリップさせるかの設定になります。

  • property=”og:url”　　　　　SNSに登録されるURL。リンクに使われるので絶対パスで書く必要あり。
  • property=”og:type”　　　　 TOPページか否かなど、ページ区分を知らせるフラグ。※詳細は下で解説。
  • property=”og:title”　　　　 リンクされた時のページタイトル。拡散を望むならバズる命名をする。20文字以内
  • property=”og:description”　ページの詳細で表示される内容。キーワードを網羅しておけば検索対策にもなる。
  • property=”og:image”　　　  シェアされた時の表示画像。絶対パスで書く必要あり。1200×630p、比率「1.91：1」が推奨
  • property=”og:site_name”　　サイト名やブランド名
  • property=”og:locale”　　　　日本語の場合は ja_JP を指定

og:descriptionは80～90字程度に収めないと尻切れトンボになる可能性が高まります。

headやmetaでのサイトのタイプ指示について

基本的にどちらも同じ値を入れます。(headがwebsiteとしたらmetaもwebsite)
指定するタイプにはこんなものがあります。

  1. website　：Webサイトである事を宣言。TOPページに記載する(子ページはarticle)
  2. article　　：WEBサイトの子ページや特に指示事項の無い記事に利用。
  3. blog 　　  ：Blogのサイトトップにで利用。(子ページはarticleでいいようです)
  4. book 　　 ：本の紹介などで利用。パラメーターにはbook:author(著者名)などがある
  5. profile　　：個人情報に付ける。パラメーターにはprofile:first_name/profile:genderなどがある
  6. product　 ：商品/製品で利用。
  7. company　：会社の情報に利用。
  8. music.song　　　　：音楽(1曲)で利用
  9. music.album　　　 ：音楽（アルバム）で利用
  10. music.playlist　　　：音楽（プレイリスト）で利用。music:creatorでプレイリストの製作者を記載
  11. music.radio_station ：ラジオ局などで利用。
  12. video.movie　　：映像に利用
  13. video.episode　：映像に利用
  14. video.tv_show　：映像に利用
  15. video.other　　 ：映像に利用

他にも【article:tag】とか【book:isbn】とか【video:actor】とかで関連する情報を補足していくことができます。
このページはこんな内容という分類用タグなのでこれだけの数が用意されているのでしょうね。

ちなみに、ここでの指示内容によって<head prefix=”article: http://ogp.me/ns/article#”>の記載が変わり、websiteとしたら<head prefix=”website: http://ogp.me/ns/website#”>となります。で、求められるパラメーターも当然変わります。
詳細はこちらから

音楽とか映像に関わらない場合は【website/article/blog/product/profile/company】あたりしか使いません。
基本的にはwebsiteに所属している記事articleの2つで事足りるかと思います。
細かく指示したい場合は設定に気を使うと面白い結果が得られるかも。

ツイッターやFacebookなどへの指示も用意されてます

Fasebookなら

Twitterなら

ツイッターの【twitter:card】ではシェアされた時の記事の並びを指示しています。

summary

画像とテキストが横並び(画像が小さくなる)

summary_large_image

画像がWidth:100% になり記事はその下に配置される

昔からある設定項目

HTML歴の長い人だと「mete keywords が抜けてるぞ」となりますよね。
私もそんな一人でした。

今回改めてSEO対策を見直してみたら、今botさんはmete keywords見ないのだそうです。
知らんかった…。
と言う事はGoogleさんが見る大まかなキーワードは上の3か所…と思ったらdescriptionも検索対策では不要との事。

検索結果の表示でページ解説として出てくるのでコンバージョンには影響しますが、検索時にこの中のワードは見ていないのだそうです。ちなみに、descriptionの文字数は120文字くらいで。

「（SEO的には）適当に書くくらいなら無い方がマシ」

マジですか。まぁ、キーワードを意識しないで紹介文を書けると言うのは気が楽でいいですよね。
背景には計算速度の向上があり「サイトの全文チェックできるから別に要らないよ」と言う事なのだそうです。

上の例ではアプリケーション名の項目があります。

これ、ブログや企業ページでは不要。むしろない方が良いそうです。

Webアプリケーション(うちで言えばWebShopCreatorとか)の場合はここに記載する事でページランクの低下を防げるらしいです。※WEBアプリケーションは同じページが複数できる可能性があるので、その対策として使われる。でも、その場合って一般の目に触れさせたくないものが多いと思うからnoindex指示しているとは思うのだけど…。

検索で対象としたい場合、絶対にやってはいけないnoindex

SEO対策的にはhead内のアレコレよりも記事内容だと言う事が解りました。
でも、どんなにいい記事が書かれていてもやってはいけない事があります。

『Botへのindex拒否指示』

こんな内容がheadに入っていたら即削除しましょう。
※但し、内緒なサイト(ウチだったら顧客別のデモサイトとか)には必須です。

  • インデックス拒否　：<meta name=”googlebot” content=”noindex”>
  • リンクアクセス拒否　：<meta name=”googlebot” content=”noarchive”>
  • ページキャッシュ拒否　：<meta name=”googlebot” content=”nofollow”>
  • プレビュー/スぺニット表示拒否　：<meta name=”robots” content=”nosnippet”>

googleさんのボットへの指示を上の例では下の様に書いています。

実はこれも不要との事。
基本的にすべて見るので見ないで欲しいページに【見ないで】と指示するのが正しい形で、それもページ毎に記載よりもrobots.txtとして外部に書いた方がGoogleBotさんに優しいと言う事らしいです。
これらは【無限カレンダー】等の終わりのないページの対策になっていて「そこの対策はしてね」が主題の様子。

まとめ

こうやって書き出してみると、今と昔はだいぶ違いますね。
私が10数年前の知識+αで書いた内容は修正が必要なようです。
こういった変化の全ては大量のindexを保存処理できる計算機の向上によるところなのでしょう。
SNS関連はまだ途上なので指示事項が多いって事か。Googleスゲー。

Google検索対策は小手先ではなく記事の中身での勝負と言う事ですね。

でもさぁ、これって楽天とかのECサイトには超問題アリじゃね？
商品の説明に画像使いまくってテキストが無い事、多々あるでしょ？
あれやっぱGoogle先生的には魅力無しって事だもんね。

自店舗EC作った時にはここら辺の仕組みをどうするかが一番大きな課題になりそう。