メタタグの使い方について

menu

カテゴリー：スタッフブログ

2020年4月13日

今回は、HTMLファイルに記載するメタタグについてご紹介いたします！

HTMLファイルの仕組み
まず、HTMLファイルの仕組みについておさらいしましょう。
HTMLファイルの中に記載するタグは、次の3種類になります。

メタタグの使い方
メタタグは、headタグの中に記載します。
下記に、特におすすめするメタタグについて具体例をあげますので、参考にしてみてくださいね。

■文字コード

記載例：<pmeta charset=”utf-8″>
文字化けを防ぐために文字コードの設定を行います。
日本語として利用する主な文字コードは「UTF-8」「Shift_JIS」「EUC-JP」の3つになります。

■メタディスクリプション

記載例：<meta name=”description” content=”この部分にWebサイトの説明文を記載します。”>
ディスクリプションは、サーチエンジンで検索したときにタイトルの下に表示される説明文のことです。
ディスクリプションに記載する文字数は、100文字から120文字を目安にすると良いでしょう。120文字を多少オーバーしても問題ないので安心してください。
閲覧者はディスクリプションに書いてある説明文を読んでからタイトルをクリックすることがほとんどです。
そのため、ディスクリプションにWebサイトの内容を分かりやすく記載することは集客率アップにつながります。

■サーチエンジンでの検索避け対策

記載例：<meta name=”robots” content=”noindex,nofollow”>
非公式なWebサイトや他人に見てほしくないWebサイトを運営する場合に記載します。

■ビューポート

記載例：<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
ビューポートは、Webサイトをスマートフォンでも最適な状態で表示するために記載します。ビューポートは、レスポンシブWebデザインに必要なメタタグです。最近では、スマートフォンでWebサイトを閲覧する機会が増えているため、必須のタグといえるでしょう。

メタタグはWebサイト上には表示されませんが、目に見えない部分で活躍するタグになります。メタタグを正しく理解してコーディングするようにしましょう！