IT系女子ログ

Webデザイナー目線のあれこれ話。デザインもコーディングも勉強中。

head内の記述チェックリスト(まずはこれだけ版)

f:id:tosssaurus:20171113074701p:plain

headとは、HTMLページの情報を書いておくところです。

記述しておくことで、ユーザーがページを訪問する前に「どんな内容が書かれているページなのか」が分かりやすくなります。

なんとなく使いまわしてきたhead内の記述を、最近のアップデートに合わせて重要なタグだけに整理してみました。 

 

関連記事

コーディングが苦手なWebデザイナーにおすすめしている独学方法 - IT系女子ログ

新人Webデザイナーの私が、1年目で指摘されたことを振り返る[コーディング編] - IT系女子ログ

 

 

最終的なhead内はこうなりました

<head prefix="og:http://ogp.me/ns#">

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width">

<meta name="format-detection" content="telephone=no">

<title>tossaurus portfolio</title>

<meta name="description" content="とある福岡のWebデザイナーのポートフォリオ">

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

<meta property="og:url" content="http://tosssaurus.com">

<meta property="og:type" content="website">

<meta property="og:title" content="tosssaurus portfolio">

<meta property="og:site_name" content="tosssaurus portfolio">

<meta property="og:description" content="とある福岡のWebデザイナーのポートフォリオ">

<meta property="og:image" content="http://tosssaurus.com/snscard.png">

<meta name="twitter:card" content="summary_large_image">

<meta name="twitter:site" content="@tosssaurus">

<link rel="apple-touch-icon-precomposed" href="/img-common/apple-touch-icon.png">

<link rel="icon" href="/favicon.ico">

<link rel="stylesheet" href="/css/style.css">

</head>

 

head内の記述だけでもたくさん種類があります。

 

あらためて記述方法を調べて、最低限必要なタグを厳選しました。

なるべく公式ドキュメントを探しましたが、たどり着けないものは、GoogleやMozilla、Appleなど信用のあるサイトを主に参考にしています。 

 

OGP使用前の宣言

<head prefix="og:http://ogp.me/ns#">

headタグにOGPの設定してますよ宣言のprefix属性を書きます。

htmlタグに書いたりいろいろ方法があるようですが、Facebookの推奨の記述に準じておきます。 

 

文字コードの指定

<meta charset="utf-8">

文字コードはUTF-8一択になりましたね。

大文字小文字はHTML5では区別されないので、どちらでもOKです。 

  

IE標準モードでの表示指定

<meta http-equiv="X-UA-Compatible" content="IE=edge">

IEで最新バージョンの標準モードで表示させる指定です。

CSSやJSの読み込み前で、なるべく早い段階での記述が推奨されています。

IE対策:互換表示させない。 - Qiita 

 

ビューポートの設定

<meta name="viewport" content="width=device-width">

viewportはモバイル対応で必須の記述です。

viewportがないとうまく表示されない恐れがあり、モバイル対応していないとクローラーに認識されるとスマホからの検索結果で順位を下げられてしまいます。

 

ページのタイトル設定

<title>tossaurus portfolio</title>

HTMLページには基本必須です。

検索ワードで使用されたり検索結果で表示される、とても重要な箇所です。
なんでもいいから設定するだけではなく、言葉の言いまわしや漢字・カナの表記など細かく気を配りましょう。

 

また、全ページ共通のタイトルにするのは極力避けましょう。
違うページなら、違う内容、すなわち違うタイトルになるはずで、同じタイトルだと同じページ(重複コンテンツ)だとクローラーに認識されてしまうことがあります。

クローラーに同じページが複数あると認識されてしまったら、メインと判断されたページ以外は検索結果から除外されてしまうことがあります。

 

ページの説明の記述

<meta name="description" content="とある福岡のWebデザイナーのポートフォリオ">

titleタグと同じくらい重要です。

titleタグと同じように、すべてのページでオリジナルのdiscriptionを設定するのがSEOにとても効果があります。

面倒ですが、一度適切に設定すれば、あとはサイトの宣伝をまかせられる心強い存在になります。

 

