検索

キーワード


【HTML】metaタグについて

  • 公開日:2020-09-29 21:08:06
  • 最終更新日:2020-11-13 21:52:19
【HTML】metaタグについて

こんにちは。駆け出しプログラマーの松下です!

metaタグとエンコーディングについて紹介します。

metaタグの役割がピンとこないという方の参考になれば幸いです!


metaタグとは

metaタグは、そのサイトに関する様々な情報を指定するためのタグです。

<head>~</head>の中に記述します。metaタグには終了タグはありません。

代表的なものを記述の仕方とともに紹介していきます。


◆description

Webページの概要がどのようなものかを検索エンジンに伝えるタグです。

記述したものが検索結果のタイトル下に小さな文字で表示されます。

<meta name="description" content="このサイトはmetaタグについて分かりやすく説明します。" />


◆keywords

どのようなサイトかをキーワードで指し示すタグです。複数指定する場合は、半角カンマで区切ります。

<meta name="keywords" content="HTML,Web,スキル" />

基本的にWebページを見に来てくれた人がこのタグを見ることはなく、 Googleが検索順位を決めるうえの評価対象にもなっていないので、記述は必須ではありません。


◆author

そのサイトの作成者の名前を記述します。

<meta name="author" content="松下" />


◆charset

文字コードを指定するタグです。

<meta charset="utf-8" />


エンコード

エンコードとは、情報を一定の規則に従って、データに置き換えて記録することや、あるデータを別の形式のデータに変換することです。

コンピュータが扱えるデータは、数字の「0」と「1」の2進数のみなので、 文字を扱うために個々の文字、記号に固有の番号を割り当てます。その対応表を文字コードといい、文字コードを必要に応じて変更することを文字エンコードといいます。

SHIFT-JISなどの形式にて保存されたデータがEUC-JP専用の読み取りに処理されるなど、文字コードの違いが文字化けの要因です。


HTMLではブラウザが読み取れるように、文字エンコードします。

その際に先程紹介したmetaタグのcharsetを用います。

様々な言語に対応したコード「Unicode」の「UTF-8」を指定すれば、大体の文字化けを防げるでしょう。



【著者】

松下

今年文系未経験からプログラマとなりました。 同じ初心者の方に分かりやすいよう簡潔な記事を心がけていきます。 趣味はサッカー観戦と洋服です。

よく読まれている記事
【HTML/CSS】divタグの使い方

【HTML/CSS】divタグの使い方

こんにちは。駆け出しプログラマーの松下です!HTMLで頻繁に見かけるdivタグとはどんなものかを紹介します。HTMLを学び始めたばかりという方の参考になれば幸いです!divとはdivタグはそれ自身は特に意味を持っていませんが、構造上必要なひとかたまりを示します。例えば、下記のように文字の色を赤にしたいときに、CSSでとを別々に赤色と指定するのは面倒です。HTMLファイル赤い果物 りんご CSS

【HTML】リンクタグについて

【HTML】リンクタグについて

こんにちは。駆け出しエンジニアの竹前です。ここでは、HTMLのリンクタグについて説明します。HTMLについて勉強している方の参考になれば幸いです。リンクタグとはリンクタグとは、HTMLの閲覧中のページから、別のページに遷移させるときに使うタグ(~タグ)のことをいいます。このタグを使うことによって、文字列や画像にリンクを設定することができます。タグとタグの違いHTMLにはタグというものがあります。タ

【HTML/CSS】リストについて

【HTML/CSS】リストについて

こんにちは。駆け出しプログラマーの松下です!リストを作成するol、ulタグを紹介します。HTMLを学び始めたばかりという方の参考になれば幸いです!リストをつくるHTMLで箇条書きを行うには ol、ul、liタグを使用します。このタグによりただの言葉のあつまりでなく、ひとつのまとまりをもったリストであるということをコンピューターに伝えることができます。ol、ulタグでリストを作成し、その項目にliタ