Bloggerの「all-head-content」で参照されるコンテンツを考察して「meta」「feeds」「favicon」などを最適化

2014/09/06

Posted

Bloggerの「all-head-content」で参照されるコンテンツを考察して「meta」「feeds」「favicon」などを最適化

概要

テンプレートをカスタマイズするような方は…一度は…例えば…

Google Chrome のコンテキストメニューの「ページのソースを表示」や…

「要素を検証」で自身のサイトを見た事があるでしょう

その際…必ず感じる事は…どうして <head> 内にこんなにコンテンツが

…ってな感じでしょう…なにせデフォルトの状態では「CSS」を除けば…

テンプレートには…この程度しか記述されていないのですから…

<b:include data='blog' name='all-head-content'/>
<title>
  <data:blog.pageTitle/>
</title>

なので…今回は…<head>～</head> の中身を考察してみましょう…

<head>～</head> 内に呼び出されるコードの検証

Blogger のテンプレートの <head>～</head> にある一行のコード…

　<b:include data='blog' name='all-head-content'/>

…で参照されて…<head>～</head> 内に呼び出されるコードは…

コンテンツが最大になるように…コメントのあるページで…

「OpenID」も設定してソースを見てみると…

<head>～</head> 内に呼び出されるコード

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<script type="text/javascript">(function() { var b=window,f="chrome",g="tick",k="jstiming";(function(){function d(a){this.t={};this.tick=function(a,d,c){var e=void 0!=c?c:(new Date).getTime();this.t[a]=[e,d];if(void 0==c)try{b.console.timeStamp("CSI/"+a)}catch(h){}};this[g]("start",null,a)}var a;b.performance&&(a=b.performance.timing);var n=a?new d(a.responseStart):new d;b.jstiming={Timer:d,load:n};if(a){var c=a.navigationStart,h=a.responseStart;0<c&&h>=c&&(b[k].srt=h-c)}if(a){var e=b[k].load;0<c&&h>=c&&(e[g]("_wtsrt",void 0,c),e[g]("wtsrt_","_wtsrt",h),e[g]("tbsd_","wtsrt_"))}try{a=null,
b[f]&&b[f].csi&&(a=Math.floor(b[f].csi().pageT),e&&0<c&&(e[g]("_tbnd",void 0,b[f].csi().startE),e[g]("tbnd_","_tbnd",c))),null==a&&b.gtbExternal&&(a=b.gtbExternal.pageT()),null==a&&b.external&&(a=b.external.pageT,e&&0<c&&(e[g]("_tbnd",void 0,b.external.startE),e[g]("tbnd_","_tbnd",c))),a&&(b[k].pt=a)}catch(p){}})();b.tickAboveFold=function(d){var a=0;if(d.offsetParent){do a+=d.offsetTop;while(d=d.offsetParent)}d=a;750>=d&&b[k].load[g]("aft")};var l=!1;function m(){l||(l=!0,b[k].load[g]("firstScrollTime"))}b.addEventListener?b.addEventListener("scroll",m,!1):b.attachEvent("onscroll",m);
 })();</script>
<meta content='blogger' name='generator'/>
<link href='//passer-by198.blogspot.com/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='//passer-by198.blogspot.com/2012/02/htmljavascript_21.html' rel='canonical'/>
<link rel="alternate" type="application/atom+xml" title="Dégustation?: Sepia - Atom" href="//passer-by198.blogspot.com/feeds/posts/default" />
<link rel="alternate" type="application/rss+xml" title="Dégustation?: Sepia - RSS" href="//passer-by198.blogspot.com/feeds/posts/default?alt=rss" />
<link rel="service.post" type="application/atom+xml" title="Dégustation?: Sepia - Atom" href="//www.blogger.com/feeds/1928111535560437263/posts/default" />
<link rel="alternate" type="application/atom+xml" title="Dégustation?: Sepia - Atom" href="//passer-by198.blogspot.com/feeds/4535265074150256510/comments/default" />
<link rel="me" href="//www.blogger.com/profile/01335705951158932473" />
<link rel="openid.server" href="//www.blogger.com/openid-server.g" />
<link rel="openid.delegate" href="//passer-by198.blogspot.com/" />
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB9qzTDKSjtYdCfA6W9ZUTZBiDixz0x62D3lkJQmbv6hpBnDAhoxlx5jGKoW2NAunvLUhAo-jF_p0YALCqmH_LyhZ8MfUqLghXXuXQzufoA4rNUDZIWf8w18tL__y_4H3mKjHu5ZnMC-DX/s200/Google+Chrome%252C+Japan.jpg' rel='image_src'/>
<meta content='様々なHTML要素をクリックで開閉するための少量の「JavaScript」' name='description'/>
<!--[if IE]> <script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]-->

