【HTMLハンズオン2】 SEO対策とモバイル対応
前回は<head>タグの基本を学びましたが、今回はSEO対策とモバイル対応について深掘りしていきます。今はモバイルデバイスでの表示が非常に重要なので、その対策もお伝えします。
前回: 【HTMLハンズオン1】 基本的なHeadタグの作成を実践してみよう。
SEO（Search Engine Optimization）は、検索エンジンで上位に表示されるためのテクニックです。その上で、今はモバイルデバイスでの表示が非常に重要なので、その対策もお伝えします。
モバイル対応
まずは、<meta>タグでモバイル対応をするname=“viewport”を追加してみましょう。特にスマートフォンでの表示にこの設定はとっても大切です。
<meta name=“viewport” content=“width=device-width, initial-scale=1”>
この<meta>タグは、ページがユーザーのビューポート（表示エリア）にどう適応するかをコントロールします。
width=device-width: ビューポートの幅をデバイスの幅に合わせます。initial-scale=1: 最初のズームレベルを1に設定します。これにより、ページはユーザーが開いたときに自動的にズームされることなく、デザイン通りのサイズで表示されます。
※ 「どちらかでいい」という意見もありますが、対応ブラウザの兼ね合いもあり、とりあえずどっちも設定しておけばOK
言語と地域を指定
さて、次に多言語対応です。<html>タグにlang属性を追加してみましょう。
<html lang=“ja”>
具体的には、lang=“ja”の部分で「このページの主要な言語は日本語だよ」とブラウザーや検索エンジンに伝えています。
この設定で、ブラウザや検索エンジンはこのページが日本語であると正確に判断できます。
英語のページを作成する場合は、<html lang=“en”>とします。フランス語の場合は、<html lang=“fr”>となります。言語コードは、その言語に応じて変更することができます。
Canonical設定
もう一つ、canonical（正規）URLを設定してみます。
このタグは、canonical（カノニカル）タグとして知られています。Webページが他のURLで重複して存在する場合に、どのURLが「正しい」ものであるかを検索エンジンに伝えるためのものです。
ウェブサイト内で似たような内容のページが複数存在すると、検索エンジンはどれをインデックスすればいいのか迷ってしまう。カノニカルタグで「これが本物だよ！」と教えてあげるわけです。
ブラウザで確認するだけだと実感が湧かないかと思いますが、頭の片隅に入れておきましょう。
<link rel=“canonical” href=“https://www.example.com/”>
保存してブラウザで確認
<!DOCTYPE html>
<html lang=“ja”>
<head>
<title>私の素晴らしいウェブページ</title>
<meta charset=“UTF-8”>
<meta name=“description” content=“これは素晴らしいウェブページです“>
<meta name=“keywords” content=“素晴らしい, ウェブページ“>
<meta name=“viewport” content=“width=device-width, initial-scale=1”>
</head>
<body>
<!-- ここにページの内容が入ります。 -->
</body>
</html>
最後に、変更を保存してブラウザで開いて確認します。ソースコードを確認して、ちゃんと追加したタグが反映されているか見てみましょう。
まとめ
はい、ここまでです。
無理せず、ゆっくりと進めていきましょう。