[HTML] Metaタグに関して(SEO最適化)

こんにちは。明月です。

ウェブドキュメントの中でメタタグのウェブドキュメントの説明、キーワード、要約情報と考えられます。

Htmlはウェブページの基本骨格で考えられるし、CSSはこの骨格で色やフォントサイズなどのスタイルを付けてユーザがもっと綺麗、よく見えるようにすることで、Javascriptはそのページを動的に変換させ整合性ウェブプロシージャを実装、動的に変換をあげ、プログラムらしく動くようにする機能です。

そのなかでHtmlのタグ、タグの中でメタタグということがあり、ウェブページの詳細情報になります。

メタタグは３つのアトリビュート(属性)を持っています。

1. http-equiv

- ヘッドの値を正義することができる属性だし、この属性でサーバとブラウザ間の作動方法、指示を正義するアトリビュートです。

2. content

- meta情報の内容です。

3. name

- ドキュメントラベルのメタデータの名を正義します。itemprop、http-equivあるいはcharsetの属性の中で一つでも設定された場合、設定できません。

1. 文字コードの種類設定

ウェブページのエンコーディング属性を指定できます。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">

2. 互換性設定

ブラウザ別の互換性を設定するタグです。IE 8から11、edgeまでの各バージョンによってレンダリング特性が違います。少なくとも色のコードも少し違いますね。

そのことでウェブのドキュメントが何のバージョンに最適化になっているかを設定することです。

最近にはIE８バージョンや9、10バージョンに合わせる必要がないので、前よりは重要が少ないです。普通は基本的に入れるタグですが別にこのタグがなくてもウェブサイトを実装することではそんなに問題ないと思います。

<meta http-equiv="X-UA-Compatible" content="IE=edge;Chromeframe=1">

3. ビューポート設定

モバイルとPCは解像度は違います。特にモバイルの場合、モニターのサイズによって解像度が高いですが、この解像度によってウェブを設定するとモバイルでは文字がすごく小さく見えると思います。

そして、ウェブの形が解像度ではなくサイズによって表現しなければならないですが、そのことを設定するタグです。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

4. 説明タグ(description)

このタグは検索エンジンで説明がでる部分です。

私の考えではSEOタグの中では一番重要な部分ではないかと思います。このタグの内容がなくても検索ができないか説明表示をしないことではないですが、検索の優先順位で高くできないし、正確なキーワード検索が難しいではないかと思います。

<meta name="description" content="<![CDATA[ 内容　最大20文字 ]>">

5. クローリング及びインデックス生成、動作制御タグ

このタグは検索エンジンでインデックスになれ、検索エンジンの検索タイプを設定するタイプです。

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

もしこのタグを省略すれば基本設定のALLで認識します。しかし、「none」で設定すればクローリング、リンクを設定しません。「noindex」の場合はクローリングはするけど、検索結果にはでないようにすること、「nofollow」はリンクが見えないようにすることです。

「nosnippet」はイメージと動画はクローリングをしないようにすること、「noimageindex」はイメージや動画が検索結果にでないように設定することです。

私の場合はブログで検索ができないようにする設定がなかったので、普通は「ALL」で設定します。

6. 指定されたタイムアウトになるとリダイレクト制御タグ

このタグは設定したタイム時間がすぎるとリダイレクトにする機能です。このタグによってはブラウザ別でエラーになることがありますね。

<meta http-equiv="refresh" content="30;url=https://www.nowonbun.com" />

３０秒後で「https://www.nowonbun.com」に繊維すると意味です。

7. アダルトサイトということを設定する。

<meta name="rating" content="adult" />
<meta name="rating" content="RTA-5042-1996-1400-1577-RTA" />

8. そのた

「author」タグや「keywords」、「copyright」などのタグもあります。でも最近は使わないタグになりますね。

検索エンジンでもクローリングしないし、ウェブページでも設定しないですね。なので、説明を省略します。

link - https://www.w3schools.com/tags/tag_meta.asp

link - https://support.google.com/webmasters/answer/79812?hl=ja