■JavaScript　
「データ収集用」「 Internet Explorer 用」
■「meta」要素　
「文字コード用」「出力情報用」「説明用」
■「link」要素　
「ファビコン用」「URL 正規化用」「フィード用」「プロフィール用」「OpenID 用」「画像用」

…ってな感じで…結構…大袈裟な量です

過去記事で対処済みの「CSS」…

Bloggerの読み込み遅延の元凶「widget css bundle」を削除して高速化する

「widget_css_bundle」「dyn-css/authorization」や…

これもまた…対処済みの「JavaScript」…

Bloggerの読み込み遅延の元凶「widgets.js」「plusone.js」を削除して高速化する…非推奨

「widgets.js」「plusone.js」と同様に…

一見…必要なものばかりと思い込みがちでしょうが…

はたして…そうでしょうか…必要だとしても…

レンダリングブロックしてまで呼び出す…というのも如何なものでしょう

<head> 内に多くのコンテンツを置くのは…よろしくないと思われますので…

熟考して…不要な要素は削除すべきです…なので…

展開して…必要なものだけ残すために個別に見てみましょう…

「JavaScript」に関する考察

2行目～4行目のスクリプトは「データ収集用」…かな

17行目のスクリプトは「 Internet Explorer 用」ですね…

私は…どちらも…不要ですので削除していますが…

展開した上で残す場合は…最初のスクリプトは…

　<script type='text/javascript'>// <![CDATA[ここにスクリプト// ]]></script>

…ってな感じで記述します…

「meta」要素に関する考察

「meta」要素は…かなりシンプルで好みですね…

「http-equiv='Content-Type'」と「name='description'」は無問題ですが…

「name='generator'」には…ご遠慮いただきたいですね…削除です…

「http-equiv='Content-Type'」は…呼び出されたコードのままで OKです…

「name='description'」は…当然ながら呼び出す必要があります…

「description」を呼び出すコード

<b:if cond='data:blog.metaDescription != &quot;&quot;'>
  <meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
  <meta expr:content='data:blog.pageName + &quot; | &quot; + data:blog.title' name='description'/>
</b:if>

…ってな感じで記述します…まぁ…お好みで…

「SEO」大好きな方々が勧める山盛りの「meta」要素を記述したい方には…

どうぞ…お好きに……としか言いようが無いです…　(￣ー￣) 邪笑®

「favicon」に関する考察

ファビコンは…ブラウザに見つけてもらうだけの「link」要素とは違い…

「HTTP リクエスト」が発生しますので問題ありです…

現実に「WebPageTest」では…

ファビコンも含めて判定されます…

Blogger でも「レイアウト」からファビコンを設定出来るようになりましたが…

逆に…「base64」変換での生データ記述をするためには…

このような形で一旦展開しなければならなくなった…という事です…

そのためだけに…この記事を書いているようなものです…

呼び出しませんから「expr:」を外して…こんな感じで記述します…

　<link href='「base64」変換の生データ' rel='icon' type='image/x-icon'/>

画像をbase64エンコードするツール / Syncer

尚…このように生データ記述をすると…記事作成中のプレビューで…

ファビコンが表示されなくなりますがサイトでは問題なく表示されます…

参考程度に…6行目で呼び出されているファビコンのコードが…

