このブログもとい日記帳には必要ないと思い消したのですが、他の記事との関係性があるので再投稿
元記事がlivedoorBlogの場合の対処法なのでlivedoorBlog用のままです。
しかしhtmlの構造は同じです。ぜひエラー対処の参考にしてください。
さて、検索エンジンに読み込まれやすい、インデックス登録されやすいとうわさの構造化データ
ためしにタグ付をしlivedoorBlogでの構造化データテストツールを使用するとエラーが出現
-
-
- 「author」フィールドの値は必須です
- 「image」フィールドの値は必須です
- 「publisher」フィールドの値は必須です
- 「headline」フィールドの値は必須です
- 「datePublished」フィールドの値は必須です
- 「logo」フィールドの値は必須です。
- 「url」フィールドの値は必須です。
-
他の無料ブログは出ているのにlivedoorBlogの方法はなかなか見つからないので対処方法をまとめました。→2018/12/16時点では、自ら編集すると自動的に消去されるようです。
種類はschema.orgです。なおリッチスニペットも重要なSEO対策ですがここでは触れません。
最後に”BlogPosting”をマークアップした場合の全体像を追記しています。
目次
「headline」フィールドの値は必須です。
「datePublished」フィールドの値は必須です。
この二つのエラーは詳しく触れませんが「3.構造化データマークアップ完成版」に記述しています。
そもそも構造化データって？
構造化データとはなにか。
HTML(WEBサイトの文章構造の骨組み)で記述された情報に意味付けし、Googleなどの検索エンジンやクローラ(WEB上のデータファイルを集めて登録する)に理解させるものです。 グーグルとBingにはテストツールがあり構造化しているか確かめることができます。
構造化データが生まれ、今までよりもHTMLタグから拾い上げてきた文章などのデータをより明確に取得できます。
例えばですよ
<h1>冷やし中華始めました！</h1>
<p>来年の夏に向けて？今秋から冷やし中華スタートです！<br>
<small>800円</small>なり！</p>
このようなタグと文章を書いたとします。WEB上のロボットやブラウザは
<h1>?????！</h1>
<p>？？？？？？？？？？？？？？<br>
<small>800？</small></p>
といった具合で見出しとパラグラフ、注釈と順次に読み取っていきますが、ロボットには人間のように冷やし中華がいつからいくらで食べることができるのか理解できません。ここにマイクロデータをタグ付けします。
<header itemscope=”itemscope” itemtype=”http://schema.org/Article”>
<h1 itemprop=”headline”>冷やし中華始めました！</h1>
<p itemprop=”description”>来年の夏に向けて？今秋から冷やし中華スタートです！<br>
<small>800円</small></p>
</header>
ロボットはWEBページにたどり着いたときマイクロデータを読み取っていきます。
Articleならニュースかブログのページ
→h1は記事の見出し
→見出しの詳細がPタグ内にあり注釈に800円と書いてある
順次読み取っていくことでインデックスの登録がしやすくなると言われています。 実際にlivedoorBlogのトップページにMicrodataをタグ付けすると、訪問者が20になりました。PVは40です。
自分の足跡しかないのに一気に増えたのでbotと見ていいでしょう。
まず認知される方法として構造化データは効果がありそうです。
ロボットがコンテンツ内容の意味を理解し、検索して見つけやすくなるわけです。
ただし上位表示されるかどうかは検索エンジンに委ねられます。
livedoorBlog以外の無料ブログは知りませんが、wordpressの無料テーマなどでも導入しています。
ちなみにマイクロデータは、次の三つのプロパティで構成されます。
- itemscope （マイクロデータ宣言）
- itemtype=”http://schema.org/○○”(タイプ名。データの種類。ビジネスや地形など豊富)
- itemprop=”○○”(プロパティ名。データの意味付け。見出し、説明、著者名、更新日など様々な単語がある)
これらをHTMLタグ内に記述します。
タイプ名とプロパティ名が標準セットで定義していきます。
宣言は一回以上、itemtypeは記述したい範囲(フィールド)ごとに何回も設置できます。
ただし内容が適していないと登録されない可能性があります。
詳しい種類はschema.orgで確認してください(日本語)。
BlogPostingの記事ヘッダー内に修正方法を記述する
livedoorBlogのBlogPostingに発生した構造化データエラー修正方法
カスタマイズのデザインごとに異なるので、どこにタグ付けするか自分で考えます。
Seach Consoleの構造化データテストツールを使い、検出結果が白紙なら構造化していない。デザインによっては「hatom」というMicrodataと種類は違うが構造化済みのものもあります。
さて、Seach Consoleから指摘される主な重大なエラーは下記3つです。
(以下、画像がないため文章のみになります)
「author」フィールドの値は必須です
「image」フィールドの値は必須です
「publisher」フィールドの値は必須です
エラーの箇所をクリックすると
とエラー箇所へ移動します。BlogPostingの範囲(articleタグのブロック要素)が対象となります。
つまり投稿するブログの記事全体の中に、著者名とアイキャッチ画像、
作品( CreativeWork)のpublisher(重複するけどブログを書いた人、あるいは法人なら組織名)を入れます。
もちろん必ず入れないといけないわけではありません。
あくまでGoogleの構造化データに準拠するのであれば対処しましょうという話です。
さて、挿入箇所は記事のヘッダー内に入れました。
<!– 記事ヘッダー、記事タイトル –>
～挿入～
</header>
記事内では入れ子が深すぎるのか？読み取れません。
フッターは試していませんが、BlogPostingフィールドのヘッダータグの範囲に入れないと効果がないようです。
*フッターにも試し成功しました。つまりヘッダーかフッターに挿入すれば解決です。
挿入箇所は、「ブログ設定」→「PC」→「カスタマイズ」→「個別記事ページ」です。
個別記事ページのソースコードに記述します。
F+ctlキー押し、検索枠にBlogPostingを入れれば、記事ヘッダーへ飛びます。
それでは、ソースを書きます。コピーはOKです。
他のサイトのものと似たようなコードです(ちがったら動かないだろうし)。
なおトップページとカテゴリ、アーカイブも対象になるようです。
もしSeachConsolにエラーが検出されたら、個別記事同様に
headerタグあるいはfooterタグに挿入してください。
「author」フィールドの値は必須です
ブログは個人の作品である。やはり著作物にもなるので入れるようですが、
私はエラーがありませんでした。もしエラーが出たら下記を入れてください。
<!– 著者設定 –>
<div itemprop=”author” itemscope itemtype=”http://schema.org/ Person“>
<span itemprop=”name“>あなたの名前</span>
</div>
「image」フィールドの値は必須です
<!– アイキャッチ設定 –>
<div itemprop=”image” itemscope itemtype=”https://schema.org/ImageObject“>
<img src=”http://URL.jpg” width=”” height=”” alt=””>
上記で1セットです。横幅と高さを省くとエラーが出ます。
間違っても<img itemprop=”image” src=”” alt=””>と入れないでください。
エラーになりました。
※アイキャッチとは別に、記事本文の画像に<img itemprop=”image”>と入れてもエラーになりました。
divで囲ってImageObjectとimageフィールドを同時に作る必要があるようです。
「publisher」フィールドの値は必須です
データにlogoが入っています。プロフィールでいうところのサムネイルでしょうか。
OrganizationはPersonでもいいそうですが、logoプロパティが利用できないのでOrganizationのままでいいでしょう。
名前はauthorと同じでも差し支えありません。
urlはpublisherのWEBサイトなど関係するurlが入ると思われます。ポイントはurlが2つあることです。「logo画像のurl」と「publisherのサイト等のurl」を入れておく、そういうふうに覚えておくと混乱しません。
最後に更新日の「dateModified」とページのメインコンテンツを示す 「mainEntityOfPage」については、
推奨フィールドのため必須ではありません。2016年現在では必要に応じて自己判断で入れるようです。
〇「headline」フィールドの値は必須です
と出た場合は、記事内部に追加するとエラーが消えました。 この記事の場合は、『そもそも構造化データって？』などの中見出しに入れています。目次の見出したちですね。
hタグに入れる方が記述する方もわかりやすいです。
ちなみに「dateModified」は追記日に
といれて、 「mainEntityOfPage」はmainタグの範囲に設定しています。
<article itemtype=”http://schema.org/articleBody”>
～記事～
</article>
</main>
私の場合、livedoorBlogでは「記事を書く」は、 meta description、記事の説明の部分なので、
「続きを書く」にmainタグとarticleタグを入れています。
フッター挿入例
<!– /記事本文 –>
<!– ここに追加 –>
</div>
<div itemprop=”publisher” itemscope itemtype=”https://schema.org/Organization”>
<!– 追加ここまで –>
~中略~
<!– /記事フッター、カテゴリ、コメント、ソーシャルボタン –>
～以下略～
場所はfooterタグ内ならどこでもOKです！
構造化データマークアップ完成版
「microdata」はitemscopeなどの属性をHTMLに直に入力します。
タイプ名：BlogPosting
を例に上げます
<!– ブログ投稿記事内 –>
<article itemscope=”itemscope” itemtype=”http://schema.org/BlogPosting”>
<header>
<h2 itemprop=”headline”>記事タイトル</h2>
<!– datePublished –>
<p>投稿日：<time datetime=”2018-12-12″ itemprop=”datePublished”>2018年12月12日</time></p>
<p>修正日：<time datetime=”2019-01-15″ itemprop=”dateModified”>2019年1月15日</time>
</p>
datetimeの値が空だとエラー
</header>
<div itemprop=”mainEntityOfPage”>
<p>コンテンツ内容</p>
<!– image –>
<div itemprop=”image” itemscope=”itemscope” itemtype=”https://schema.org/ImageObject”> <img src=”” alt=”” title=””>
<span itemprop=”url” content=”https://livedoor.blogimg.jpimg/img.jpg”></span>
<span itemprop=”width” content=”150″></span>
<span itemprop=”height” content=”150″></span>
metaタグは不適切なのでspanタグを使用
contentの値が空だとエラー
</div>
<!– publisher –>
<div itemprop=”publisher” itemscope=”itemscope” itemtype=”https://schema.org/Organization”>
<span itemprop=”logo” itemscope=”itemscope” itemtype=”https://schema.org/ImageObject”>
<span itemprop=”url” content=”https://livedoor.blogimg.jpimg/img.jpg”>
<img src=”” title=””>
</span> </span>
<span itemprop=”name”>会社の名前や運営元名</span>
</div>
<!– author –>
<div itemprop=”author” itemscope=”itemscope” itemtype=”http://schema.org/Person”>
<span itemprop=”name”>ブロガーやライターの名前</span>
</div>
</div>
</article>
主なエラー5つすべて対処しています。
タイプ名と入れ子のプロパティ名に間違いがないか構造化テストツールで確認します。
上記の方法は「Article」と同じです。
