Googleはモバイルサイトをレスポンシブデザイン、動的な配信、別々のURL、の３つの方法を使って認識できます。以下の資料を基にまとめました。
参考サイト
モバイル SEO – ウェブマスター向けモバイルガイド
※目次をクリックすると目次の下部にコンテンツが表示されます。
レスポンシブデザインを使ってモバイルSEO
（１）レスポンシブデザインの概要
・サーバーからどのデバイスに対しても常に同じHTMLコードを配信し、CSSを使用して各デバイスでのページのレンダリングを変える。
・ページがすべてのデバイスに対応していることをブラウザに知らせるには、ヘッダーに次のメタタグを追加する。
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
meta viewportタグは、ページのサイズや縮尺を、デバイスの幅に合わせてどう調整すべきかをブラウザに伝えるために使用する。
※meta viewport要素を指定しない場合
モバイルブラウザのデフォルトであるパソコン画面の幅（デバイスによって異なるが通常はおよそ980px）でページがレンダリングされ、その後フォントを大きくして画面に合う縮尺に変える、コンテンツの一部のみが画面に収まるように表示する、といった調整を試みる。
このような調整によって、フォントサイズの統一感が失われたり、コンテンツを操作するためにダブルタップやピンチで拡大する必要が生じたりすることもある。
・レスポンシブな画像には、<picture> 要素を含めるようにする。
（２）レスポンシブデザインを使用するメリット
・URLが1つなので、ユーザーがコンテンツを簡単に共有したりリンクしたりできる。
・ユーザーのデバイスに応じて最適なページにリダイレクトする必要がないため、読み込み時間を短縮できる。
・Googlebotがサイトをクロールするために必要なリソースを節約できる。（同じコンテンツのページが複数存在すると、別々のGooglebotユーザーエージェントがすべてのバージョンを複数回クロールする必要がある
（３）モバイルフレンドリーサイトでJavaScriptを実装する方法
１）すべてのデバイスに同じJavaScriptを配信
・すべてのデバイスに同じHTML、CSS、JavaScriptのコンテンツを配信。
・JavaScriptがデバイスで実行されたときに、デバイスを検出し、サイトのレンダリングや動作が変更される。
・ページやそのアセットのURLがコンテンツを動的に配信しないため、VaryHTTPヘッダーは必要ない。
２）JavaScriptとサーバー側でのデバイス検出
・サーバーがクライアント上のJavaScriptと連携してデバイスの機能を検出し、配信するコンテンツを変更。
例えば、JavaScriptが検出した画面サイズがサーバーに送信され、デバイスに送信するコードをサーバーが更新または変更する。
一般に、JavaScriptは検出したデバイス機能をCookieに保存し、サーバーではそれ以降の同じデバイスからのアクセス時にこのCookieを読み取って判断する。
３）JavaScriptの動的配信
・すべてのデバイスに同じHTMLが配信されるが、JavaScriptはデバイスのユーザーエージェントに応じて異なるJavaScriptコードを動的に配信。
・JavaScriptファイルは「Vary: User-agent」HTTPヘッダーと一緒に配信する事を推奨。
これは、インターネットキャッシュやGooglebotに対し、JavaScriptがユーザーエージェントごとに異なる可能性があることを知らせるもの。また、GooglebotがさまざまなGooglebotユーザーエージェントを使ってJavaScriptファイルをクロールするためのシグナルでもある。
動的な配信を使ってモバイルSEO
（１）動的な配信の概要
・ページをリクエストするユーザーエージェントに応じて、同じURLで異なるHTML（およびCSS）を配信。
・Googlebotがクロール時に、モバイルコンテンツ用に別のHTMLが配信される事をVary HTTPヘッダーを使用して伝える。
（２）HTTP Vary: User-Agentヘッダー
１）概要
・ページをリクエストするユーザーエージェントによって、応答の内容が異なることをブラウザに伝える。
・Googlebotがモバイル端末向けのコンテンツを迅速に検出できるようになる。
・キャッシュ サーバーにキャッシュからページを配信するかどうかを決定する際にユーザーエージェントを考慮する必要があることを知らせる事ができる。（Vary HTTPヘッダーがないと、モバイルユーザーにPC用HTMLページのキャッシュを送ってしまう可能性がある。）
２）HTTP Vary: User-Agentヘッダーの設定方法
①Apache
Header append Vary User-Agent
②WordPress
function add_vary_header($headers) {
$headers['Vary'] = 'User-Agent';
return $headers;
}
add_filter('wp_headers', 'add_vary_header');
③PHP
<?php
header("Vary: User-Agent, Accept");
?>
別々のURLを使ってモバイルSEO
（１）別々のURLを使ったモバイルSEOの概要
・PC用コンテンツとモバイル用コンテンツで別のURLを用意する。
・PC用URLとモバイル用URLの2つのURLの関係をrel=”canonical”およびrel=”alternate”要素で伝える。
・ユーザーエージェント文字列を検出し、その内容に応じてPC用、モバイル用のURLにリダイレクトする。
Googlebotでは、HTTPリダイレクトとJavaScriptリダイレクトの2つのリダイレクトの実装がサポートされる。
（２）PC用URLとモバイル用URLのアノテーション
Googleでは、アノテーションの設定箇所として、ページ自体のHTMLとサイトマップの2つをサポートしている。
１）HTMLに追加するアノテーション
①PC用ページ（http://www.example.com/page-1）
<link rel=”alternate” media=”only screen and (max-width: 640px)”
href=”http://m.example.com/page-1″ >
②モバイル用ページ（http://m.example.com/page-1）
<link rel=”canonical” href=”http://www.example.com/page-1″ >
２）サイトマップに追加するアノテーション
サイトマップには、以下のようにPC用ページのrel=”alternate”アノテーションを含めることができる。（モバイル用URL上のrel=”canonical”タグは、必ずモバイル用ページのHTMLに追加する必要がある）
<url>
<loc>http://www.example.com/page-1/</loc>
<xhtml:link
rel="alternate"
media="only screen and (max-width: 640px)"
href="http://m.example.com/page-1" />
</url>