どのようなデータタグで呼びだされているのだろうってな方のために…

たぶん…こんな感じ…ってのを置いておきます…

　<link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>

「link」要素に関する考察

「rel='canonical'」の「URL 正規化用」の「link」要素は必要ですね…

　<link expr:href='data:blog.url' rel='canonical'/>

…ってな感じで呼び出します…

「rel='alternate'」が含まれる…3個の「フィード用」は…

「フィードリーダー」に見つけてもらうためだけに記述する訳ですから…

私的には…全くもって不要です…全て削除して…

記事下に…「Feedburner」を置いています…

先生謹製なのですから…もう少し力を入れて欲しいものですね…

呼び出したい場合は…こんな感じで記述します…

「フィード用」の「link」要素を呼び出すコード

<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;//www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>

「プロフィール用」は…サイドバーに「About」を置いていますし…

「OpenID 用」は…実際には設定していませんので…不要です…

記述するなら…ソースコードのまま記述すれば良いでしょう…

「画像用」は投稿ページでサムネイル画像が収得出来る場合に出てきます…

まぁ…不要って言えば不要…なんですが…

タイトルも含めて…こんな感じで呼び出しています…

「画像用」の「link」要素を呼び出すコード

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:if cond='data:blog.postImageThumbnailUrl'>
    <link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
  </b:if>
  <title>
    <data:blog.pageName/> | <data:blog.title/>
  </title>
  <b:else/>
  <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title>
      <data:blog.title/>
    </title>
    <b:else/>
    <title>
      <data:blog.pageName/> | <data:blog.title/>
    </title>
  </b:if>
</b:if>

お好みのスタイルに弄って下さい…

将来的には…「画像用」も削除する方向かな…たぶん…　(￣。￣) 弱笑®

展開後の「<head>」内の状態

「<head>」内の…実装状態は…「CSS」を除くと…こんな感じになります…

「CSS」を除いた「<head>」内の実装状態

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
  <meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
  <meta expr:content='data:blog.pageName + &quot; | &quot; + data:blog.title' name='description'/>
</b:if>
<link href='「base64」変換の生データ' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.canonicalUrl' rel='canonical'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:if cond='data:blog.postImageThumbnailUrl'>
    <link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
  </b:if>
  <title>
    <data:blog.pageName/> | <data:blog.title/>
  </title>
  <b:else/>
  <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title>
      <data:blog.title/>
    </title>
    <b:else/>
    <title>
      <data:blog.pageName/> | <data:blog.title/>
    </title>
  </b:if>
</b:if>

おわりに…

Blogger の高速化・最適化の作業も終盤にさしかかり…

ほぼ…完成しましたが…ラベルは…1個しか付与しない主義なので…

「Customize」カテゴリーの中に埋没して解り辛くなっているでしょ

なので…ヘッダーのナビゲーションの「Blogger」に「Optimization」を置いて…

主な記事だけ抜き出してインデックスしましたので…ご利用下さいな…

あくまでも…直書きしたほうがページ読み込みは速いという事を忘れずに…

スコアと速度のバランスをとりながらカスタマイズする事を強くお薦めします…

以上です…最後までお読みいただきましてありがとうございます…

Tips Header Sidebar Main Footer Current-Label : Universal

