ホームページのリニューアル案件で良く見かける＆困ることが多いのが、デザインだけがきれいなサイトです。

ホームページがきれいなことはとても大事で、その点に関してはまったく異論はありません。
※軽くして欲しいなどの要求はあるでしょうが

ただ、それだけじゃGoogleさんは良い顔はしないんですよ。

それはなぜかと言うと、、、
 

ホームページの持つ２つの顔

Googleさんがなぜ良い顔をしないのか。
それは、デザインがきれいかどうかは主観的なものなので機械で判断しないということ。

それ故、検索エンジン的には判断材料として定量化できるものを中心にインデックスの作成材料にしているんですね。
 

この部分を踏まえ、弊社ではホームページは２つの顔を持たなければならない、としています。

１つは、購入してもらいたい見込み客に見てもらう顔。
もう１つは、検索順位を上げるための検索エンジンに見てもらう顔。

 

本日は、後者の検索エンジンに見てもらう(=SEO対策)際に有効とされるmetaタグの設定ポイントをざっくりご紹介します。
 

metaタグとは

ホームページのデータは
すべてHTMLというコンピュータ用の言語によって
作られていることはご存じの方も多いのではないでしょうか？

HTMLでは次のような内容をHTMLタグという要素で記述できます。

  • 文字のコンテンツ
  • デザイン(CSSなど)
  • プログラム(JavaScriptなど)
  • ウェブサーバー、ブラウザー、への指示
  • 他サイトへのお願い

この中で、最後の２項目をmetaと名前がついたタグで記述します。
 

設定する項目

今回は簡単にこんなことを書くんだ、と思いながら、
自分のサイトがどのようになっているか
見てもらえれば良いかと思います。
 

内容は弊社のものをサンプルに用いました。

※ブラウザーのソース表示の方法

  • Internet Explorerは「右クリック」もしくは「表示」メニューで「ソース」から
  • Chromeは「リストアイコン｜その他のツール｜ソースを表示」メニューから
  • Firefoxは「右クリック」で「ページのソースを表示」メニューから
     

文字コード指定

そのサイトがどのような文字コードで作られているかを指定します。
これが間違っていると、きちんと解析されない可能性があります。

<meta charset="UTF-8">
 

モバイルで表示するときの表示サイズ指定

iPhoneやAndroidスマートフォン、タブレットなどで
表示する際の表示幅を指定します。

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

ウェブサイトの説明

検索エンジンに対し、
ウェブサイト(ホームページ)の内容の概要を記述します。

<meta name="description" content="株式会社ドリームハイブは、もっと業績を伸ばしたい中小企業に時短をコンセプトにしたノウハウ・ツールを提供するITコンサルティング会社です">
<meta name="description" itemprop="description" content="株式会社ドリームハイブは、もっと業績を伸ばしたい中小企業に時短をコンセプトにしたノウハウ・ツールを提供するITコンサルティング会社です。 システム開発では、PHP（WordPress / CodeIgniter）や.NETで仕組みを構築して御社の業務改善のお手伝いをいたします。" />
 

ウェブサイトのキーワード

検索エンジンに対し、
ウェブサイト(ホームページ)の内容についてのキーワードを列挙します。

<meta name="keywords" itemprop="keywords" content="時短,ITコンサルティング,ITコンシェルジュ,システム開発,DH-APPLI,ドリームハイブ,dreamhive,WordPress,CodeIgniter,不動産,山本悟" />
 

URLの正規化

重複コンテンツ問題の解決のためのタグ。

wwwの有無で検索エンジンが重複コンテンツとして
ペナルティを科さないようにするためのタグです。

<link rel="canonical" href="https://old.dreamhive.co.jp/" />
 

OGP設定(FacebookやGoogle+での表示の最適化)

ウェブページで提供しているコンテンツについて、
SNSへ明示するタグです。

参考：【メルマガバックナンバー】事実上アクセスアップに必須となったOGPを設定しよう

<meta property="og:title" content="ITを利用した仕組み作りのプロ集団：時短をコンセプトにしたITコンサルティングの株式会社ドリームハイブ" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://old.dreamhive.co.jp/" />
<meta property="og:image" content="https://old.dreamhive.co.jp/wp-content/plugins/all-in-one-seo-pack/images/default-user-image.png" />
<meta property="og:site_name" content="ITを利用した仕組み作り：システム開発とITコンサルティングの株式会社ドリームハイブ" />
<meta property="og:description" content="『IT相談会 in 荻窪カフェ』始めました♪ 時短ビデオ公開中です！【Excel 2013 編】 WordPress 利用者必見！無料動画プレゼント実施中 初心者のための WordPress 勉強会 WordPress を使いこなしたいけど、どこから始めればよいかわからないあなたへ &nbsp; >>&nbsp;過去の開催セミナーはこちら ドリームハイブの業務内容" />
 

Twitterでの表示の最適化

Twitterでは、OGPタグだけに加えてTwitterCardという設定を読み込んで利用します。

<meta name="twitter:card" content="summary" />
<meta name="twitter:description" content="『IT相談会 in 荻窪カフェ』始めました♪ 時短ビデオ公開中です！【Excel 2013 編】 WordPress 利用者必見！無料動画プレゼント実施中 初心者のための WordPress 勉強会 WordPress を使いこなしたいけど、どこから始めればよいかわからないあなたへ &nbsp; >>&nbsp;過去の開催セミナーはこちら ドリームハイブの業務内容" />
 

以上、ご紹介したものがmetaタグについてのすべてではありませんが、
最近のトレンドとしても押さえていただきたい項目を列挙しました。
 

まとめ

私がお伝えしたいのは、SEO対策って最初に設定してはい終わり、には
絶対にならないってことなんですよ。

なにしろ対象となる検索エンジン自体が常に変化しているのですから。
 

弊社のクライアントさんはこの点をきちんと把握している方も多く、

  • 自分ができないから
  • 自分でやる時間がないから

などの理由で外注という意味で弊社にご依頼いただくことが多いですね。

ご興味あれば、下記サイトもご覧くださいね。

ITコンサルティング サービス
→ https://old.dreamhive.co.jp/business/consulting

 
ITに関する疑問であれば、とりあえず質問してみてくださいね。
※Excel や Word などのソフトの疑問などでも大丈夫ですよ！