ウェブデザイナーの毎日のお仕事のメモ - mainichi web まいにちウェブ

作成日:2019.11.13  最終更新日:2021.01.04

HTML

【初心者の方向け】HEADの中身に書くこと(HEADの雛形)

初心者の方向けの、HEADタグの中身についてのお話しです。

おそらく何度となく書く記述ですが、たまに忘れてしまうのでメモです。

HEADの中身

サイトによって下記の通りにはならないかと思いますので、あくまで参考程度にご覧ください!

<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>サイトとかページのタイトルが入ります</title>
	<meta name="description" content="ページの説明が入ります。">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- icon -->
	<link rel="icon" type="image/x-icon" href="favicon.ico">
	<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png"> 
	<!-- /icon -->
	<!-- css -->
	<link rel="stylesheet" href="reset.css">
	<link rel="stylesheet" href="style.css"> 
	<!-- /css -->
	<!-- js -->
	<script type='text/javascript' src='jquery-3.3.1.min.js'></script>
	<script src="script.min.js"></script>
	<!-- /js -->
</head>

HEADの中身詳細説明

charset

文書の文字エンコーディングを指定する際に使用する。

title

ウェブサイト名や個々のページのタイトルを記述するためのタグ。SEO的にも重要なタグで、32文字くらいまでに納めたほうがいいようです!

description

検索画面で検索結果の一覧で、タイトルの下部に表示される文章です。これも、SEO的に重要なものです。

viewport

スマホやタブレットなどのモバイル端末で最適なWeb表示に必要なタグです。

他に記述するもの

他に記述するものとして、OGタグや、googleの諸々のタグなどがりますが、いつかそれについても記述できたらと思います。

最新記事