<body>要素内に入れるコンテンツについてはブラウザで表示され、目に見えるものでしたが、<head>要素内に入れるものはコンテンツとして表示はされず、主にブラウザや検索エンジンに対しての情報を提供します。
WEB制作初心者の方はとりあえず読み飛ばしてもらって構いません(笑)。特にSEO絡みのものは前提知識が必要でわかりずらいものが多いと思います。まずは<body>内の方とcssを頑張りましょう。(実際私が案件取得したときもあまりこの辺は理解していませんでした笑)
以下があるサイトの例です。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="WEB制作、モバイルアプリ開発、電子工作等についての情報を発信するブログです">
<meta name="keywords" content="WEB制作,モバイルアプリ開発,電子工作">
<meta property="og:title" content="初めての投稿 | 私の開発ブログ">
<meta property="og:description" content="WEB制作、モバイルアプリ開発、電子工作等についての情報を発信するブログです">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.co.jp/">
<meta property="og:image" content="https://example.co.jp/img/sns/sns_card.png">
<meta property="og:site_name" content="私の開発ブログ">
<meta name="twitter:card" content="summary_large_image">
<meta name="robots" content="noindex,follow">
<link rel="icon" href="./favicon.ico">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/top/style.css">
<link rel=”canonical” href=”https://example.co.jp”/>
<script src="script.js" defer></script>
<title>私の開発ブログ | 初めての投稿</title>
</head>解説していきます。
タイトルの指定
ページのタブ等に設定されるタイトルを指定します。
<title>私の開発ブログ | 初めての投稿</title>スタイルシートの読込
スタイルシートを読込みます。href属性に、該当する.htmlファイルから見た、.cssファイルの相対パスを指定します。
<link rel="stylesheet" href="./css/style.css">javascriptの読込
javascriptを読込みます。src属性に該当する.htmlファイルから見た、.jsファイルの相対パスを指定します。
defer属性を指定しておくことで、html全体の解析が終わった後に、スクリプトを読込むようになります。これを指定しないと、htmlファイル全体を読込む前にスクリプトが実行されしまい、読込まれていない<body>内の要素に対するスクリプト操作が実行されたりする不具合が発生してしまう恐れがあります。
※上記の問題があったため、</body>閉じタグの直前でスクリプトを読込む等が良いとされていたこともあったが今は<head>要素内に記述するのがオススメ
<script src="script.js" defer></script><script>要素内にインラインで処理を記述することも可能。こちらはdefer属性を指定できません。
<script>
alert("scriptが読込まれました")
</script>ファビコン
ブラウザーのタブや、ブックマーク一覧に表示されるアイコン。使われる場面によって、ブラウザが適宜最適なサイズの画像を取り出して使用します。以下の二通りのやり方があります。
favicon.icoをルートディレクトリに設置した上でhref属性にそのパスを指定する。
※favicon.icoは複数サイズのアイコン画像をひとまとめにしたもので、ネット上で.jpg、.png、.gifなどの画像ファイルから、Faviconジェネレータ―等の、ファビコンを生成してくれるツールがあるのでそれを使使用して確認できます。
<link rel="icon" href="/favicon.ico">また、favicon.icoではなく、.pngや.gifの画像ファイルをhref属性に指定し、sizes属性にサイズを指定して複数画像ファイルをリンクしてもOK。ブラウザが適切な画像を勝手に選択してくれます。type属性には、image/画像ファイルタイプを指定します。
<link rel='icon' href='画像ファイルのパス' sizes='16x16' type='image/png'>
<link rel='icon' href='画像ファイルのパス' sizes='32x32' type='image/png'>
<link rel='icon' href='画像ファイルのパス' sizes='48x48' type='image/png'>
<link rel='icon' href='画像ファイルのパス' sizes='62x62' type='image/png'>アイコン
iphone用のアイコン。150*150くらいのサイズを推奨。href属性に画像ファイルへのパスを指定します。
<link rel='apple-touch-icon-precomposed' href='画像ファイルのパス'>windowsタイルの設定。name="msapplication-TileImage"のcontent属性には画像ファイルのパスを指定し、name="msapplication-TileColor"のcontent属性には背景色を指定する。
<meta name='msapplication-TileImage' content='画像ファイルのパス'>
<meta name='msapplication-TileColor' content='カラーコード（例：#F89174）'>言語の設定
<head>タグではないが、使用する言語の設定を行います。基本的にはルートの<html>のlang属性にjaを指定するだけで、日本語を使用することになります。
<html lang="ja">emmetで出てくるlang="en"のままにしていると、ブラウザで表示したときに文書を翻訳するか確認されることがあります。
URLの正規化
自身のサイト内や、タイトル名やテキスト文章などのページを構成してる内容がほぼ同じコンテンツであったり、他人のサイトにおいて自分のサイトと似たコンテンツがあったり、URLがwww付き、www無しのどちらでもアクセスできる場合などを重複コンテンツといいます。
検索エンジンから見ると、上記は同じコンテンツなので、複数必要無いと判断し、何れか一つを検索結果に表示するようになります。
内容が重複するコンテンツ全ての<head>要素内に、下記を設置し、href属性に検索結果に表示させたいURL(正規URL)を指定します。
よく分からない場合は、コンテンツが自分の作成したオリジナルなものであればそのままhref属性に該当するページのURLを入れればOK。SEO上入れておいた方が良いです。
<link rel=”canonical” href=”正規のurl”/>文字コードの指定
文字コードを指定するおまじない。charset属性にHTMLの記述されている文字コードを指定する。基本的にはUTF-8を指定。
<meta charset="UTF-8">レスポンシブの指定
レスポンシブ対応をするためのおまじない。これを記述してある前提で、レスポンシブ化対応をしていく。
<meta name="viewport" content="width=device-width, initial-scale=1.0">ディスクリプション
ページに関する説明を120文字程度でcontent属性に指定していく。ページの内容に関連したキーワードをしっかり設定すれば、SEO効果もある程度期待できる。また、検索エンジンでの検索結果にもこの説明文が表示される。
<meta name="description" content="WEB制作、モバイルあプ入り開発、電子工作等についての情報を発信するブログです">キーワード
そのページの内容を表すキーワードをcontent属性にカンマ区切りでキーワードを指する。検索エンジンからは無視され、SEO効果は無い。
<meta name="keywords" content="WEB制作,モバイルアプリ開発,電子工作">OGP
twitter等のSNSで、ページへのリンクを共有した時に自動的にサムネ画像や説明文が表示されたりするアレ。<head> か<html>のprefix属性に下記を入れ、編集していくこと。
編集したOGPの確認は、サーバーへアップロードした後に、ラッコツールズのOGP確認等で確認できる。
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<meta property="og:title" content="初めての投稿 | 私の開発ブログ">
<meta property="og:description" content="WEB制作、モバイルアプリ開発、電子工作等についての情報を発信するブログです">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.co.jp/">
<meta property="og:image" content="https://example.co.jp/img/sns/sns_card.png">
<meta property="og:site_name" content="私の開発ブログ">
<meta name="twitter:card" content="summary_large_image">
<meta property="fb:app_id" content="appIDを入力" />以下詳細です。
タイトル
ページのタイトルをcontent属性に指定します。一般的にはサイト<title>要素と同じ内容を設定しますが、サイト名などのブランド情報を含まないtitleを20文字以内で設定することが好ましいとされています。
<meta property="og:title" content="初めての投稿 | 私の開発ブログ">ディスクリプション
ページの説明文をcontent属性に指定します。サイトのメタディスクリプションと同様の内容で記述することが多いですが、og:descriptionでの文字数は80~90文字が最適とされています。メタディスクリプションの文字数は120文字程度なので、内容をそのままを設定してしまうと表示された際に文字が切れてしまう可能性があるため、OGP用に文章を簡略化するとシェアされた際にユーザーに伝わりやすくなります。
<meta property="og:description" content="WEB制作、モバイルアプリ開発、電子工作等についての情報を発信するブログです">ページ種類
ページの種類をcontent属性に指定します。このタイプを設定することにより、SNS上での表示形式が変わってきます。TOPページの場合はwebsite、WEBサイト上の記事ページなど、TOPページ以外にはarticleを指定します。
<meta property="og:type" content="website">URL
OGPを設定するWEBページのURLをcontent属性に指定します。URLは相対パスではなく絶対パスでの記述をします。
<meta property="og:url" content="https://example.co.jp/">表示される画像
SNS上でシェアされた際に表示させたい画像を絶対パスでcontent属性に指定します。
画像サイズは横1200×縦630pxであれば概ねどのSNSでも正常に表示されますが、表示するタイプが正方形などの場合、元画像の左右中央部分が正方形になるようにトリミングされるので、重要な部分は左右中央の630px部分に集めるように画像を作成しましょう。
<meta property="og:image" content="https://example.co.jp/img/sns/sns_card.png">サイト名
ページのサイト名をcontent属性に記述します。サイト名やブランド情報はog:titleではなく、このog:site_nemeに設定します。
<meta property="og:site_name" content="私の開発ブログ">各種SNS個別のもの
twitter:card
Twitter上での表示タイプをcontent属性に指定します。ブログやwebサイト用、アプリ配布用、動画サイト用とあり、それぞれ見せ方が変わってきます。主に次のような指定をします。
summary：タイトル、説明、およびサムネイル。表示される画像は正方形になります。summary_large_image：summaryと同じ形ですが、画像の大きさが大きいもの(横1.91:縦1)になります。
<meta name="twitter:card" content="summary_large_image">twiter:site
@から始まる、Twitterのアカウント名をcontent属性に指定します。
<meta name="twitter:site" content="@katsu_dev">fb:app_id
サイトやブログの管理者をFacebookに伝えるためのタグになります。content属性にFacebookのappIDを指定します。
<meta property="fb:app_id" content="appIDを入力" />クローラーに対する指示
content属性にクローラーに対する指示をカンマ区切りで指定する。
<meta name="robots" content="noindex,follow">※クローラーとは、WEBを巡回し情報を集めるプログラムの事でGoogleやYahoo!等のものがあります。WEBを巡回することをクロールと呼び、クロールしたページを検索エンジンのデータベースに登録していく事をインデックスと呼びます。クロールされたページはさらにリンクを辿られて、リンク先をそのページと関連性のあるものとして、検索エンジンに登録していきます。
代表的なcontent属性として
index: 該当ページのインデックスを許可する。(既定値)noindex: 該当ページのインデックスを許可しない。開発中のページや、重複コンテンツがある等、ユーザーに見せたくないページに使用します。follow: 該当ページからリンクを辿る事を許可する。(既定値)nofollow: 該当ページからリンクを辿る事を許可しない。ブログの記事欄に書かれたリンクや、有料コンテンツへのリンク等がある場合に使用します。
WEBサイトの制作途中の場合などはnoindex,followにしておいて、webサイト内のリンクはフォローしてもらうが、インデックスはさせないような使い方をすることがあります。
robots.txtというものでも似たような事ができるが、こちらは、
- WEBサイトのルートに設置し、対象がWEBサイト全体となる
- クロール自体をする、しないを指定できる
- metaはページごとに設置しクロール自体の制御はできない
といった違いがある。
次の記事
HTMLの入力が楽々できる、emmetについて紹介します！
