コンテンツ部分を除いた部分に記述すべきことを備忘録的に記事化しておきます。
HTMLの構造
基本の復習になりますが、下記です。
<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
</body>
</html><head>タグ内に記述すべきこと
(1)文字のエンコード
<meta charset="UTF-8">文字コードを日本語にします。
(2)IE対策
<meta http-equiv="X-UA-Compatible" content="IE=edge" />利用者の環境によって、古いIEで表示されて、ページが崩れてしまうので、それを防ぐための記述です。
(3)viewportの設定
<meta name="viewport" content="width=device-width,initial-scale=1" />レスポンシブデザインのサイト制作の場合は記述必須です。
(4)タイトルタグ
<title>ページタイトル</title>Google等の検索結果に表示されるページのタイトルです。
(5)メタディスクリプション
<meta name="description" content="ページの内容を表す文章" />100文字程度で記述します。検索順位の上昇に直接影響があるわけではありません。
(6)meta robots
<meta name="robots" content="noindex,nofollow" />検索エンジンに対して「このページをインデックス（掲載）しないで！」という指示をします。
掲載してもらいたい場合には、記述の必要はありません。
ちなみに、掲載して！というときは下記の通り記述します。
<meta name="robots" content="index,follow">(7)OGPタグ/twitterカード
<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="カード種類" />
<meta name="twitter:site" content="@Twitterユーザー名" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:locale" content="ja_JP" />
<meta property="fb:app_id" content="appIDを入力" />facebookやtwitterなどのソーシャルメディアでシェアされたときに、リンクを魅力的に表示させるための設定です。
“twitter:card” content=”カード種類” とある箇所ですが、下記4種類の指定が可能です。
- Summaryカード
- 大きな画像付きのSummaryカード
- Appカード ※アプリ用
- Playerカード ※動画用
Summaryカードは、
<meta name="twitter:card" content="summary">大きな画像付きのSummaryカードは、
<meta name="twitter:card" content="summary_large_image">と記述します。
(8)URLの正規化（link rel=”canonical”）
<link rel="canonical" href="正規化するURL" />例えば、
・https://www.example.com/ にアクセスされたとき
・https://www.example.com/index.html にアクセスされたとき
や、
・https://www.example.com/pc/ にアクセスされたとき
・https://www.example.com/sp/ にアクセスされたとき
など、URLや見た目は違うけど、内容は全く同じページ同士なのに、検索エンジンからのページ評価が分散してしまうのを防ぐための記述です。
(9)ファビコン・アップルタッチアイコン
<link rel="icon" href="/favicon.ico" id="favicon">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">あると、サイトがリッチになります。Googleの検索結果でも表示されるので、設定しておくと良いと思います。
(10)外部読み込みファイル
・CSS
・JavaScript
・GTMタグ
・Googleフォント
などがあると思います。
<div class=”wrap”>
▼HTMLでの記述例
<div class="wrap">
<body>
</body>
</div>▼CSSでの記述例
.wrap{
overflow: hidden;
}これは何をやっているかというと、ページ内の文字列がはみ出して、レイアウトが崩れないようにはみ出す部分は非表示にして、と指示しているものになります。
自分のポートフォリオサイト制作をしているとき、スマホ表示の際に文字列がはみ出てしまい、レイアウトが著しく崩れたことがありました。
それ以来、この記述をしています。
overflowプロパティは、ボックスに入りきらないコンテンツの表示を制御するためのCSSプロパティです。
まとめると・・・
こうなるのかな、と思います。
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- meta -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="robots" content="index,follow">
<meta name="description" content="ページの内容を表す文章" />
<title>ページタイトル</title>
<!-- og -->
<meta property="og:url" content="ページのURL" />
<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="ページのタイプ（website）">
<meta property="og:description" content="記事の抜粋" />
<meta property="og:image" content="画像のURL" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:locale" content="ja_JP" />
<meta property="fb:app_id" content="appIDを入力" />
<!-- sns -->
<meta name="twitter:card" content="カード種類" />
<meta name="twitter:site" content="@Twitterユーザー名" />
<!-- Google Tag Manager -->
<script></script>
<!-- End Google Tag Manager -->
<!-- icon -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- seo -->
<link rel="canonical" href="正規化するURL" />
<!-- stylesheet -->
<link rel="stylesheet" href="">
<link rel="stylesheet" href="">
<!-- JavaScript -->
<script src=""></script>
</head>
<div class="wrap">
<body>
</body>
</div>
</html>
コメント