【HTMLハンズオン1】 基本的なHeadタグの作成を実践してみよう。
HTMLのheadタグに基本的なメタデータを設定する手順を学びます。SEO対策をする上で必須なmetaタグですが、教えてくれる人が居ないと何年も知らないままだったりします。
2023年12月06日
関連記事
さて、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対策）
保存してブラウザで確認
設定が完了したら、ファイルを保存してブラウザで開いてみましょう。特に見た目に変化はありませんが、ページのソースを表示して<head>タグの中身が正しく設定されているか確認してください。
まとめ
今回はここまで。
大丈夫。あまり頑張りすぎないで、少しずつ進めていきましょう。