正しいURLの指定

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

設定しておくとURLごとの評価の分散を防げます。

httpなのか、httpsなのか。wwwありかなしか。最後に/つけるかつけないか。

URLの分散はこちらが意図せずとも起こってしまうので、設定しておくのが安心です。

 

OGPの設定

<meta property="og:url" content="http://tosssaurus.com">

<meta property="og:type" content="website">

<meta property="og:title" content="tosssaurus portfolio">

<meta property="og:site_name" content="tosssaurus portfolio">

<meta property="og:description" content="とある福岡のWebデザイナーのポートフォリオ">

<meta property="og:image" content="http://tosssaurus.com/snscard.png">

リンクは必ず絶対パスで!

ここで、前述の「正しいURLの設定」として指定したリンクと差異がないかも注意してくださいね。

 

また、websiteはトップページの設定です。下層ページはすべてarticleにしておきます。 

 

Twitterカードの設定

<meta name="twitter:card" content="summary_large_image">

<meta name="twitter:site" content="@tosssaurus">

Twitter用の設定があります。

忘れず設定しておくとシェアされた時の見た目が適切になるので、宣伝の効果を高めることができます。 

 

apple touch iconの設定

<link rel="apple-touch-icon-precomposed" href="/img-common/apple-touch-icon.png">

「ホームボタンに追加」する時や「ブックマーク追加」する時などに表示されるアイコンの設定ができます。

せっかく気に入ったサイトでも、ここがのっぺらぼうだと残念です。

設定してあると、再訪問が数ヶ月後でも、画像とセットなので思い出しやすく、他サイトと区別がつきやすいですよね。 

 

faviconの設定

<link rel="icon" href="/favicon.ico">

最近はrel属性はiconでよいとのこと。

私はapple-touch-iconもfaviconも、使いまわしやすくルートパスにしています。 

 

解析タグは?

あとは各々の解析タグなどをご自由に。

headの閉じタグの直前だったりbodyの直下だったり、サービスごとで設置場所が違うので、必ず確認しましょう。

 

Javascriptは?

Javascriptは、読み込みに影響を与えないようbodyの閉じタグの直前が推奨されています。

コンテンツの読み込み前にJSを読む必要があるときは、cssの記述の後に書きます。 

 

 

不要なもの

キーワードの設定

keywordタグはGoogleは見ていないと明言されていたことが話題になりましたね。

「工数のムダ」とはっきりおっしゃっていたので本当に今は不要なんでしょう。

Bingも見ていないようです。

 

検索エンジンにインデックスする設定

検索結果に反映するよう指定することも不要です。
通常、特に指定しなくてもインデックスされるからです。

また、サイトマップなどインデックスの設定は今はSearch consoleでするのが直接的です。

わざわざインデックスの指定をrobotsでするのはかなり遠回りです。 

 

閉じスラッシュ「/」いるの?いらないの?

HTML5では、閉じスラッシュは不要です。

 

ついてるサイト結構見かけない?

XHTMLでの記述では、閉じスラッシュが必須でした。

HTML5の宣言であるDOCTYPEは、HTML4.01やXHTMLの記述もサポートしていますし、閉じスラッシュが不要なだけで、禁止ではないのでついていても問題はないです。

また、Wordpressの記事投稿などデフォルトでは閉じタグありの記述になるみたいですね。

 

 

ひとりごと

 

 

まとめ

どんなに素敵なデザインを仕上げても、適切なマークアップ、適切なSEOができていなければ、たくさんの方に見つけていただく機会を失ってしまうかもしれません。

Webサイトの舞台はWebです。
Webの世界は変化のスピードが速いですが、お作法をきっちり守れば機会を増やせる、誠実な世界になってきているので良い時代だなぁと思います。

 

一方で、今は推奨されている方法でも、数年後には古い技術になってしまうことがしばしば起きます。

1度調べたことに満足せず、なるべくアンテナを張って変化に柔軟に対応していけるように心がけたいです。

 

HTML5のhead内の記述 - Qiita

Google グループ