みなさんは「検索エンジン最適化」という言葉を聞いたことありますか?
今回はSEO対策についてとmetaタグの活用方法について解説していきます。

SEOとは?

SEO(Search Engine Optimization)は「検索エンジン最適化」と言われています。
SEO対策は、検索結果で特定のページが上位に表示されるように、検索ユーザーの探している答えをページ内に追加するなど、検索ユーザーを意識した対策をする事です。
アクセス数の獲得を目的としてSEO対策をする場合が多いと思いますが、
評価されるためには、役に立つ情報を検索エンジンや検索ユーザーに正しく伝えることが重要となります。

メリット

アクセス数増加、認知度アップ、自社のサービスのブランド力向上などのメリットがあります。
また、露出拡大による「ブランディング効果」にも繋がります。

デメリット

効果が出るまでに時間を有する点、つまり即効性に欠けるといった点でしょうか。

metaタグとは?

metaタグ(メタタグ)はWebサイトの情報を記載するタグのことで、SEO対策の中でも重要項目の1つです。適切に設定することがポイントとなってきます。

metaタグを記述することにより、「どのような情報が記載されているのか」といったことをGoogle・Yahoo!などの検索エンジンやブラウザに認識してもらうことができます。

metaタグはHPなどのWebサイト上では表示されることはありませんが、
HTMLソースに設定を入れる必要があります。

では、ここからmetaタグの書き方についてご紹介します。

meta description

<meta content="概要文100文字程度" name="description">

(例)<meta name="description"  content="キャスレーコンサルティングは、 経営理念である「社会課題に応える製品・サービスをお客様と共に創り上げるIT企業」を軸に、主にお客様の事業を通じて、経済価値+社会価値創出に貢献していきます。" />

meta description(メタディスクリプションタグ) は、そのWEBページの内容を100文字程度にまとめた概要文や要約文のことです。正しくmeta descriptionタグを設定していると、検索結果上にも表示されます。
結論、SEOに直接的な影響は与えませんが、
meta descriptionタグを正しく効果的に設定すれば間接的なSEO効果を得ることができ、
WEBでの集客効果を補完的に高めてくれるSEO上の重要な役割も担っています。

meta charset

<meta charset="文字コード"> 

(例)<meta charset="utf-8">

meta charset(メタキャラセットタグ)属性は、HTML文書の文字エンコーディングを指定するmetaタグです。
日本語の場合は「utf-8」or「Shift-JIS」が基本かと思います。
HTML5では「utf-8」が推奨されています。
もし、文字コードを指定していなければ、海外からのアクセスなどで文字化けが起こる可能性があるので、meta charset属性は、日本語のサイトでは必ず書く必要があります。

meta property

<meta property=”og:type” content=”ページタイプ”/>
<meta property=”og:title” content=”ページタイトル”/>
<meta property=”og:description” content=”サイトディスクリプション”/>
<meta property=”og:url” content=”ページURL”/>
<meta property=”og:site_name” content=”サイト名”/>
<meta property=”og:image:secure_url” content=”画像URL”/>
<meta property="og:image:width" content="横" />
<meta property="og:image:height" content="縦" />


(例)<meta property="og:type" content="website" />
<meta property="og:title" content="システム開発・SDGsビジネスを展開するIT企業|キャスレーコンサルティング株式会社" />
<meta property="og:description" content="キャスレーコンサルティングは、 経営理念である「社会課題に応える製品・サービスをお客様と共に創り上げるIT企業」を軸に、主にお客様の事業を通じて、経済価値+社会価値創出に貢献していきます。" />
<meta property="og:url" content="https://www.casleyconsulting.co.jp/" />
<meta property="og:site_name" content="キャスレーコンサルティング株式会社 | お客様、社会、仲間、すべてを「もっと、よくできる」" />
<meta property="og:image:secure_url" content="https://www.casleyconsulting.co.jp/wordpress/wp-content/uploads/2018/06/logo_ogp.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

OGP(Open Graph Protocol)とは、FacebookやTwitterなどのSNS上で共有(シェア)された際に、ページのページのタイトル、URL、概要、画像などを正しく表示させる仕組みのことです。
SNS上でページのタイトルやURL、画像情報がユーザーの目にとまり、クリック率の上昇に伴うアクセス数の向上が期待ができます。

