[Blogger] 最終更新日を記事の終わりに挿入する方法


SEO(検索エンジンの最適化)において、その情報が最新であるかが重要になってきます。

Bloggerブログでは最終更新日が記載されないので、記事をリライト(修正・加筆)しても分かりにくいのが難点です。

そこで、本記事では最終更新日を記事の終わりに自動で挿入する方法を解説します!



本記事で解説する方法はContempo・Soho・Emporio・Notableの新しいテーマ(ウィジットバージョン2)に適応するものになります。

予めご了承ください。


HTMLの編集手順

左のメインメニューから【テーマ】を選択し、カスタマイズ横の【▼】をクリックして【バックアップ】をしましょう。

それが終わったら、同じ画面の【HTMLを編集】をクリックして編集画面を開きます。



HTMLの編集画面では、Ctrlキー+FキーでSearch: という検索欄を表示させることで検索ができます。

HTMLの編集が終わったらプレビュー画面で確認して、保存をします。



最終更新日を挿入するHTML編集

投稿ウィジット内にコードを書き加えます。

テーマによって多少異なりますが、例としてEmporioの場合を取り上げます。


また当ブログで解説しているHTML編集で関連記事の自動表示をさせる方法を導入している場合はその真上に挿入すれば良いので、2パターン解説します。


挿入するコード

挿入するコードは以下の通りです。


<!-- [START] 更新日-->
<b:if cond='data:blog.pageType == "item"'>
  <b:if cond='data:post.date != data:post.lastUpdated'>
    <span style='display: block;text-align: right;'>
      <span>最終更新日:</span>
      <time expr:datetime='data:post.lastUpdated.iso8601'>
        <b:eval expr='data:post.date format &quot;yyyy/MM/dd&quot;'/>
      </time>
    </span>
  </b:if>
</b:if>
<!--[END] 更新日--> 


以下、簡単に捕捉を入れます。


<b:if cond='data:blog.pageType == "item"'>で記事本文のみに適応させています。

トップページの変な箇所に更新日が挿入されるのを防ぐためです。


<b:if cond='data:post.date != data:post.lastUpdated'>で投稿日と更新日が同じ場合は表示されなくなります。


<span style='display: block;text-align: right;'>で右寄せにしています。

rightの部分を左寄せならleft、中央寄せならcenterに変更できます。


「最終更新日:」はお好みの文言に変更してOKです。


日付の表記はyyyy/MM/ddの形式です。

変更する場合は「yyyy/MM/dd」を「yyyy-MM-dd」「yyyy年M月d日」などにしてみてください。

またyyyy/MM/dd形式の場合、日本時間に適応した

<b:eval expr='data:post.lastUpdated.year + (10 > data:post.lastUpdated.month ? "/0" : "/") + data:post.lastUpdated.month + (10 > data:post.lastUpdated.day ? "/0" : "/") + data:post.lastUpdated.day'/>

の方がオススメです。


初期状態からの挿入箇所

HTML編集画面右上のウィジットに移動を選択します。



そこから【Blog1】を選択します。これが投稿ウィジットになります。



【Blog1】を選択してから<b:includable id='post' var='post'>で検索します。

(全体で同じコードが2つありますが、Blog1内にある方になります。)

その数行下の<div class='slide'> の </div> の上にコードを挿入してください。



関連記事を導入している場合の挿入箇所

関連記事で検索して、その真上にコードを挿入してください。



当ブログでは挿入後、以下のようになっています。




最終更新日の挿入完了! 今後の課題……

これで記事の終わりに最終更新日が自動で記載されるようになります!

ただ、本当は……



記事タイトル下の投稿日の横に挿入したいんです。

結構調べて挑戦したんですが、全然表示できなかったんですよね……。

Bloggerブログは情報少ないので、なかなか思うようにいきません。


ちなみに外部テーマQooQを使っている別ブログでは成功しました。

調べると解説いくつも出てきます。利用者の多いQooQの特権ですね。


まだまだ未熟者です。

今後も何か良いカスタマイズが分かれば随時記事はあげていきますので、宜しくお願いします。



参考ブログ様

Spoon & Fork【Bloggerで記事の公開日/最終更新日を表示してみた】

バグ取りの日々【Bloggerに更新日を表示する】



にほんブログ村 ブログブログ ブログサービスへ にほんブログ村 ブログブログ ブログノウハウへ ブログノウハウランキング