“ユーザー目線”をどう実現する？社内政治に負けないWebサイトの情報設計
Webサイトの構造はユーザー目線で設計することが重要です。しかし、さまざまな要因からユーザー目線を第一に情報設計を行えない場合もあります。そうした際にはどのような情報設計で対応していけばよいのでしょうか。具体的なパターン例とあわせてご紹介していきます。
metaタグは間接的にSEOに影響する！役割と最適な書き方を解説
SEO
metaタグは、Webページの情報を検索エンジンに伝えるHTMLタグのことです。metaタグは間接的にSEOに影響するため、必要な情報を正しく設定することが肝心です。主なmetaタグの役割と設置方法、書き方を解説します。
metaタグ（メタタグ）とは？
metaタグとは、検索エンジンやブラウザなどに対してWebページの情報を伝えることを目的として設置されるHTMLタグのことです。metaタグで設定される内容はメタデータと呼ばれ、基本的にWebサイト内には表示されないため、一部のタグを除き直接ユーザーが目にすることはありません。
しかし、metaタグを設定することで自社Webページの内容をよりわかりやすくユーザーに伝えたり、ユーザーの環境に関わらず文字化けを防いだりできるため、間接的にユーザーの利便性の向上に効果があるでしょう。
例えば、Googleの検索結果に表示されるWebサイトの説明である「ディスクリプション」や、TwitterにWebページのリンクを張った際に表示される「Twitterカード」などもmetaタグによって設定されています。
metaタグの確認方法
通常Webページ内に表示されずユーザーの目には触れないmetaタグですが、HTMLソースコードを表示することでタグ内容を確認できます。
metaタグを確認したいWebページを開いて何もない場所を右クリックし、ポップアップメニューから「ページのソースを表示」を選択しましょう。別のウィンドウにソースコードが表示されるため、そこから「meta」がついたタグを探します。
metaタグはheadタグの中、つまりソースの冒頭部分近くにありますが、見つけづらい場合は「ctrl ＋ f」でソースコード内を検索するとよいでしょう。<head>以下に、<meta charset> <meta property> <meta name>といったタグがあるのが確認できます。これら<meta〇〇>がmetaタグです。
metaタグの書き方と設置方法
metaタグは、HTML内に直接設置する場合は、ソースコードの<head>〜</head>内に記述します。別の場所に記述してしまうと検索結果に反映されなくなったり、Webページが期待した通りに表示されなくなってしまう可能性があります。
<meta 〇〇=”✕✕” >あるいは<meta 〇〇=”✕✕” content=”△△”>という書き方が基本で、〇〇、✕✕、△△はmetaタグの種類と設定内容によって異なり、大文字と小文字の区別はありません。
WordPressを利用している場合、テーマによってはデフォルトでディスクリプションなどのmetaタグをつける機能が備わっています。そうではない場合も「AIOSEO（All in One SEO）」「Yoast SEO」などのSEO用プラグインを利用することで、Webページごとに設定の必要なmetaタグ、ディスクリプションなどを簡単に設定可能です。
プラグインを導入すると記事の作成画面の下部に「メタディスクリプション」や「スニペット」などを入力・編集するテキストボックスが表示されるので、その中にディスクリプションや設定したい内容を入力しましょう。入力内容が自動的にmetaタグとして設置されるので、わざわざHTMLを記述する必要がありません。
なお、Webサイトの構造はユーザー目線で設計することが重要です。最適な情報設計のポイントは、下記の資料をご参照ください。
【無料】ユーザー目線の情報設計を実現する方法
主なmetaタグの種類と設定できる内容
代表的なmetaタグの種類と、設定内容を以下で紹介します。どのように設定されているか、自社や競合のWebサイトを一度確認してみるとよいでしょう。
description（ディスクリプション）
descriptionとは、meta description（メタディスクリプション）とも呼ばれる、コンテンツの中身を検索エンジンに的確に伝えるための説明や要約のことです。検索結果ページのタイトル下のスニペット部分にも表示される可能性があるため、ユーザーにも読みやすく興味を引きやすい文にする必要があります。
一般的には120文字以内、スマートフォンでの表示を意識する場合は70文字以内に収めましょう。descriptionタグの書き方は以下の通りです。
<meta name="description" content="ページの説明">
OGPタグ（meta property属性）
OGPとは、TwitterやFacebookなどのSNSでWebページがシェアされた際、正しくWebページのURLやサムネイル画像を表示させるためのタグです。
OGPを設定していないと自動でWebページの説明やサムネイルが抽出されてしまうため、意図しない画像や説明をSNSに表示してしまう可能性があります。OGPタグの書き方は以下の通りです。
<meta property="og:title" content="ページタイトル">
<meta property="og:description" content="ページの説明">
<meta property="og:type" content="ページの種類">
<meta property="og:url" content="ページURL">
<meta property="og:site_name" content="サイト名">
<meta property="og:image" content="サムネイル画像のURL">
上記のうち「ページの種類」では、そのページがWebサイトのトップページ（website）なのか、ブログのトップページ(blog)なのか、記事ページ(article)なのかなどを設定します。
文字コード（charset属性）
文字コードは「このWebページがどの文字コードを使って書かれているか」を示します。設定することで、文字化けを防ぎユーザーと検索エンジン両方にWebページの正しい内容を伝えられるようになるでしょう。文字コードの書き方は以下の通りです。
<meta charset=”utf-8”>
文字コードにはShift_JISなどもありますが、一般的にはUTF-8が推奨されています。
viewport（ビューポート）
viewportタグはWebページを表示する大きさを指定するタグで、ユーザーが使うデバイスの画面サイズに合わせてWebページの表示を自動調整するために使います。
viewportタグを設置しない場合、スマートフォンやタブレットからWebサイトを閲覧した際、ページがPCと同じ横幅で表示され内容が見にくくなってしまいます。レスポンシブデザインのためにもviewportタグを設定しておきましょう。viewportの書き方は以下の通りです。
<meta name=”viewport” content=”width=device-width,initial-scale=1”>
noindex,nofollow
noindexは、そのWebページを検索エンジンに表示させないようにするタグです。品質の低いコンテンツやサイト内の類似コンテンツなどにnoindexを設定することで、そのページを検索エンジンの評価から除外できるため、間接的にWebサイトの評価を上げる目的で使用します。
nofollowは、そのページへのリンクを評価しないように検索エンジンに伝えるタグで、自社コンテンツと無関係なWebサイトや広告のリンクなどが検索エンジンから高評価を受けないようにする目的で設定します。noindex、nofollowの書き方は以下の通りです。
<meta name=”robots” content=”noindex,nofollow”>
metaタグはSEOに有効か？
metaタグはSEOに直接影響するものではありません。しかし、metaタグには間接的にWebサイトへの流入を増加させたり、Webページを読みやすくしてユーザビリティを高める効果があります。
例えば、検索結果に表示されるメタディスクリプションは、ユーザーが「そのWebサイトをクリックするかどうか」の重要な判断基準になります。キーワードを盛り込んでわかりやすくWebページの内容を伝えられていれば、検索順位は同じでもより多くの人がWebサイトをクリックしてくれるでしょう。
また、Webページに合わせたOGPタグを設定すればSNSに共有された時の訴求力が向上するため、SNS経由での流入増加も期待できますし、文字コードやviewportタグによって、文字化けなくスマートフォンでも見やすいWebサイトになります。
metaタグはSEOに直接は関係しませんが、正しく設定することでユーザーに「選ばれやすい」コンテンツを作り、間接的にSEOを高める効果があるのです。
この記事を書いた人
サービス資料ダウンロード
Sprocketの機能、コンサルタント、導入事例、実績、
プラン体系などをご紹介します。（無料）
導入検討の相談・見積もり
新規導入、乗り換えのご相談、Web接客ツールの比較など
お気軽にお問い合わせください。（無料）
03-6420-0079（受付：平日10:00～18:00）