メタタグ内を埋めようとして意外と手間取ったので、調べてわかったことをまとめていく。
必須・ほぼ必須なタグ
titleタグ
その名の通りページのタイトルになる文字列。<title>タグ内に記述する。
ページを開いた時にタブの部分に表示されたり、検索エンジンで太い青字で表現されている部分。
特に後者は、検索しているユーザーが一番最初に目をやる情報という意味で重要なだけではない。タイトルタグが、グーグルの検索エンジンがページをインデックスする際の判断基準にもなっている点で殊の外重要である。”最重要”と断言する人もいる。
具体的な留意点をまとめておく。
- 文字数は30文字くらいを目安にすべし
- キーワードを含めるべし(省略されてしまうことがあるのでできる限りタイトルの前半に書く)(具体的には”どんな内容”・”誰に向けての内容”など)
- 実際に検索してみて他のサイトがどう書いているか参考にするとよし
- ただしページの内容と関係のないワードは省くべし
meta descriptionタグ
<meta content="ここに書く" name="description">
ページの概要や説明をまとめた文。
検索した際に表示され、ユーザーの判断材料になるという意味で極めて重要。タイトルの文章よりもこっちの方をより注意して読んでいるという情報もあり。
画像の赤枠でくくった部分がこのタグ内に記述された文字列。
meta charsetタグ(文字コード属性)
<meta
charset="utf-8">
上のように基本 “utf-8″を指定する。
meta propertyタグ
<meta property="og:title" content="タイトル" />
OGP(Open Graph Protocol)属性、SNSなどで共有された際の表示の仕方を指示するタグ。上はタイトルの例だが、他にも色々あるので要確認。
view portタグ
<meta name="viewport" content="width=device-width,initial-scale=1">
レスポンシブなページを作るために必要。
場合によって必要なもの
noindex,nofollowタグ
<meta name=”robots” content=”noindex”> <meta name=”robots” content=”nofollow”> <meta name=”robots” content=”noarchive”>
検索に表示して欲しくないページがある場合は、これらを記述することで実現可能(robot.txtの設定も影響するので要確認)
意味は ①noindex : 検索結果に表示しないように指示 ②nofollow :検索エンジンのクローラーがリンクを辿らないように指示 ③archive:キャッシュを参照しないよう指示
canonicalタグ
これはURLの正規化を行いたい場合に必要。
特にURLにパラメータがつくような時、どのurlでページをインデックスするか指定したい場合、このタグで制御する。(特に表示に問題があるわけでないのになぜそんなことをする必要があるかというと、同じ内容が別々のURLで表示されてしまう(それぞれのURLで別個にインデックスされてしまう)のを避けるため。コンテンツの重複はSEO的な評価がよくないので、必要があればやっておいたほうが良い)
意味がない・なくてよいもの
meta keyword
2022年現在は意味無しとのこと
<meta name="keywords" content="キーワード1,キーワード2">
meta author
これも必要ないとのこと
<meta name=”author” content=”pppp”>
<meta http-equiv=”X-UA-Compatible” content=IE=edge”>
Internet Explorer対策が必要でないならこのタグを書く必要もないとのこと。
コメント