概要
Web開発に必須の知識HTMLを勉強し直している。
その整理ノート。今回はMetaタグ。
そもそも、HTMLとは
HTML = HyperText Markup Language。
拡張子(.html)
基本的なタグの構成
開始・終了タグ(タグの種類)、属性(attribute)、テキストや画像で成り立っている。
終了タグは必要なものと不必要なものがある。
<開始タグ タグの属性="タグの属性値">(表示するテキスト)<(/終了タグ)>
metaタグ
文章のメタ要素。文書そのものの設定を行うようなイメージ。
この設定を読み込んで、ブラウザは表示を変えたり、そのページがどのようなサイトであるかを判断する。
metaタグはオプションであるが、設定をしっかり行なっておくことで、
文字化けのリスクが減り、
リンクが貼られた時にも見栄えが良くなり、SEOの観点からも良い。
metaタグの設置場所は、headタグ内に置くこと。
<meta><\meta>
charset属性
文字エンコーディングをセット。
基本的にはUTF-8を使用する。(日本語に対応するため)
むかしはSHIFTも使われていたことも。
ASCIIはアルファベットのみならOK。
<meta charset="UTF-8"></meta>
nameメタタグ
この文章の説明。
descriptionメタタグ(name="description")
この文章の説明文をcontent属性に書く。
<meta name="description" content="HTMLの基本">
keywordsメタタグ(name="keywords")
この文章のキーワードをcontent属性に書く。。SEOなどの観点で検索されそうなものを選ぶ。
複数書く時はカンマ区切り。
<meta name="keywords" content="HTML,初心者,タグ">
robotsメタタグ(name="robots")
検索エンジンに対する挙動の制御。contentに"noindex,nofollow"とすることで、隠しページにできる。
<meta name="robots" content="noindex,nofollow">
viewメタタグ(name="viewport">)
レスポンシブルなテキスト表示にするためのタグ。
contentsの詳細はこちらに。
<meta name="viewport" content="width=device-width,initial-scale=1">
OGPメタタグ(property="og:✕✕✕✕✕")
OGP = Open Graph protocol
SNSなど外部のサイトでシェアされた時の挙動を設定する。
それぞれ一般的なmetaタグをSNS版のためにクローンして設置するイメージ。
<meta property="og:title" content="タイトル">
<meta property="og:type" content="website/article">
<meta property="og:description" content="説明">
<meta property="og:url" content="URL">
<meta property="og:site_name" content="サイトのタイトル">
<meta property="og:image" content="サムネイル画像のURL>