【HTMLハンズオン1】基本的なHeadタグの作成を実践してみよう。

HTMLのheadタグに基本的なメタデータを設定する手順を学びます。SEO対策をする上で必須なmetaタグですが、教えてくれる人が居ないと何年も知らないままだったりします。

更新日: 3/23/2025

さて、OGPやTwitter Cardについて知ったところで、実際に手を動かしてみましょう。この記事では、HTMLの<head>タグに基本的なメタデータを設定する手順を学びます。

HTMLファイルを作成

まずは、テキストエディタを開いて新しいHTMLファイルを作成します。ファイル名は何でもいいですが、ここではindex.htmlとしておきましょう。

おすすめの構成

Workspace
├── index.html
└── その他ファイル

HTMLの骨組みを作成

新しいHTMLファイルに、以下のコードをコピペしてください。

<!DOCTYPE html>
<html>
<head>
  <!-- ここにメタデータを追加 -->
</head>
<body>
  <!-- 本文 -->
</body>
</html>

headタグにメタデータを追加

次に、<head>タグの中にメタデータを追加します。以下は一例です。

<head>
  <title>私の素晴らしいウェブページ</title>
  <meta charset=“UTF-8”>
  <meta name=“description” content=“これは素晴らしいウェブページです“>
  <meta name=“keywords” content=“素晴らしい, ウェブページ“>
</head>

title: ウェブページのタイトルを設定
meta charset: 文字コード（通常はUTF-8）を設定
meta name=“description”: ウェブページの説明を設定
meta name=“keywords”: ウェブページに関連するキーワードを設定（SEO対策）