サイト管理に重要なmetaタグの設定・最適化方法
SEOの基本とも言えるmetaタグの書き方や最適化方法について考えていきます。
サイトを管理していく中で、検索順位を考慮したディスクリプションなどのmetaタグは、全て「重要」と考えがちですが、実はそれほど重要ではないタグもあります。
改めて各タグの重要度を考えて、適切にmetaタグを設置しましょう。
目次
実際にページを閲覧していても目に見えない記述となるmetaタグだからといって軽視しがちですがSEOにとって重要な要素のひとつです。
はじめに、基本となるmetaタグがこちらです。
metaタグは＜head＞と＜/head＞の中に記載します。
Facebookや、twitterでの拡散も考えてmetaタグにOGPとtwitterカードも記述しています。
<!doctype html> <html> <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#"> <meta charset="utf-8"> <title>ページのタイトル</title> <meta name="description" content="ページの説明" /> <meta name="viewport" content="width=device-width"> /*スマホ対応する時は記述*/ <link rel="canonical" href="正規化するurl"> /*必要あれば*/ <!-- facebookに関するタグ --> <meta property="og:site_name" content="サイト名" /> <meta property="og:title" content="ページタイトル" /> <meta property="og:type" content="website" /> /*トップページ以外はarticle*/ <meta property="og:url" content="ページのurl" /> <meta property="og:image" content="シェアされた時のサムネイル" /> <meta property="fb:app_id" content="アプリid" /> <meta property="og:description" content="ページの説明"/> <meta property="og:locale" content="ja_JP" /> <!-- twitterに関するタグ --> <meta name="twitter:card" content="カード表示の種類" /> <meta name="twitter:site" content="@ユーザー名" /> <meta name="twitter:description" content="ページの説明" /> <meta name="twitter:image:src" content="投稿時の画像" /> <link rel="stylesheet" href="/css/index.css" type="text/css" media="all" /> </head> <body> <!-- こちらにコンテンツ --> </body> </html>
上記を詳細に説明するとhtml5や、構造化データについてなど色々と膨らんでしまうので、
本記事ではmetaタグに絞ってご説明します。
description
metaタグの中でdescription（ディスクリプション）は検索結果のページタイトルの下に表示される説明文となります。
スニペットとも呼ばれるdescriptionですが、キーワードを意識して、クリックしたくなるような説明文、そして不自然にならないよう全角120文字程度に収めます。
<meta name="description" content="ページの説明" />
ディスクリプションは順位に影響しない？
ページタイトルは順位に影響しますが、ディスクリプションは順位に直接影響するというより、クローラーと検索ユーザーにページの内容を正しく伝える役割を果たします。
しかし魅力的な内容である場合、検索ユーザーがディスクリプションを確認しクリックしてサイトに訪問してくれる為、直接順位に影響しないからといって軽視できません。ページタイトルとともに、サイト内の全ページ重複しないように設定するようにしましょう。
viewport
viewportタグは、サイトを表示するデバイス毎の表示領域を指定するタグです。
viewportタグが正しく設定されていると、モバイルフレンドリーなサイトとしてGoogleに判断されます。
viewportの設定については過去公開記事レスポンシブデザイン簡単導入法01 – ビューポート・メディアクエリ編もあわせてご覧ください。
＼無料診断の活用で課題を明確に／
外部リンク、内部状況、コンテンツ状況からSEO対策の課題が見えてくる無料調査です。
「対策ページの弱点は何か...」などお悩みをお持ちの方は、一度「SEOパーソナル診断」をご利用ください。
OGP設定
OGPはOpen Graph Protocolの略で、設定したOGPタグを有効にするタグとなります。
Facebookに関しては、head要素にprefix属性を追加してOGPを使用する宣言が必要になるので、注意が必要です。
xhtmlの場合、htmlにタグを追加
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
html5で構築していない場合、統一してこのタグをhtmlへ追加します。
html5の場合、headにタグを追加
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
トップページの場合、articleと記述してある2箇所をwebsiteとして記述します。
注意点として、こちらはheadタグに記述するという点です。
twitterカード
投稿されたツイートにサイト情報も追加されます。（基本はOGPの内容を参照します。）
その他、twitter独自のタグを追記します。そしてタグの設置が完了した後、別にtwitterへ申請が必要となります。
承認後、URLをツイートすると、ツイートの下に設定したカードが表示されます。
twitterカード表示の種類
ツイッターカードの表示には数種類ありますので、選んで記述します。
- Summary
- Summary Card with Large Image
- Photo
- Gallery
- App
- Player
- Product
＼無料診断の活用で課題を明確に／
外部リンク、内部状況、コンテンツ状況からSEO対策の課題が見えてくる無料調査です。
「対策ページの弱点は何か...」などお悩みをお持ちの方は、一度「SEOパーソナル診断」をご利用ください。
Keywords
meta keywordsタグに関しては、Googleはサポートしていないと言及しています。
Googleの検索セントラルで公言したのですが、「サポートしていない」と明確化したのはこれが初めてではないでしょうか。
googleは、サポートしていないmetaタグを無視します。
インデックスやランキングにも影響しないとはっきり記述されているので、今まで「一応残しておくか」とお考えだった方は、削除されると良いのではないでしょうか。
クローラーはhtmlソースコードの上から情報を読むので、余計な1行を無くすことはメリットしかありません。
今も多くのサイトでこのメタタグを設置しているのは昔、評価に影響していたためです。
<meta name="Keywords" content="キーワード" />
metaキーワードに関してのSEO効果は下記の記事も参考にしてみてください。
その他：titleタグ
titleの文字数
なるべくターゲットキーワードを先頭に、そして不自然にならないようにサイトタイトルを全角で35文字程度に収めて書きます。
それ以上文字数が多いと「…」で省略されてしまい、タイトルによっては何のサイトかわかりにくくなってしまい、クリック率も減ってしまうことも考えられます。
titleのページタイトルの重要度
ページタイトルは検索順位にも大きく影響するので、慎重に決めましょう。
ただ、あまり順位が上がらないからといって何度も変えてしまうと正しくクロールされず、逆に順位が上がらない。という可能性もあります。
＼無料診断の活用で課題を明確に／
外部リンク、内部状況、コンテンツ状況からSEO対策の課題が見えてくる無料調査です。
「対策ページの弱点は何か...」などお悩みをお持ちの方は、一度「SEOパーソナル診断」をご利用ください。
その他：canonical
下記urlは、全て同じくアクセスできてしまうことから、評価が分散してしまう恐れがあります。
これを統一させる事を「URLの正規化」といいますが、その方法のひとつとして、「canonical（カノニカル）」というタグを設定する方法があります。
「URLの正規化」にはこの他にも、.htaccessで301リダイレクトするという設定方法もありますので、詳しくは「URLの正規化」で情報収集してみてください。
wwwの有無
- http://www.example.jp/
- http://example.jp/
index.html/phpの有無
- http://example.jp/
- http://example.jp/index.php
- http://example.jp/index.html
httpまたはhttps
- http://example.jp/
- https://example.jp/
パラメータの有無
- http://example.jp/?blog
- http://example.jp/
metaタグについてまとめ
metaタグを改めて見てみると意外と、直接検索順位に影響しそうなのはなさそうですがサイトへの集客に影響が出てくる「ディスクリプション」や「OGPタグ」などがあります。metaタグは検索エンジンや検索ユーザーに正しくページの内容を伝えるために必須のタグです。
これを参考に、内部対策の見直しをしてみましょう。
そして、今回のmetaタグについての説明は、内部対策のごく一部となりますが、SEOの外部対策としては被リンクが現在も重要な役割を果たします。
SEO Packは外部対策（被リンク）＋ツール＋ノウハウが月額固定でご利用いただける総合SEO対策パッケージとなっております。ぜひ、内部対策と並行して外部対策には、SEO Packをご検討ください。
