« 【サイト移転】内部リンク張り替え・文字置換用スクリプト | トップページ | 【ブログサービス】ココログのレビュー【SEO的には?】 »

2022年1月 9日 (日)

【SEO】更新日をGoogle検索結果に表示させる方法(JavaScript使用)

Googleの検索結果に、ブログ記事の更新日を確実に反映させる方法は存在しませんが、記事ページに更新日のみを記載することで高確率で反映されるようになるという情報があります。
おそらく、公開日と更新日を両方記載していると高確率で公開日のほうが検索結果に反映されてしまうように思います。
また、「構造化データ」に更新日を記載することも一助になるかと思いますが、これについては難しいのでこの記事では触れません。
実際に私はこの記事で紹介する方法で公開日を更新日に書き換え、更新日がGoogle検索結果にクロールから数日以内に反映されていることを確認しました。
ただ私の場合は構造化データにも更新日を記載していますが、これについてはあまり大きな影響は無いような気もします。
また、更新日を反映されたことによって、少々驚いたことにはGoogle検索結果における表示順位も少し上がっていました。

ウェブページの日付に関するGoogleの資料を参考までに載せておきます。
ウェブページの最適な日付を Google 検索に知らせるには
Google 検索に対して公開日を指定する

更新日はGoogleが自動で判別します。
通常(対策なしの場合)であれば、おそらく、記事の内容が大幅に更新された時を更新日と認定する傾向にあるのかもしれません。
しかし実際は、記事内容を大幅に更新していなくても、内容をしっかりと見直して情報を新しいものに更新している場合も多いと思います。Googleのアルゴリズムはこの点の判断はできません。

Google検索結果に表示される日付は結構重要で、この日付が古いと見てもらえなくなる場合は多いと思われます。特に情報の鮮度が重要な分野では顕著です。

ただし注意点としては、記事の内容をしっかりと更新せずに、小さい変更や修正だけを行った際には日付を更新しない方が良いと思います。読者に誤解を与えるからです。
そのため、記事を修正したら自動的に日付が更新される仕様にすることには私は抵抗があります。
もちろん、記事を修正する時は常に記事内容をしっかりと更新するという人であれば構いません。

私の方法は、個別記事のHTML編集欄にJavaScriptを挿入することで簡単に記事の公開日を更新日に書き換えるというものです。この方法なら、記事ごとに更新日を任意で書き換えられます。
記事ごとにコードを挿入する手間はありますが、基本はコピペで、日付だけ変更することになります。
またこの方法は、無料ブログの多くに対応できると思います。ただブログによってはJavaScriptを書いても無効化されることがあるのでご注意ください。
例えばココログの場合だと、スマホ用サイトでは記事本文編集欄のscriptタグが無効化されます。

JavaScriptのコードはブログによって異なります。
例えば私はBloggerのQooQテンプレートを使用しているのですが、その場合は以下のコードをHTML編集欄の最上部に挿入します。

<script>
{
    let dateModified = '2022/01/03';
    let elem = document.getElementById('single-header-date');
    elem.innerHTML = '<time>'+dateModified+'</time> 更新';
}
</script>

青色の日付の部分を任意の更新日時にします。
「公開日」が記載されている要素を取得し、innerHTMLでその要素を書き換えています。
それにはまずブログ記事のHTMLソースをブラウザのデベロッパーツール(chromeの場合は「Ctrl + Shift + I」で開けます。)で確認、または記事ページで左クリック→「ページのソースを表示」で確認します。

BloggerのQooQテンプレートのHTMLソースを見ると、公開日は
<p id="single-header-date">2019/12/01</p>
のように記載されています。取得対象の要素にidが付与されているため、これをdocument.getElementById('id名')で取得し、その内部をinnerHTMLで書き換えています。
idではなくclassが付与されている場合は、代わりにdocument.getElementsByClassName('class名')[0]を用います。ただ同class名は複数存在することもあるため、最後の[0]のインデックス番号は必要に応じて増やします。

また、公開日が記事本文の上部に記載のあるブログについてはこのように記事本文の編集欄の最上部にコードを書けば良いのですが、逆に公開日が記事本文の下にあるタイプでは、addEventListenerを用いるなどしてJavaScriptの実行を遅らせる必要があります。
JavaScriptでHTML要素を書き換える場合、対象のHTML要素が読み込まれた後で無いと書き換えることが出来ないからです。
この場合は記事本文のHTML編集欄の最下部に、以下のようなコードを挿入します。{}内は前述のコードと同じです。この部分をブログに合わせて変えます。

<script>
document.addEventListener('DOMContentLoaded', () => {
    let dateModified = '2022/01/03';
    let elem = document.getElementById('single-header-date');
    elem.innerHTML = '<time>'+dateModified+'</time> 更新';
});
</script>

次に、いくつかのブログについて見ていきます。

はてなブログの場合は、公開日は以下のようにHTMLに記載されています。

公開日は<div class="date entry-date first">...</div>の中にあることが分かりますので、この要素を取得してinnerHTMLで書き換えれば良いです。
ただし、この要素にはaタグでリンクが付与されており、つまり公開日にリンクが張られている訳ですが、書き換えるとこのリンクは使用できなくなります。
また、このaタグを対象にcssも設定されているので、書き換えるとこれも適用できなくなりますのでこれをstyle属性で補完します。
コードは以下のようになります。

<script>
{
    let dateModified = '2022/01/03';
    let elem = document.getElementsByClassName('date entry-date first')[0];
    elem.innerHTML = '<span style="font-size:90%"><time>'+dateModified+'</time> 更新</span>';
}
</script>

Amebaブログの場合は、HTMLは以下のようになっています。

これは一番上のp要素を取得して、その内部を丸ごとinnerHTMLで書き換えるのが簡単かもしれません。ただこの場合、p要素の子要素としてtime要素と並んで「NEW!」を表示する要素がありますので、p要素の内部を丸ごと書き換えると、この「NEW!」は表示されなくなります。また、skin-textQuietクラスに対してcssが設定されていますので、このクラスは再設定しておきます。

<script>
{
    let dateModified = '2022/01/03';
    let elem = document.getElementsByClassName('skin-entryPubdate')[0];
    elem.innerHTML = '<span class="skin-textQuiet"><time>'+dateModified+'</time> 更新</span>';
}
</script>

また、innerHTMLで丸ごと書き換えずに対象のtime要素のみをreplaceChildメソッドを使用して書き換えることも出来ます。そうすればNEW!表示は消えません。少しコードが複雑になりますが、以下のようになるかと思います。

<script>
{
    let dateModified = '2022/01/03';
    let parent = document.getElementsByClassName('skin-entryPubdate')[0];
    let child = parent.getElementsByTagName('time')[0];
    let newChild = document.createElement('span');
    newChild.className = 'skin-textQuiet';
    newChild.innerHTML = '<time>'+dateModified+'</time> 更新';
    parent.replaceChild(newChild, child);
}
</script>

もっと例を挙げることもできますが...正直、この記事がどこまで需要があるか分からないのでこの辺にしておきます。JavaScriptを多少でも知っていれば簡単なのですが、全くの初心者だと少々厳しいかもしれません。
また、例は挙げましたがJavaScriptが無効化される仕様になっていないかどうかはご確認下さい。

« 【サイト移転】内部リンク張り替え・文字置換用スクリプト | トップページ | 【ブログサービス】ココログのレビュー【SEO的には?】 »

ブログ」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

« 【サイト移転】内部リンク張り替え・文字置換用スクリプト | トップページ | 【ブログサービス】ココログのレビュー【SEO的には?】 »