Web担当者なら知っておきたい定番のGoogleサービス9選

このページは約15分で読み終わります

後で読む

Webサイトの改善をする

まずはいわゆるWebデザイナー、コーダー、フロントエンドエンジニアの方が主に利用するサービスです。

Googleからサイトの表示速度改善や、マークアップの構造、モバイルフレンドリーのチェックサービスが様々提供されています。定番サービスばかりですが、いずれも抑えておいて損はないでしょう。

Test My Site

モバイルに特化したサイトの表示速度診断サービスです。3G回線環境下において以下のチェックが行えます。

サイトの読み込み時間（秒）
読み込み時間に応じた離脱率
同業種においての相対的なサイトの表示速度比較
サイトの表示改善における修正対象の指摘

また「無料レポートを取得する」を押すと、指定したアドレス宛に修正対象がまとめられたレポートメールを受信することができます。

ただこのサービスは

読み込み時間は、サーバーの場所、端末、ブラウザ、サードパーティのアプリの有無などによって変わってきます。

とのこと。実際にこのサイトをチェックをした際にタイミングにより「要改善」「普通」「良好」など評価に変化が見られました。評価自体に一喜一憂してもあまり意味はなさそうです。

また国内では4G回線が主流であることから、国内にあるサーバーのサイトを国内向けにローンチする場合はさほど意識しなくても問題なさそうに思います。

レポートは1時間以内に送られてきます。ただ内容は簡易であることから、サイトのチューニングをする際には以下のPageSpeed Insightsを利用すると良さそうです。

PageSpeed Insights

こちらは「TestMySite」よりも古いサービスですが、モバイル、PCそれぞれ向けにサイトの表示速度診断を行ってくれるサービスです。何回「分析」を押してもサイトの速度診断結果は変わらない為、デバッグに最適です。

以下のチェックを行うことが出来ます。

CSS を縮小する
JavaScript を縮小する
圧縮を有効にする
HTML を縮小する
ブラウザのキャッシュを活用する
スクロールせずに見えるコンテンツのレンダリングをブロックしている
　JavaScript/CSS を排除する
サーバーの応答時間を短縮する
リンク先ページのリダイレクトを使用しない
画像を最適化する
表示可能コンテンツの優先順位を決定する

「CSSを圧縮する」「JavaScriptを圧縮する」では該当ページにおける全てのCSSがミニファイされているかどうかをチェックします。「style.css」などの中で改行やインデント、スペースがないかなどですね。

ここでは細かく触れませんが、ミニファイには大きく3つぐらい方法がありそうです。Syncerなどのサービスを使う、GulpやGruntなどを利用する、WordPressなどであればプラグインを利用する(このサイトではWP Fastest Cacheを利用)。

特にPageSpeed Insightsでは、「画像を最適化する」でも挙げられている画像の圧縮対応が欠かせません。利用する画像フォーマットはPNG/JPEG/GIFとなり、BMP/TIFFは非推奨とされます。

ただ圧縮と言ってもクオリティを落とすのも微妙なのでロスレス圧縮をしたいところですが、ロスレス圧縮には「TinyPNG」が便利です。PNGとJPEG両方に対応しており、PageSpeed Insightsでクリアできます。圧縮率も30%～80%程度と劣化せずかなり圧縮されます。ただし圧縮した画像を更に圧縮すると劣化するので注意が必要です。

モバイルフレンドリーテスト

いわゆる「スマホ対応」を行う際に、そのサイトがGoogleから見た際にモバイルフレンドリー（スマホから閲覧した際に最適なレイアウトになっているか）という点を評価するためのサービスです。

これにはGoogleがサイトの順位決定を行う上での検索結果のランキング要因の1つでもあることから重要視されていますが、何よりユーザーがスマホから見た際に、文字を拡大しなくても読める、ボタンがタップしやすいよう十分な余白が確保されている、Flashを利用していないなど、全てはユーザーの為の読みやすさに尽きることから「このページはモバイルフレンドリーです。」判定は受けておきたいところです。

構造化データテストツール

ソース内の構造化データを検証するためのツールです。

検索結果でレーティングや、イベントの開催日などで見かけるあれですね。

SEOの文脈で語られる構造化データですが、これはコンピュータにとっては単なる記号である文字に対して、コンピュータが理解できる形にし、より効率的に情報を収集して解釈できるような構想である「セマンティックWeb」があり、それを実現する為の具体的な手段のことを指します。

構造化データには4種類あり、「Microdata」「RDFa」「Microformats」「JSON-LD」があります。中でもGoogleが推奨しているのは「Microdata」の形式でありこのサイトでもMicrodataでパンくず箇所を表現しています。

<ol class="breadcrumbs fw200" itemscope itemtype="http://schema.org/BreadcrumbList">
	<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
		<a href="https://ahalog.tdesignworks.net" itemprop="name"><span itemprop="name">HOME</span></a>
		<meta itemprop="position" content="1" />
	</li>	
	<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
		<a href="https://ahalog.tdesignworks.net/cms/" itemprop="name"><span itemprop="name">CMSの記事一覧</span></a>
		<meta itemprop="position" content="2">
	</li>
	<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
			<span itemprop="name">WordPressのセキュリティ対策まとめ 2017</span>
		<meta itemprop="position" content="3">
	</li>
</ol>

など通常のHTMLよりも記述が長くなりますが、記号である文字に意味を与えることができます。

サイトの管理・解析をする

以下は主にサイトの運用担当者、Webアナリストなど向けのサービスです。

Google Analytics

無償のサイトアクセス解析サービスとして定番のGoogle Analyticsです。

日々改良が重ねられインターフェースが変わり、機能も増え続けていますが、大別すると以下の分析が行なえます。

全体のサマリ

ユーザー数、PV数、滞在時間、直帰率など

ユーザーはどんな属性か

閲覧端末、ブラウザ、OS、地域、新規orリピーターなど

どこから集客しているか

検索エンジン、直接訪問、外部サイトリンク、SNS経由など

どこを見ているか

開始閲覧ページ、どうページ遷移したか、どこが見られているかなど

他にもリアルタイム解析機能であったり、目標設定など便利な機能が多くあります。Google Analyticsを利用する際は、予めGoogle Search ConsoleやAdWordsなどとの連携を管理画面より設定しておくことでより便利に使うことができるでしょう。

ただアクセス元のIPアドレスを取得し企業を判別したり、ヒートマップを見たり、特定のユーザーがどこのページからどのページへ遷移したのかなどを把握することはできないので、そういったニーズの場合はUser Insightなど別のサービスの利用を検討すると良さそうです。

Google Search Console

旧WebMaster Toolsという名称で呼ばれていた無償のサイト管理者、運営者向けのサービスです。

Google Analyticsと同様、基本的にはサイトを持つ上で初期に設定しておきたいサービスですが、主に以下の機能があります。

Google検索を利用したユーザーの検索キーワードの把握
Googleからの自動/手動ペナルティの確認
sitemap.xmlの登録とGoogleへのクローリング通知
構造化データの確認
重複するmeta情報の確認

などがあります。Googleとサイトの接点であるクローラー(bot)がサイトを訪問し、サイトをどう評価しているかを知る手がかりとなる貴重なサービスですね。

基本的な使い方の学習については以下公式で用意されているYouTubeが役立ちます。

Google AdWords公式アカウントでもっと見る

こう見るとこれだけでも結構なサービスがありますね。何か新しい発見があったなら幸いです。

途中で力尽きてしまったので、気が向けば更新をします笑

最後までお読み頂きありがとうございます！