s13y

独身27歳の中卒ニートが人生に危機感を覚えながら書くブログ

`<head></head>`の中身はカオスで溢れている【はてなブログのHTML構造その2】

HTMLページは様々なタグで成り立つ「属性」と「値」の意味を把握しなければソースは読めない

とはいうものの、最初から全て事細かに教えることに意味はありません「あ、やっぱりね」と後から気付く方が吸収は早いはずです。テーマを作るだけだったり、ブログを書くだけではあまり意識しないかもしれませんが、Webページにはとても重要なタグが<head></head>内に隠れています。

よくわからないけど知っているレベルで学ぶ

本格的にサイトを作らなければ<meta>タグや<link>タグ、まして<script>タグなど知る機会も少ないでしょう。テーマを作成する段階で<style>を指定するといった具合で覚えていくものです。それら全てを記述してるのが<head></head>の中身です。今回ははてなブログの<head></head>内に書かれているタグを上から順に列挙します。

meta属性

「メタタグ」と称されます。HTMLのソースコードを見たことがあるのであれば、まずはこのメタタグたちに圧倒されるでしょう。確かに<head></head>内には<title>タグがあるはずですが、実際は<meta><link><script>に挟まれ軽く迷子になっています。

モバイルサイトを作る際は呪文のように書く「viewport」

