2019-02-19

PageSpeed Insight のスコアアップしたい（ 其の弐）Bloggerで投稿日や更新日の設置

どうも。

前回Bloggerのバージョンアップで長々と書いてしまいましたが、layout version='3'のテーマの場合、投稿日と更新日はJava Scriptを使わなくても、簡単に設置出来ると書きました。
簡素化出来るのであればした方が、全体的なスピードは上がって来ると思います。

投稿日を'post.date.iso8601'から取得する

投稿日についてはlayout version='2'のままでも'post.date.iso8601'から読み取る事が可能でした。

Vaster2ではpost.date.Headerから投稿日をJava Scriptにより取得しています。

例えばVaster2では、以下の様な記述だと思います。

 <span class='post-timestamp'>
  <i aria-hidden='true' class='fa fa-clock-o'/>
    <b:if cond='data:post.dateHeader'>
      <script type='text/javascript'>var hiduke = &quot;   
        <data:post.dateHeader/>&quot;</script>
    </b:if>
    <b:if cond='data:top.showTimestamp'>
      <b:if cond='data:post.url'>
       <meta expr:content='data:post.canonicalUrl' itemprop='url'/>
        <abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'>
<script type='text/javascript'>document.write(hiduke)</script></abbr>

'post.date.iso8601'から取得する場合は、以下の記述になります。

  <span class='post-timestamp'>
    <i aria-hidden='true' class='fa fa-calendar-o'/>
     <time expr:datetime='data:post.date.iso8601'>
      <b:eval expr='data:post.date format &quot;yyyy-MM-dd&quot;'/>
     </time>
   </span>

わざわざ変更する事も無いと思いますが、Java Scriptを極力避け、簡単にコードを書きたい場合は、変更をおすすめします。

注:今回の方法ですと、投稿時間までは表示させていません。

更新日を追加

注:ここからはlayout version=3のテーマの場合です。
更新日の設置は、'post.lastUpdated.iso8601'よりJava Scriptで取得する必要がありましたが、layout version=3では、単純に'post.lastUpdated.iso8601'からの取得が可能になりました。

更新日単体の設置

こんな感じ。好きな所に設置。

 <span class='post-lastupdate'>
  <time expr:datetime='data:post.lastUpdated.iso8601'>
   <b:eval expr='data:post.lastUpdated format &quot;yyyy-MM-dd&quot;'/>
  </time>
 </span>

更新日と列べてる場合

投稿日のコードを探して、以下と書換えます。

<span class='post-timestamp'>
 <i aria-hidden='true' class='fa fa-calendar-o'/>
  <time expr:datetime='data:post.date.iso8601'>
   <b:eval expr='data:post.date format &quot;yyyy-MM-dd&quot;'/>
  </time>
 </span>
<span class='post-lastupdate'>
 <b:if cond='data:post.date != data:post.lastUpdated'>
  <i aria-hidden='true' class='fa fa-refresh'/>
   <time expr:datetime='data:post.lastUpdated.iso8601'>
    <b:eval expr='data:post.lastUpdated format &quot;yyyy-MM-dd&quot;'/>
   </time>
  </b:if>
 </span>

投稿日≠更新日の場合のみ、更新日を取得しています。

PageSpeed Insightのスコアは変わりませんでした。
投稿日だけの変更で、単純なJava Scriptの排除のみだったので…。
でも、塵も積もれば何とかです。


更新日に関しては、layout version=3の敷居は高いですが、Java Script無しで設置したい項目です。




以上

ちょっとしたBlogger備忘録