meta viewport

<meta name="viewport" content="横幅,初期倍率,etc…" />

(例)<meta name="viewport" content="width=device-width,initial-scale=1.0" />

meta viewport(ビューポートタグ)は、モバイル端末でのページ表示をブラウザに指定するタグのことです。レスポンシブデザインを実現するために必要なmetaタグです。
最近はスマホの利用が増えてきて、Googleもスマホユーザーの評価をインデックスの基準とするモバイルファーストインデックス(MFI)を打ち出すなど、スマホへの対応は必要不可欠です。

実は、モバイルファーストインデックスでインデックス登録されていること自体に、直接的は検索順位を上げる効果はありません。
一方で、2015年に「モバイルフレンドリーアップデート」というアップデートが導入されました。
これは、「モバイル対応がされていないサイトは、モバイル検索の順位が下がる可能性がある」ものです。
このアップデートによって、
モバイル対応していないサイトはモバイル検索での順位が下がるようになっているため、既にモバイル検索の方で順位が下がっている可能性があります。
そのため、サイトへのアクセスを多く集めるなら、モバイル対応させることが必要になります。

meta viewportタグを設定することで、PCだけではなくスマホやタブレットなどデバイスごとにコンテンツの表示領域を設定しましょう。

Viewportで指定でプロパティをいくつかご紹介します。

・width (横幅)
Viewportの横幅をピクセル単位で指定します。
「width=device-width」または「width=○○」と設定できます。
初期値は960px、指定できる範囲は200px〜10000pxです。
「width=device-width」を記述すると拡大率100%で各端末サイズに適した幅指定ができます。

・height (縦幅)
特に指定することはあまりないかと思いますが、「height=device-height」または「height=○○」と設定できます。
初期値は横幅とのアスペスト比から計算される値で、指定できる範囲は200px〜10000pxです。

・initial-scale (初期倍率)
ブラウザウィンドウの幅に合うように初期の表示倍率を設定できます。
「initial-scale=1」に設定をすると1倍になります。

・minimum-scale (最小倍率)
最小の拡大倍率を指定できます。
初期値は0.25で、0より大きく10未満の値を指定することが可能です。

・maximum-scale (最大倍率)
最大の拡大倍率を指定できます。
初期値は1.6で、0より大きく10未満の値を指定することが可能です。

・user-scalable (ユーザーのズーム操作の可否)
ユーザーがズーム操作を可能にするかしないかをコントロールできます。
初期値は「user-scalable=yes」で、「yes/no」または「1/0」で指定することができます。

・target-densitydpi (ターゲットとなる画面密度)
ターゲットとなる画面密度を設定できます。
旧版のAndroid端末向けで、Android4.2以降では廃止されているので、特に気に記載しなくてもいいかもしれません。

title

<title>ページタイトル</title>

(例)<title>システム開発・SDGsビジネスを展開するIT企業|キャスレーコンサルティング株式会社</title>

titleタグはWebサイトのページタイトルを表す部分のことです。
検索エンジンやブラウザにページの内容を認識してもらうために非常に重要なタグです。
また、ユーザーが検索の結果で一番最初に目にする情報です。タイトルに入れるキーワード選びは慎重に行いましょう。
metaタグではありませんが、SEO対策では一番重要と言っても過言ではないタグなので、ご紹介させていただきました。

おまけ

meta keywordは不要??

結論からお伝えすると、meta keywordは現在、SEO対策としての効果がありません。
Googleは公式にGoogle Webmaster Central Blogで「meta keywordsを検索順位を決める要因としては、利用していない」と言及しています。
参考:https://developers.google.com/search/blog/2009/09/google-does-not-use-keywords-meta-tag

以前は利用されておりましたが、検索エンジン自体がアップデートされたこととmeta keywordの悪用が理由で現在はmeta keywordsは重要視されなくなりました。

さいごに

いかがでしたでしょうか?
先程ご紹介したmetaタグをwebサイトに設定するだけで、アクセス数の増加を期待することができます。
設定がまだの方はぜひ実践してみてください!

E.S
SD部 E.S
白いふわふわが好きです!