<meta name="viewport" content="width=device-width, initial-scale=1.0" />`

「表示するモニターサイズ(横幅)」を設定できますのでwidth=360では横幅360pxのモニターにピッタリ合わせたサイトを表示してくれます。ということは横幅300pxのモニターで見た場合に60px程度はみ出してしまいます。はてなブログでは様々なモバイル端末のモニターサイズにピッタリ合わせて欲しい時の書き方をしています。有名サイトのメタタグと比べることで特色が見えてきます。はてなブログは「Apple」のサイトと同じでした。

facebookでは<meta name="viewport" content="user-scalable=no,initial-scale=1.0001,maximum-scale=1.0001">のように設定していますが「1.0001」にはどんな魔法が隠されているのでしょう?気になります。

クローラーを制御する「robots」

<meta name="robots" content="noindex,nofollow" />
<meta name="robots" content="noindex,nofollow,noarchive" />

クローラーとはWebサイト間のリンクを辿っていき、辿りついたページ情報を自動的に取得(クローリング)していくプログラムです。取得したページ情報を検索エンジンの「データベース」に格納していきます。検索して出てくるということはインデックスされているということです。 「noindex」とはページをインデックスさせないことで「nofollow」とはページに設置しているリンクを辿らせないようにする設定になります。「noarchive」とはデータベースへの保存を拒否します。

ダッシュボード「左メニュー」から「設定」を選択して「詳細設定」タブの「検索エンジン最適化」という項目にある「検索を避ける」から「検索エンジンに登録させない(noindex, nofollow)」にチェックを入れるとnoindex,nofollowがつき「公開設定」タブの「公開設定」項目から「自分のみ」にするとnoarchiveが設定され、これらのメタタグが適時挿入されます。

文字エンコーディングは「utf-8」

<meta charset="utf-8" />

この文字コードは多くのソフトウェアで使われているものだと思ってください。日本語を表示する際には必須で、無ければ「文字化け」してしまいます。

ドキュメントモードを指定する「X-UA-Compatible」

<meta http-equiv="X-UA-Compatible" content="IE=7; IE=9; IE=10; IE=11" />

IE8からドキュメントモードが指定できる機能が導入されました。HTTPヘッダに「X-UA-Compatible」を加えることでIEのレンダリング状態を指定したバージョンで表示させることができます。はてなブログでは各モードをセミコロンで区切って記入してありますので、それぞれのドキュメントモードで表示しています。

SEOでは最重要の<title>タグ

<title>s13y</title>

検索エンジンで調べると真っ先に飛び込んでくる文字列が<title></title>内に記述されます。私のサイトのトップページではこのように設定されていますが、記事ページであれば「タイトル」に設定した文字列が格納されます。

URLの正規化は「canonical」

<link rel="canonical" href="https://www.s13y.com" />

「https」か「http」か?「www」有無はどうか?はたまた「index.html」か?私たちは気にしませんが検索エンジンは全てのパターンでURLを認識してインデックスします。それぞれ別ページと扱われますので、指定しない場合は正しい評価が得られません。「canonical 属性」を利用して「URLの正規化」を行うことでSEO内部対策のひとつになります。「インデックス最適化」ともいいます。

Microdataのマークアップは「itemprop」

<meta itemprop="name" content="s13y" />
<meta itemprop="image" content="https://cdn-ak.f.st-hatena.com/images/fotolife/h/hatenablog/20101106/20101106100658.jpg" />

「itemprop 属性」は Microdata(マイクロデータ)のマークアップを行う際にプロパティを指定する属性で「Schema.org」が推進しているウェブサイトのデータ記述方法です。各記事ごとに「itemprop="name"」には記事のタイトルを「itemprop="image"」にはサムネのURLが指定されます。

SNSでバズりたいなら「property="og:

<meta property="og:title" content="エントリー - s13y" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://www.s13y.com" />
<meta property="og:image" content="https://cdn-ak.f.st-hatena.com/images/fotolife/h/hatenablog/20101106/20101106100658.jpg" />
<meta property="og:description" content="概要・要約" />
<meta property="og:site_name" content="s13y" />
<meta property="article:published_time" content="1548250735" />

FacebookやmixiなどのSNSでシェアされたときにリッチ表示してくれるためのmeta要素です。<head>でOGPが定義されておりますのでこのメタタグが使えます。なんとなく意味は読み取れますね。「og:type」がページの種類ですが記事ページであれば「article」をトップページの場合は「website」を指定します。以前は、blogもありましたが現在は使われていません。「property="article:published_time"」は公開された時刻が設定されます。

Twitterは独自のメタタグ「twitter:」

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://cdn-ak.f.st-hatena.com/images/fotolife/h/hatenablog/20101106/20101106100658.jpg" />
<meta name="twitter:title" content="エントリー - s13y" />
<meta name="twitter:description" content="はてなブログとMarkdown記法 はてなブログの編集モード はてなブログには「見たまま」「はてな記法」「Markdown」「HTML」など4つの編集モードがある。 「見たまま」はビジュアルエディタと呼ばれるものでGUI(WYSIWYG)エディタともいう。改行を繰り返すと空行が生まれるが「空のPタグ」が生成されているた…" />
<meta name="twitter:app:name:iphone" content="はてなブログアプリ" />
<meta name="twitter:app:id:iphone" content="583299321" />
<meta name="twitter:app:url:iphone" content="hatenablog:///open?uri=https%3A%2F%2Fs13y-theme.hatenablog.com%2Fentry%2F2019%2F01%2F23%2F223855" />
<meta name="twitter:site" content="@s13y_blog" />

Twitter用のメタタグですが、こちらもなんとなく意味がわかりますね。「twitter:card」では表示するカードの種類が選べます。元々7種類ありましたが、2015年7月からは4種類となりました。「twitter:app:name:iphone」iPhoneでのアプリ名で「twitter:app:id:iphone」はAppStoreのアプリIDです。「twitter:app:url:iphone」iPhoneアプリのURLが指定されています。Twitterで拡散されるとはてなブログ側が用意しているアプリでの閲覧が薦められるということでしょうか。

サイトや記事の概要はお馴染み「description」

<meta name="description" content="概要" />

検索エンジン・ユーザーにどんな内容なのかかを伝える重要な役割を担っていますので、検索結果に表示されるものとなります。はてなブログでは特に設定がない場合に記事の冒頭の部分を抜き取ります。目次を最初に入れていると目次の内容が表示されて悲しいことになります。

Google Search Console「google-site-verification」

<meta name="google-site-verification" content="..." />

はてなブログのダッシュボード「左メニュー」から「設定」を選択して「詳細設定」タブの「解析ツール」という項目にある「Google Search Console(旧 Google ウェブマスター ツール)」を設定すると挿入されます。

ブログのキーワード設定は「keywords」

<meta name="keywords" content="ブログのキーワード" />

こちらは同じく「詳細設定」タブの「検索エンジン最適化」という項目にある「ブログのキーワード(meta keywords)」を設定すると挿入されます。

Bing ウェブマスターツール「msvalidate.01」

<meta name="msvalidate.01" content="BCF1234E123456E12B1A123F123DAC12" />

「詳細設定」タブの「解析ツール」の項目から「Bing ウェブマスターツール」を設定すると挿入されます。

Google Tag Manager関連のソース

<script id="embed-gtm-data-layer-loader" data-data-layer-page-specific="{&quot;hatenablog&quot;:{&quot;blogs_permalink&quot;:{&quot;entry_afc_issued&quot;:&quot;false&quot;,&quot;has_related_entries_with_elasticsearch&quot;:&quot;false&quot;,&quot;blog_afc_issued&quot;:&quot;false&quot;,&quot;blog_hide_afc_field&quot;:&quot;false&quot;,&quot;is_author_pro&quot;:&quot;true&quot;,&quot;brand_hide_afc&quot;:&quot;false&quot;,&quot;is_blog_sleeping&quot;:&quot;false&quot;,&quot;blog_struct_hide_afc&quot;:&quot;false&quot;,&quot;blog_hide_afc_func&quot;:&quot;false&quot;}}}">
        (function() {
  function loadDataLayer(elem, attrName) {
    if (!elem) { return {}; }
    var json = elem.getAttribute(attrName);
    if (!json) { return {}; }
    return JSON.parse(json);
  }

  var globalVariables = loadDataLayer(
    document.documentElement,
    'data-data-layer'
  );
  var pageSpecificVariables = loadDataLayer(
    document.getElementById('embed-gtm-data-layer-loader'),
    'data-data-layer-page-specific'
  );

  var variables = [globalVariables, pageSpecificVariables];

  if (!window.dataLayer) {
    window.dataLayer = [];
  }

  for (var i = 0; i < variables.length; i++) {
    window.dataLayer.push(variables[i]);
  }
})();
</script>
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-P4CXTW');</script>
    <!-- End Google Tag Manager -->
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
    <!-- End Google Tag Manager -->

「詳細設定」タブの「解析ツール」の項目から「Google タグマネージャ」を設定するとコメントアウトで「Google Tag Manager」から「End Google Tag Manager」と表示されている間のタグが挿入されます。なぜか2つあり「GTM-P4CXTW」ははてなブログ側で「GTM-XXXXXX」がユーザー側の設定です。設定の有無に関わらずはてなブログ側のタグマネージャとスクリプトコードがデフォルトで表示されていました。はてなキーワードに一役買っているのかも知れません。

ファビコンの設定は「shortcut icon」

<link rel="shortcut icon" href="https://cdn.blog.st-hatena.com/images/favicon.ico">

タブを大量に開いた時やブックマークされた時に表示される画像を設定しています。

スマフォ用アイコンの設定は「icon」

<link rel="icon" sizes="192x192" href="https://cdn.blog.st-hatena.com/images/common/meta-icon-global.png">

こちらはモバイル向けのファビコンでスマフォのホーム画面に表示される画像を設定しています。

xml用タグ「application」

<link rel="alternate" type="application/atom+xml" title="Atom" href="https://s13y-theme.hatenablog.com/feed" />
<link rel="alternate" type="application/rss+xml" title="RSS2.0" href="https://s13y-theme.hatenablog.com/rss" />

RSSフィードが存在することを知らせるためのlinkタグです。こちらはAtomとRSS2.0の配信フォーマットになります。

著作情報を表示する「author」

<link rel="author" href="http://www.hatena.ne.jp/s13y/">

著者情報をGoogle検索結果に表示させます。

CSSの設定は「stylesheet」

<link rel="stylesheet" type="text/css" href="https://cdn.blog.st-hatena.com/css/blog.css?version=ef3efba74fb777cbab54718608ca20e4a896f271&amp;env=production"/>

こちらははてなブログ公式が用意しているCSSです。私たちが触ることはできません。

<link rel="stylesheet" type="text/css" href="//blog.hatena.ne.jp/-/blog_style/10257846132710252623/828a9b655f9190157b601d471297e874e3afe66e"/>

現在設定しているテーマのCSSはこちらで指定されています。オリジナルテーマを作成する場合はこのCSSを弄っていくことになります。

はてなの「?」

<script> </script>

謎のタグが生成されています。これはなんでしょう。この空白にどんなミラクルが?設定できる項目は全ての設定を行った上でソースコードを抽出したつもりですが、もしかしたら何かの項目が抜けていてその項目を設定するとここへ挿入されるのかも知れません。

はてなブログで表示される広告の設定
<style>
        div#google_afc_user,
  div.google-afc-user-container,
  div.google_afc_image,
  div.google_afc_blocklink {
      display: block !important;
  }
</style>

はてなブログProのユーザーであれば消せる広告の設定が表示されています。CSSファイルに記述すると何か不具合があるのでしょうか?必要ないように思いますが、きっと意図があるのでしょう。

設定からheadに要素を追加することも可能

ダッシュボード「左メニュー」から「設定」を選択して「詳細設定」タブの「検索エンジン最適化」という項目にある「headに要素を追加」から任意のmetaタグやスクリプトを挿入することが可能です。

次の記事はこちら

www.s13y.com