HTMLタグ調べてみた

仕事柄コーディングをする機会があるのですが、皆さんはHTMLのタグについてどこまでご存じでしょうか。
何となくコピペで使っていた部分もあったメタタグですが、
調べてみるとたくさんの意味があるので備忘録として残してみようかと思いました◎
この世に意味のないものなんてない！…さぁ始めましょう笑

metaタグとは…

metaタグ(meta要素)とは、HTML文書の文字コードや概要、キーワードなど、文書におけるさまざまなメタデータを表します。

HTML5におけるmeta要素の意味と使い方、使用できる属性、サンプルコード、使用例について解説していければと思います。

まず書き方ですが…

<meta 属性="属性値">

meta要素は文書におけるさまざまなメタデータを表す。
※メタデータ：文書の文字コードや文書の概要、キーワードなどの文書に関する情報のことを表す。
よく話題になるSEOであったり、最近よく聞くOGPに関する情報を付与する仕組みにも用いられる。

ページをインデックスさせない

質の低いページや不要なページを検索結果に表示させないことを意味する「noindex」というメタタグを指定することによってサイト内に質の高いコンテンツを充実させてSEO効果を高めることが考えられます。
※クローラーは全てのリンク先を巡回してインデックスしていますので、インデックスさせたい場合に何か記述する必要はありません。

<meta name="robots" content="noindex">

リンクを辿らせない

質の低いコンテンツへのリンクをクローラーに辿らせないメタタグを指定することによってSEO効果を高めることも大切です。
これは、metaタグを使ってページ全部のリンクにまとめて適用する方法と、a要素を使ってリンクごとに適用する2つの方法があります。

<meta name="robots" content="nofollow">

検索結果との関連性向上

ページの説明文である「description」は検索キーワードが検索結果中に太字で表示されるため、ユーザーが目的のコンテンツを見つけやすくなる効果を期待できます。
直接SEO効果はありませんが、検索結果に表示される内容となりますので、クリック率にも影響します。

<meta name="description" content="SEO対策したキーワード">

モバイルフレンドリー(スマホページの最適化)

スマホやタブレットなど、メタタグでモバイル端末のブラウザサイズに対応し、モバイルフレンドリーにすることは重要です。

<meta name="viewport" content="width=device-width,initial-scale=1.0">

文字化けを防ぐ

ファイルの文字コードと合わせ、表記の統一をはかります。

<meta charset="UTF-8">

色々羅列しましたが、正しく・適切にメタタグを記述することで、サイト情報を検索エンジンのクローラーに伝えることができます。
クローラーのためだけではありません。閲覧者にとっても重要な要素となるため、一つずつ確認していきましょう♪