手法	用例	手法	用例	手法	用例	手法	用例
連想の創出	愛国者に対して「軍靴の音が聞こえそうだ」などと揶揄し否定的な印象を与える…	コメント	人々を一定の方向に誘導するために「事実とは異なる解釈」をコメントさせたり「社説」にする…	プレゼンス効果	現場からの中継や縮小ジオラマなどで「臨場感」を演出し「やらせ」も交えて信用されやすくする…	分類表	一部の「ネット右翼」が批判しています…のように決まった単語・フレーズで事象を分類して極小化・極大化する…
撹乱	「第三極も含めて政党が乱立して訳が分かりません…」などと連日「情報ノイズ」で溢れさせ興味自体を失わせる…	癒着提案	TBS「安倍官房長官印象操作映像事件」のように「個別の事実」を「継ぎ接ぎ」して「誤った印象」を植え付ける…	匿名の権威	「信頼すべき消息筋によれば…」のように情報元を明かす必要がない事を逆手に取り記事の内容に権威を与える…	日常会話	お隣の「韓国」では…のように本来否定的な要素「韓国」を日常会話のように繰り返し心理的習熟効果で反応を麻痺させる…
感情共鳴	コンサートで開催場所の地名を大声で繰り返し叫ぶ…などのように「デモ」「集会」などで群集を理性ではなく感情レベルで反応させる…	歴史の書き換え	民主党の「天皇制廃止」「戸籍法廃止」「夫婦別姓」などの愛国心を低下させるための国家・民族全体に対する長期的な情報操作…	感情整列	この時間にご覧になっている貴方だけに限定100セットだけ…などと「一定のシチュエーション」を用意して群集の感情を「均一化」させる…	一次効果	「朝日新聞の従軍慰安婦捏造問題」「iPS細胞での読売新聞大誤報」など「最初に発信された情報」は嘘でも捏造でも信用されやすいという原理…
ブーメラン	坂本龍一・山本太郎などの著名人を使い原発管制報道に対する「自由の闘士」を作り出し国力を削るために「愛国者」を装った抗議運動を展開する…	心理的ショック	日本は豊かなのだと錯覚させ更に絞り取るために「飢餓」を伝え…日本は悪い事をしたと日本人を自虐的に思い込ませるために繰り返し「戦争」を伝えます…	半真実	「マニュフェストが実現出来なかったのは自民党の負の遺産のせいで民主党がダメだった訳ではない…」のように嘘の中に一面的な真実を織り込み全体を真実に見せる…	フィードバック	「支持政党無しの無党派層は過去最高」という結果を得るために世論調査の回答項目に「民主党もダメだけど自民党もダメ」という項目を設定し全体の意見に偽装する…
すり替え	「傷害」を「いじめ」「窃盗」を「万引き」「殺人事件」を「交通事故」「テロリスト」を「レジスタンス」「略奪事件」を「抗議デモ」など受け入れ易い言葉に置き換える婉曲手法…	脅威の創出	尖閣購入時に「中国の脅威」は民主党政権以降に尖鋭化していたにもかかわらず恰も「都知事発言以降に尖鋭化した」かの如く捏造し民主党には他に選択肢は無かったと責任転嫁…	社会的同意	首相の靖国参拝に「外国」から激しい反発が起こっている…などと…特定アジアだけの意見を恰も世界全体が同意していると錯覚させる…「人権擁護法案」「外国人参政権」などもこの手法…	側面迂回	民主党の原発事故対応では線量などの周辺情報は正確に報じられ枝野幸男の「直ちに健康に影響を及ぼすものではない…」の嘘の信憑性を高めメルトダウン・風向きなどの核心部分は隠蔽された…
虚偽類似	「視聴率低迷は若者のテレビ離れのせい…」「CDが売れないのは違法ダウンロードのせい…」「紅白歌合戦に韓流スターが出演できないのは日本の右傾化のせい…」など都合の良い「原因と結果の因果関係」を作り出す…	事実確認	原発安全神話を作り出したのも公共事業にジャブジャブ税金をつぎ込んだのも自民党です…など…「一面的な事実」を先に述べ「事実確認」させ…自民党政権に逆もどりして良いんですか？…と未来を誤認・錯覚させる…	毒入りサンドウィッチ	「白川総裁が自民党の経済政策を批判」「安倍総裁の経済政策発言を市場が好感し円安に振れ株価は年初来の高値」「一方でハイパーインフレを懸念する声も」…のように序文と結論の否定的報道で肯定的な報道を挟み肯定的な報道の意義を低下させる…	砂糖入りサンドウィッチ	毒入りサンドウィッチの逆の手法…

passer-by198

Dégustation?: Infinity

Search

About Me

Featured Post

2014/09/06

Posted

2014/09/06