概要

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>

引用・参考

https://www.e-webseisaku.com/column/marketing/3947/
https://developer.mozilla.org/ja/docs/Web/HTML/Element/meta
http://www.htmq.com/html/meta.shtml
https://digital-marketing.jp/seo/index-control-meta-robots/