WEBデザイン基礎（9）headタグ内には、最低何を書けばいいのか？

鶴岡建二

headタグの中は、必要なページのリンクなどがあれば、ページ自体は見ることができるが、重要な情報が抜けていると、見てもらえないページになるかも・・・。

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">


  <!-- cakeshop CSS -->
  <link rel="stylesheet" type="text/css" href="css/cakeshop.css">
  <title>ホームページのタイトル</title>
</head>

前回までに制作したBootstrapのテンプレートの<head>タグの中は、こうなっていたはずです。これだけでも、ページは表示されますが、SEO対策においても、また、SNSでシェアされたときの効果において、必要な要素が抜けています。では、何を追加すれば、よいのでしょうか？

１．タイトルをつける（title)

すでに、<title>ホームページのタイトル</title>と、タイトルがかいてあります。ホームページのタイトルです。ブラウザのタブの部分に表示されます。

２．メタディスクリプション（meta description）

検索エンジンで検索したときに、タイトルの下に表示される説明文です。
これがないと、ページ内の文章が表示されます。

<meta name="description" content="ホームページの内容を簡潔に表す文章" />

３．ファビコンを作ろう

画像4

ファビコン(favicon.ico)というのは、ブラウザのタブに表示される小さなアイコンです。これがないと、ちょっと寂しい感じがします。簡単なので作ってみましょう。
まずは、illustratorなどで、ロゴなどを利用して大きめの画像を作成します。
サンプルでは、500×500ピクセルの画像にしました。小さく表示される画像なので、シンプルなデザインにするのがコツです。

ファビコン

４８ピクセル、３２ピクセル、１６ピクセルの正方形の大きさの画像をPNG形式で書きだします。

画像3

画像が準備できたら、ico形式のファイルに変換してくれるサイトを利用してマルチアイコンを作成します。

完成したアイコンがこれです。

<link rel="shortcut icon" href="/favicon.ico" type="image/vnd.microsoft.ico"/>

head内に上記のリンクを入れておいてもよいですが、WEBページと同じディレクトリにアイコンファイルを置いておくだけで、表示されるようになりますので、リンク先を指定する必要はありません。

画像4

４．スマホ用にもWeb Clipアイコンを用意しよう

Web Clipアイコンとは、Webサイトへのショートカットを表示させるアイコンのことです。iPhone、iPad、Androidでも使うことができます。

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

サンプルでは、１８０×１８０ピクセルで作りました。最低でも５７ピクセル以上にしてください。

画像5

apple-touch-icon-precomposed.png

５．OGPを利用して、SNS対策をしよう

前回作ったテンプレートがOGPを利用できるように変更します。
まず、OGPを利用できるようにするコードを追加します。
「lang="ja"」は、なくてもいいとされているので、削除します。

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

メタディスクリプションの次の行に以下を追加します。

<meta property="og:title" content="このページのタイトル">
<meta property="og:type" content="website">
<meta property="og:url" content="ホームページのURL">
<meta property="og:description" content="ホームページの簡潔な説明">
<meta property="og:image" content="表示させたい画像のURL">

以下がhead内に必要な要素を追加したコードです。より完成したテンプレートになりました。

<!doctype html>
<html prefix="og: http://ogp.me/ns#">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
<meta name="description" content="ホームページの内容を簡潔に表す文章" />
<title>ホームページのタイトル</title>

<!-- web clip アイコンのリンク -->
<link rel="apple-touch-icon" href="apple-touch-icon-precomposed.png">

<!-- OGP設定 -->
<meta property="og:title" content="このページのタイトル">
<meta property="og:type" content="website">
<meta property="og:url" content="ホームページのURL">
<meta property="og:description" content="ホームページの簡潔な説明">
<meta property="og:image" content="表示させたい画像のURL">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">


  <!-- cakeshop CSS -->
  <link rel="stylesheet" type="text/css" href="css/cakeshop.css">
  
</head>
<body>
<div class="container">


 <nav class="navbar">
 
 <ul class="nav">
<a class="navbar-brand" href="#">CAKE SHOP</a>
<li class="nav-item">
  <a class="nav-link active" href="#">チーズケーキ</a>
</li>
<li class="nav-item">
  <a class="nav-link" href="#">季節のケーキ</a>
</li>
<li class="nav-item">
  <a class="nav-link" href="#">アクセス</a>
</li> 
</ul>


 </nav>


 <header>

   <div class="row">
    <div class="col">
       <img class="img-fluid top-img" src="cake.png" alt="Responsive image">
    </div>
   </div>

 </header>

 <main>

 <div class="row">
  <div class="col">
 <h2>見出しが入ります。</h2>
 <p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
 </div>
  </div>

 </main>

 <footer class="footer">

  <div class="copy">
    <p class="text-center align-middle">&copy; your cake shop name 2020</p>
 </div>
 </footer>


</div>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>


参考　Bootstrap4チートシートを使う

カスタマイズ時に便利なサイトを紹介します。
各パーツを探すのに便利です。見つけたらコピペ。それだけ。



この記事が気に入ったらサポートをしてみませんか？