BloggerのデフォルトのOGP設定にtypeとlocaleを追加するSEO対策 結城永人 - 2018年8月23日 (木) BloggerのOGP設定はデフォルトでurlとtitleとdescriptionとimageが出力される。テーマのHTML編集やバックアップ／復元のテーマをダウンロードから確認できるけれどもhead内の独自タグの<b:include data='blog' name='all-head-content'/>にOGP設定のマークアップが含まれている。機械的にブログのソースコードに記載されて主にソーシャルメディアへの共有でブログの内容を表示するために使われる。 目次BloggerのデフォルトのOGP設定の四項目OGP設定が構造化データに検出される条件OGP設定のtypeとlocaleのマークアップBloggerの独自タグで振り分けるソースコード BloggerのデフォルトのOGP設定の四項目 <meta content='ページのURL' property='og:url'/> <meta content='ページのタイトル' property='og:title'/> <meta content='ページの説明文' property='og:description'/> <meta content='ページの画像' property='og:image'/> OGP（Open Graph Protocol／オープングラフプロトコル）自体はFacebookが採用しているメタデータ（RDfaに基づくから構造化データの一種だ）で、ウェブ管理者向けシェア機能ガイドによると他にも色んな項目が幾つも用意されている。 Bloggerのカスタマイズでブログのテンプレートに追加して良いと思うけれどもSEO対策に一般的に役立つ項目としてtypeとlocaleが挙げられる。 構造化データ｜Seach Console｜Google Seach Consoleの検索での見え方の構造化データにOGP設定の項目が含まれていると分かったためだ。つまりGoogle検索はOGP設定をサイト解析に使用しているかも知れない。少なくとも検出しているかぎり、OGP設定がサイト評価に与える影響は否定できないと思う。 検索エンジンにサイト内容を詳しく伝えるほどにキーワードの検索結果で、有利に紹介される可能性が高まるし、OGP設定はサイトのSEO対策として検索エンジンからのアクセスアップに繋がると期待される構造化データの一つなのは明らかなんだ。 FacebookによればOGP設定はurlとtitleとdescriptionとimageの四つが基本の項目で、typeとlocaleの二つが補足の項目になっているからかりに使えばブログの共有にも役立つはずだし、対応する他のソーシャルメディアを含めてブログに取り入れて損はない。 因みにtypeは基本の四項目に追加するとTwitterでもOGP設定を表示できるようになる。 TwitterはTwitterカードのcardを指定しないとOGP設定を使えないけれどもOGP設定のtypeで代替可能なんだ。基本の四項目が揃っていればマークアップは完了するから後は検証ツールでOKを取るだけで、ツイートにサイト内容がスニペット――デザインは標準のSummaryになる――で反映してくれる。 OGP設定が構造化データに検出される条件 Seach Consoleの構造化データで、OGP設定はSchema.org（機械向けの語彙集の一つ）の「spore:url」（因子：URL）から表示されている。サイトのSchema.orgを使った構造化データの直接のマークアップとは違っていて他にもhead内の一部のlinkタグ（feedのURL）やTwitterカードの項目などが含まれていたりもする。なぜかは不明だけれどもGoogleのサイト解析がSchema.orgの構造化データに他のOGP設定などのマークアップも包含的に捉えるのは事実なんだ。 Bloggerブログでは以前はSeach Consoleの構造化データにOGP設定の項目は表示されなかった。 調べると2017年の公式テーマのContempoとSohoとEmporioとNotableで変わっていて何よりもメインの構造化データのマークアップに基づいているようなんだ。 Googleが推奨するJSON-LDが新しく使われているけど、ただしそれだけではOGP設定は構造化データに検出されない。他の所有サイトで同じようにJSON-LDで構造化データを記載しているのにSeach Consoleの構造化データには何も表示されなかった。 考えると大事なのはページのURLがSchema.orgのページ全体のcontextのtypeから主要部のmainEntityや大部分のmainEntityOfPageなどのtypeを入れ子にしてidで示されているかどうかだった。 <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "BlogPosting", "mainEntityOfPage": { "@type": "WebPage, "@id" "ページのURL"}, （中略）} </script> OGP設定が構造化データに検出されるのは他の構造化データの特定のマークアップにかかっていて単独で使ってもSEO対策には役立たない可能性がある。 必要ならばJSON-LDの「@id」でURLを指定するような構造化データのマークアップを行わなくてはならないだろう。 構造化データの他の形式のMicrodataやRDFaやMicroformatsでは親要素のtypeに子要素のtypeを入れ子にしても無理みたいで、Googleのスキーママークアップ検証ツールにかけると二つに分かれて検出されてしまうからJSON-LDだけが「@id」でのURL指定に有効だと思う。 BloggerのContempoとSohoとEmporioとNotableの新テーマは少なくとも記事／追加ページでは最初から備わっているから何も変えなくて大丈夫なんだ。 現状、JSON-LDの「@id」を使わないとOGP設定はGoogleに検出されないけれども他の検索エンジンは検出するかも知れないし、Googleもサイト解析の仕方が後から変わらないとはかぎらないので、基本の四項目だけではなくて補足の二項目のtypeとlocaleも追加しておくとSEO対策で有利だ。 追記：Bing検索ではOGP設定が独立して構造化データとして認識される――Webマスターツールのマークアップバリデータで表示される――からSEO対策に有効なのは間違いない。 OGP設定のtypeとlocaleのマークアップ Googleが検出するし、一定の条件を満たすかぎりは明らかにOGP設定が構造化データとしてSEO対策に役立つかも知れないので、サイト評価を上げるべく、項目を少しでも詳しく載せるのが効果的だと感じる。 <meta content='ページの種類' property='og:type'/> <meta content='ページの言語と国' property='og:locale'/> OGP設定のtypeとlocaleは入力する文字列が規定されている。前者はOpen Graph参照ドキュメント、後者はローカライズによって二字ずつのISO言語コードと国コードの組み合わせから選択できる。 汎用的なtype webpageウェブページarticle記事 ※typeを記述しない場合はwebpageとして扱われる。 日本向けのlocale ja_JP日本語と日本 ※二つを半角アンダーバー（_）で区切って記載する。 OGP設定のtypeとlocaleの最低限の記述はトップやアーカイブなどのインデックスページにwebpageと記事などの個別ページにarticleのtype、そして日本ではja_JPのlocaleを使うと良いと思う。 インデックスページのtypeと日本のlocaleの場合 <meta content='webpage' property='og:type'/> <meta content='ja_JP' property='og:locale'/> 記事ページのtypeと日本のlocaleの場合 <meta content='article' property='og:type'/> <meta content='ja_JP' property='og:locale'/> FacebookによればOGP設定のtypeを記述しないとwebpageとして扱われるらしいけど、ところがSeach Consoleの構造化データには表示されない。なのでSEO対策のためにはwebpageのtypeも明記してGoogleが認識するように仕向けるのが良いと思う。 Bloggerの独自タグで振り分けるソースコード インデックスページと記事ページでtypeが異なるので、それぞれのソースコードに振り分けて記載するべきだ。 Bloggerではページ毎にテンプレートのマークアップを振り分ける独自タグがあるので、使ってトップやアーカイブなどのインデックスページにwebpageのtype、記事／追加ページにarticleのtypeが別々に追加したいしたい。 <b:if cond='data:view.isMultipleItems'> <meta content='webpage' property='og:type'/> <else/> <meta content='article' property='og:type'/> </b:if> <meta content='ja_JP' property='og:locale'/> OGP設定のtypeのwebpageとarticleをトップやアーカイブなどのインデックスページと記事／ページで振り分けてlocaleは全ページで共通だから何もしない。 テーマのHTML編集かバックアップ／復元のダウンロードからhead内のどこかに置いておく。OGP設定の基本の四項目が<b:include data='blog' name='all-head-content'/>からデフォルトで出力されるから直後に続けるとソースコードが纏まって分かり易い。記述したらテーマの保存かアップロードで完了する。 GoogleでOGP設定が構造化データとして検出されるとしても他の構造化データが欠かせないし、それ自体の内容は一般的だから大抵は他の構造化データの繰り返しになるだろう。なのでサイト評価を実際に上げるとは殆ど期待できないSEO対策にせよ、検索エンジンにサイト内容を僅かでも多く伝えるためにはなるべくやっておきたいと感じる。 関連ページImaginary｜Bloggerのテンプレートの提供 コメント 新しい投稿 前の投稿
吉幾三の怒りに触れる横着な議員連中は日本の崩壊を引き起こす 歌手の 吉幾三 が自身のYouTubeチャンネルの 吉幾三チャンネル【公式】 に 私は怒ってます！ を掲載して、一体、何だろうと観てみたら飛行機で乗り合わせた国会議員の態度が悪いのを見兼ねて黙っていられなかった。 今の日本の不味い政治状況を良く表している感じがしてさらに酷くな...
伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 伊良部秀輝が大好きだった記憶 Hideki Irabu records hi...
沖雅也の涅槃への自殺と双極性障害 かつて俳優の 沖雅也 の自殺が伝えられたとき、遺書の言葉とされた「おやじ、涅槃でまっている」と共に何なのかと疑問を感じたのを良く覚えている。聞き慣れない「涅槃」という言葉が入っても何十年も過ぎた今振り返っても自殺者の遺書として本当に珍しい表現だったと改めて驚く。 沖雅也が書い...
宜保愛子は本物の霊能力者だと考えられる三つの真実 昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...
細川慎二のどうにも泣けて来てしまうストリートライヴのアルトサックス サックス奏者の 細川慎二 のYouTubeチャンネルの Sax in the Night City で出ているサックスのストリートライヴの動画が美しい音色と相俟った街角の雰囲気の良さで心底と泣けて来るほどの感動を催させる。 細川慎二のアルトサックスの美しい音色が響き渡る街角の...
玉置浩二のメロディーは涙腺緩んで総毛立つ名曲中の名曲だ 玉置浩二 のYouTubeの公式チャンネルで、最も気に入りの メロディー のライブ版が追加されていた。曲自体をちゃんと聴いたのは約二十五年振りかも知れないけど、しかし初めての内容から以前にも況して大変な感動を覚えることになった。 玉置浩二 『メロディー』Live at Tok...
松本典子の今世紀最大の失敗という笑い話 日本のアイドル黄金時代と呼ばれる1980年代の真っ只中に十六歳で歌手としてデビューして、その後、十九歳から異色にも 志村けん と共にお笑いでも活躍した 松本典子 という芸能人がいた。二十四歳で野球選手の 苫篠賢治 と結婚して芸能界から殆ど姿を消して、大分、経っているので、今は知ら...
ナサニエル・ホーソーンの若いグッドマン・ブラウンの日本語訳 十九世紀のアメリカの作家、小説家の ナサニエル・ホーソーン の小説の 若いグッドマン・ブラウン （1835）の日本語訳を行った。一つの文学作品として人間の洞察力に富んだ優れた内容を持つだけではなく、表現も意義深いから外国語の英語の聞き取りと読み取りの教材としても最適だと感じる。 ...
Imgurで画像URLと埋め込みコードを取得する方法 Imgur は自分でアップロードした画像については画像URL／直リンクを取得して他のサイトにHTMLのimgタグで表示させられる。 そして自分と他の人たちも含めて画像の埋め込みコードを取得して他のサイトのHTMLに、そのまま、記載して表示させられもする。 目次 Img...
JavaScriptの繰り返しボタン：押した回数を数えて実行結果を元に戻すプログラム サイトのボタンはHTMLのinputやbuttonとJavaScriptのonclickを組み合わせて実装できる。後者のプログラムが前者を押して発動するようになる。JavaScriptのonclickはイベントハンドラと呼ばれてHTMLのinputやbuttonの開始タグに他の属...
結城永人
結城永人
コメント