目次
- 1 コピペで使えるhead内タグ
- 2 各タグの解説
- 3 <html lang=”ja”>とは
- 4 <head prefix=”og: http://ogp.me/ns#”>とは
- 5 <meta charset=”UTF-8″>とは
- 6 <meta name=”description” content=”ページの説明”>
- 7 <meta name=”format-detection” content=”telephone=no,address=no,email=no”>とは
- 8 <meta name=”viewport” content=”width=device-width,initial-scale=1″>とは
- 9 SNS用のOGP設定
- 10 <link rel=”canonical” href=”ページのURL”>とは
- 11 <link rel=”icon” href=”/favicon.ico”>とは
- 12 <link rel=”apple-touch-icon” href=”/icon.png”>とは
- 13 <link rel=”stylesheet” href=”/style.css”>とは
- 14 <title>サイト名</title>とは
- 15 スクリプトのタグはbody閉じタグの直前
コピペで使えるhead内タグ
<!DOCTYPE html>
<html lang="ja">
<head prefix="og: http://ogp.me/ns#">
<meta charset="UTF-8">
<meta name="description" content="ページの説明">
<meta name="format-detection" content="telephone=no,address=no,email=no">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta property="og:url" content="ページのURL">
<meta property="og:title" content="ページのタイトル">
<meta property="og:type" content="ページのタイプ">
<meta property="og:description" content="記事の抜粋">
<meta property="og:image" content="画像のURL">
<meta name="twitter:card" content="summary_large_image">
<meta property="og:site_name" content="サイト名">
<meta property="og:locale" content="ja_JP">
<link rel="canonical" href="ページのURL">
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/icon.png">
<link rel="stylesheet" href="/style.css">
<title>サイト名</title>
</head>headって何を書くんだっけ、ということが多いので、自分の備忘録として整理しました。
以上のタグをコピペで使うと爆速でコーディングが進められます！
以下、各タグの解説です。
このタグって何のために書くんだっけ？となった時に読んでください。
各タグの解説
<!DOCTYPE html>とは
HTML文書では必ず最初に「DOCTYPE宣言」を記述する必要があります。
大文字と小文字は区別されないので <!doctype html> などと記述してもOKです。
<html lang=”ja”>とは
「このHTML文書は日本語で書かれていますよ」という意味です。
<head prefix=”og: http://ogp.me/ns#”>とは
OGPを設定するためにprefixを書いておく必要があります。コピペでOK。
<meta charset=”UTF-8″>とは
文字エンコーディングの指定です。
<meta name=”description” content=”ページの説明”>
検索エンジンの検索結果にも引用される重要なタグ。
キーワードを入れてSEO的な効果が期待できますが、必ず検索結果に反映されるとは限りません。
文字数は120文字以内がおすすめ。
<meta name=”format-detection” content=”telephone=no,address=no,email=no”>とは
スマートフォンやタブレット端末では、電話番号や住所またはメールアドレスだと推測される文字列があると自動でリンクが貼られます。
この機能を制御するのが「format-detection」タグです。
<meta name=”viewport” content=”width=device-width,initial-scale=1″>とは
ブラウザのウィンドウサイズにデザインを最適化させるための設定です。
これを書いておかないと、横幅が画面からはみ出たりします。
SNS用のOGP設定
<meta property="og:url" content="ページのURL">
<meta property="og:title" content="ページのタイトル">
<meta property="og:type" content="ページのタイプ">
<meta property="og:description" content="記事の抜粋">
<meta property="og:image" content="画像のURL">
<meta name="twitter:card" content="summary_large_image">
<meta property="og:site_name" content="サイト名">
<meta property="og:locale" content="ja_JP">ツイッターやフェイスブックでシェアされたときに画像を表示したりする設定です。
<link rel=”canonical” href=”ページのURL”>とは
SEO的な観点から見て、この設定でURLの正規化をしておくべきです。
これを記述しないと、以下のようなURLで同じコンテンツが生成されてしまいます。
- http://example.com
- http://www.example.com
- http://example.com/index.html
- http://www.example.com/index.html
<link rel=”icon” href=”/favicon.ico”>とは
ファビコンを指定するためのタグです。
<link rel=”apple-touch-icon” href=”/icon.png”>とは
iPhone や iPad などのiOS端末で、ウェブサイトを「ホーム画面に追加」したときに表示されるアイコンを指定するタグです。
<link rel=”stylesheet” href=”/style.css”>とは
href=”/style.css” の部分は、cssファイルを置いている場所に合わせて書き換えてください。
<title>サイト名</title>とは
サイトのタイトルを設定するタグです。
スクリプトのタグはbody閉じタグの直前
JavaScriptの記述は、head内に書かずにタグの末尾にまとめて記述します。
スクリプトの実行中は次のタグの処理がストップしてしまうので、基本的には <head>〜</head> 内には「script」タグは記述しないようにしましょう。
コメントを残す