ゆめぴょんの知恵ゆめぴょんの知恵
サイト制作、WordPressカスタマイズ、無料アプリ紹介など。海外旅行135ヶ国。知識を知恵にするブログ!

【WordPress】公開日と最終更新日の表示方法!リッチスニペットでSEO対策も

時計で時間を示す女性

WordPressでブログ記事を書いた時に「公開日(または投稿日)」だけでなく「最終更新日」も表示してみました。SEO対策としてGoogleなど検索エンジンにも伝わるよう、HTML5やリッチスニペット記述方法も紹介します。

ゆめぴょん(@yume_pyon)です。こんちはっ!

このブログはWordPressで作成しています。最近デザイン(テーマ)を自作しました。今回は新デザインでも採用した内容です。その時のテーマ制作方法などについては、下の記事を参考にしてください。

【WordPress】新テーマデザインで96点達成!SEO対策・軽量化など7つの特徴をさらします【WordPress】新テーマデザインで96点達成!SEO対策・軽量化など7つの特徴をさらします31 shares

このブログのPC・タブレットで表示されるデザインを大幅に変更しました。今回は新テ…

【WordPress】スマホサイト作成!テーマファイルの効率化【WordPress】スマホサイト作成!テーマファイルの効率化48 shares

WordPress用のスマホテーマを作成した時に配慮した、PC版とは違ったテーマ…

ブログ記事の「公開・投稿日」「更新日」について

みなさんは、ブログ記事を読む時に「公開日」などを気にしますか。私は結構気にします。記事を開いたらまず、そのブログ記事が書かれた年月日を探すクセがあります。

もちろん探したい記事にもよります。書評・映画感想や料理の作り方などを検索する時は公開日は気にしません。不変に近いからです。

しかしブログ術・WordPressなど技術に関する内容や、レストラン・ショップの評判、経済・政治ネタなどを検索する時には、まず公開・投稿日や最終更新日を探します。

あやしいブログなどでは、これら日時が明記されていない場合もあります。記事下に隠すように小さく表示されている場合も、何か後ろめたさを感じます。

そんな記事からはすぐ離脱する人も多いと思います。少し前に著名なブロガーさんも同じようなニュアンスで書かれてたんですが、記事を見つけられませんでした。

というわけで、個人で好みは分かれると思いますが、私は「公開日」を明記している記事をじっくり読むことにしています。そして追記や改変したのなら「最終更新日」もあると親切かなと思い新テーマでは付けてみました。

「公開・投稿日」「最終更新日」の設置方法

「前置きはいいから、コードだけをくれー」という人のために、今回設置したコードをまず紹介します。中身については順に説明していきます。

まずはWordPressテーマファイル「functions.php」に下のようなコードをコピペして保存してください。1ヶ所でしか使わないなら、functionsではなく直接書いてもいいと思います。

「functions.php」ファイルはWordPressで最も重要なファイルの1つなので、修正を加える前には必ずバックアップをとってくださいね。そして問題が起こったらすぐに元に戻してください。修正は自己責任でお願いします。

上のPHPプログラムを簡単に説明します。記事の更新日が公開(投稿)日より後なら、その日時を返します。同日に更新した場合も返したいなら、5行目の「>=」を「>」に変更してください。

参考:WordPressで最終更新日を表示する方法(予約投稿にも対応) | WP SEOブログ

次に記事の「公開投稿日」「最終更新日」を表示する箇所には次のように記述してください。「公開」や「投稿」の文言などは好みで変更してください。

ブログ公開日・更新日をHTML5に対応する方法

次にHTMLの記述についてですが、これはHTML5版なので、それ以外の場合は<time>タグを<span>に修正して、「pubdate=”pubdate”」「datetime」も削除してください。

<time>はHTML5で採用された、日時を示すタグです。Googleなどの検索エンジンでも活用されてるようです。

「datetime」属性では「YYYY-MM-DD」の型で日時を指定します。「pubdate=”pubdate”」をつけると<article>の公開日時であることを示せます。。

ただしpubdateを使う時は、<article>内の<time>タグは1つだけと決められています。それで上コードでも念のため、最終更新日がある場合は公開投稿日のタグを<time>ではなく<span>に変えています。

timeタグを使わない場合は「datetime」属性も適切ではないため、itempropへ渡す日時は「content」に代入しています。


WordPressで記事の最終更新日を表示する方法 HTML5対応版

リッチスニペット/構造化データに対応する方法

今回はリッチスニペットや構造化データについては詳しく解説しません。下の記事を参考にしてみてください。

Google検索結果でも表示される!HTML構造化データschemaの記述方法Google検索結果でも表示される!HTML構造化データschemaの記述方法

HTML5が広まるにつれ構造化マークアップという言葉もよく聞くようになりました。…

【WordPress】パンくずリストをMicrodataでGoogle検索結果に表示方法!プラグイン不要【WordPress】パンくずリストをMicrodataでGoogle検索結果に表示方法!プラグイン不要

パンくずリストの設置はブログでは必須です。Google検索結果にも反映され、アク…

少し前に話題になってたGoogleウェブマスターツールでのエラーは、このリッチスニペットや構造化データの記述が間違ってたり抜けてたりしたからです。

参考:WordPressユーザー要注意!〜構造化データのエラーでアクセス激減?

今回、公開日などの記述を2つのリッチスニペットに対応させてみました。リッチスニペットについては下の記事が参考になります。

参考:初心者向けスキーマ(Schema.org)!マークアップを解説!

Schema(スキーマ)の「Article」microdataに対応

上の記事でも紹介していますが、Schema.org(スキーマ)の「Article」を用いて記述するのが、最近のはやりでもありGoogleも解釈しやすいのだと思っています。

今回の日時表示のHTMLで、次のような記述はこのSchema.org(スキーマ)の「Article」に準拠したものです。

  • itemprop=”datePublished”
  • itemprop=”dateModified”

ちなみにこれらの親要素には次のような宣言文が必要になります。

<article itemscope itemtype=”http://schema.org/Article”>

Microformatsマークアップ「hentry」にも対応

個人的にはSchema(スキーマ)ほど重要性を感じないので、面倒なら不要だと思っていますが、最近話題になり注目されてたので追加してみました。上のHTML内では次の部分です。

  • class=”published”
  • class=”updated”

親要素には次のようなclass名の宣言が必要です。

<article class=”hentry”>

Schemaと違い、class名で指定します。このうち「updated」は必須です。更新日が公開日と同じ場合は2つを併記しています。ちなみに他に「entry-title」「author」要素も必須なので設置しないとエラーになります。

「author」は例えば次のように設置します。

まとめ:今日のゆめぴょんの知恵

HTML5、リッチスニペット、構造化データなどはまだまだSEO効果があるとは言えない段階です。

しかし設置方法を間違えなければ悪い影響はないので、いつかくる将来のために記述しておいて損はないと思いますよ(^^)/

次回の記事は「ウェブ制作に役立つチップ」の予定です(^^)。更新を見逃さないためにも、 feedlyの登録をおすすめします(^^)/

ゆめぴょん(@yume_pyon)でした。ばいちゃお! こてっZzz

«前記事:【WordPress】固定ページでpage.phpでなく投稿記事のsingleを共通利用する方法【WordPress】カスタムフィールド設置でAll in One SEOも不要に!プラグインなしで:次記事»
ページ
↑先頭
ホーム