/webmasters/community?hl=ja
/webmasters/community?hl=ja
2012/06/12
元の投稿者
Kiyotaka - Google 社員

Q&A: Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法

ウェブマスター ヘルプフォーラムをご利用いただきありがとうございます。

先ほど、ウェブマスター セントラル ブログに「Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法」という記事を掲載しました。
http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.html

Google 検索と相性の良いスマートフォンサイトの構築方法というトピックは、ウェブマスターの皆さまにとって関心の高い内容かと思いますので、「スマートフォン版 Googlebot-Mobile の導入について」の際と同様に、こちらのスレッドで質問を募集し、お答えしたいと思います。

皆様からの質問をお待ちしています!

【質問募集期間】2011 年 6 月 12 日~ 2012 年 6 月 22 日
* 頂いた質問に対して重複やトピックを整理して、まとめてお答えさせていただけたらと思っています。
* すべての質問にお答えできない場合もございますのであらかじめご了承ください。


コミュニティには、検証されていない、または最新ではないコンテンツが掲載されている可能性があります。詳細
すべての返信(14 件)
mkoba42jpn
2012/06/12
mkoba42jpn
スマートフォンの構築方法につきまして、指標をご提示いただきありがとうございます。

デスクトップ版とモバイル版で別のサイトを構築しているケース
について、2点ご質問させてください。

■1点目
デスクトップ版のURLとモバイル版のURLに対して、
metaタグの指定をするのは、TOPページとTOPページ以外のページについても
同様に設定するべきでしょうか?

■2点目
デスクトップ版のページ内容とモバイル版のページ内容が異なる場合でも、
(モバイル用に最適化しているため、趣旨は同じだが、文言レベルで相違がある)
当設定をしたほうがよろしいでしょうか?

ご回答いただけますと幸いです。

よろしくお願いいたします。


suzukik.
2012/06/12
suzukik.
Googleの者ではありませんが気になったのでコメントします。

 
metaタグの指定をするのは

metaタグを指定するとはどこにも書かれていません。

link要素のrel="canonical"とrel="alternate"のことでしょうか?

もしそうであれば対応するページにすべて記述します。
トップページだけでなく個別ページについても同様です。

デスクトップ向けトップページ <=> モバイル向けトップページ
デスクトップ向け個別ページ1  <=> モバイル向け個別ページ1
デスクトップ向け個別ページ2  <=> モバイル向け個別ページ2

ドキュメントに書いてありますよ。
Lamb
2012/06/12
Lamb
興味深い記事を掲載していただきありがとうございます。

記事中にレスポンシブウェブデザインに関して言及がありましたが、
レスポンシブウェブデザインを採用した場合のGoogleAdsenceの扱いについて1点だけ質問させてください。

ウィンドウの横幅に応じて、GoogleAdsenceを操作すること(表示位置の変動、表示サイズの変動、表示/非表示の変動)は、GoogleAdsenceのポリシーに違反となるのでしょうか?

ご回答いただけますと幸いです。
よろしくおねがいします。


マサさん
2012/06/12
マサさん
Kyotaroさん
いつも様々な情報をありがとうございます。
質問させて頂きます。

質問:従来型携帯電話向けのアノテーションとの併用について 

スマートフォン向けページがあることを示すアノテーション

  <link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1" >

ですが、ヘルプにあるような従来型携帯電話向けのアノテーション(Mobile Link Discovery)

  <link rel="alternate" media="handheld" href="alternate_page.htm" /> 

との併用は問題は無いでしょか?
その場合、スマートフォン向けページから従来型携帯電話向けページに対しても Mobile Link Discovery 指定した方がより良いですか?
デスクトップ向け、スマートフォン向け、従来型携帯電話向けのそれぞれが別々のURLで作られている場合、それぞれの関係をもっとも正確に伝えるにはどう指定すればよいか教えて下さい。
suzukik.
2012/06/18
suzukik.
Kyotaroさま

こんにちは。いつもサポートありがとうございます。

僕から4つ質問があります。


#1
3つめのオプションのデスクトップとモバイルで別URLを使う場合以下の3つを選択できます。
A. 同一ドメインのサブディレクトリ e.g. www.example.com vs. www.example.com/m/
B. サブドメイン e.g. www.example.com vs. m.example.com
C. 異なるドメイン www.example.com vs. www.m-example.com

Google側の処理としてこれらの間に差異はありますか。もしあるとしたらGoogleにとって都合がいいのはどれですか?(サイト運営者側の管理面、コスト面は考慮しなくてよいです)


#2
別URL場合、アノテーションとしてrel=”alternate”要素を使います。
これはサイトマップでの記述も可能ですが、HTML内でのrel=”alternate”要素と併用しても問題はありませんか。


#3
Googleが推奨するレスポンシブ・ウェブデザインは、基本的にモバイルであってもデスクトップと同じHTMLファイルや画像を読み込みます。3G回線でユーザーがモバイルアクセスしている場合、ページの読み込みを遅くすることもありえます。
現在Googleは、微々たるものですがページの表示速度もランキングのシグナルとして採用しています(インターナショナルですでに展開済みと聞きました)。モバイル向けのサイトだとしてもページの表示速度も加味されているのでしょうか?(表示速度は無視できるほどに小さなシグナルであることは理解しています)


#4
ドキュメントの日本語化は計画していますか。僕自身は不要ですが、Developersサイトでの解説が日本語でないと適切に構成できないウェブマスターが少なからずいるのではないでしょうか。英語が苦手な人に「このドキュメントを参照してください」というのは不憫を感じそうです。

べしみ
2012/06/20
べしみ
Kyotaro様、こんにちわ。
確認のような質問があります。

1. HTTP通信中に Vary: User-Agent を出す順番にルールなどはありますか?
Developersでは以下の順番(Content-Type: text/htmlの直下)ですが、やり方や環境によってはこの順番で出ない場合もあると思います。

 HTTP/1.1 200 OK
 Content-Type: text/html
 Vary: User-Agent
 Content-Length: 5710
 (...残りのHTTPレスポンスヘッダー...)

2. デバイス毎に最適化したHTMLがある場合、 それぞれにVary HTTP ヘッダを設定したほうがよいのでしょうか?
同じURLでユーザーエージェントによって読み込むHTMLを変えている場合や、別々のURLにリダイレクトしている場合など。

 Googlebot
  → デスクトップ版 /index.html Vary: User-Agent

 Googlebot-Mobile(従来型携帯電話)
  → 従来型携帯電話版 /mobile/index.html Vary: User-Agent

 Googlebot-Mobile(スマートフォン)
  → スマートフォン版 /smart/index.html Vary: User-Agent


3. 出来れば図を使って、今回件を絡めた最適な構築方法の一例を教えて頂きたいです。

・Vary: User-Agent
・<link rel="alternate" media="handheld" href="alternate_page.html" >
・<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1" >
・<link rel="canonical" href="http://www.example.com/page-1" >

あうらゆうま
2012/06/20
あうらゆうま
べしみさん

横から失礼します。
HTTPヘッダは順序が影響する…というような話を聞いたことがないので、どんな順番でも良いんじゃないでしょうか。多分、並列の仕様ですよね。

フィールドは任意の順番で配置できます。ヘッダー フィールドによっては、要求ヘッダーと応答ヘッダーの両方に使われるものがあります。 

ヘッダはどのような順序で配置されていても構いませんし、同じヘッダが2回現れても構いません(これは普通ではありませんけれど)。

2012/06/25
元の投稿者
Kiyotaka - Google 社員
みなさま、たくさんの質問をお寄せいただきありがとうございました。
回答は後日掲載しますので、しばらくお待ちください。
2012/07/20
元の投稿者
Kiyotaka - Google 社員
こんにちは。Google 社員の Kyotaro です。

みなさま、こちらの回答ですが、現在準備中ですので、今しばらくお待ちいただけたら幸いです。
別スレッドで「期間外の質問ですが」という形で mighty frogger さんから投稿いただいていたご質問も、今回の Q&A の中でお答えさせていただきます。
遅くなっていて申し訳ありませんが、少しでもみなさまのお役に立つ情報を用意できればと思っておりますので、もうしばらくお待ちください。

よろしくお願いします。
2012/07/27
元の投稿者
Kiyotaka - Google 社員
ウェブマスター ヘルプフォーラムをご利用のみなさまへ

こんにちは。Google 社員の Kyotaro です。
お待たせしました。ブログ記事Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法」について、みなさまからお寄せいただいた質問への回答を掲載させていただきます。改めましてご質問ありがとうございました。

あとで参照される方にもお役に立つよう、一部お寄せいただいた質問をいくつかのトピックにまとめて編集、回答させていただています。
まずは一番質問の多かった アノテーションの設定 についてまとめて回答させていただきます。


【ご質問】
デスクトップ版のURLとモバイル版のURLに対して、metaタグの指定をするのは、TOPページとTOPページ以外のページについても同様に設定するべきでしょうか?

【回答】
今回のお話の中では、meta tag を設定することは特にご紹介しておりません。suzukik さんからのコメントにありましたように、ご質問が「デスクトップ用のページとモバイル用のページがそれぞれ異なる URL の場合、トップページ以外のページについてもアノテーションの設定が必要か」というものでしたら、同一の目的、内容のページであればそれらのページについてすべて、アノテーションの設定をお勧めします。
具体的な設定については以下のヘルプ記事などもご覧ください。
http://support.google.com/webmasters/bin/answer.py?hl=ja&answer=139394


【ご質問】
デスクトップ版のページ内容とモバイル版のページ内容が異なる場合でも、
(モバイル用に最適化しているため、趣旨は同じだが、文言レベルで相違がある)
当設定(回答側追記:アノテーションの設定)をしたほうがよろしいでしょうか?

【回答】
ケースにより程度差はありますが、同一の目的で作られ、同一の内容を含んだページであれば設定をお勧めします。


【ご質問】
別URL(回答側追記:でページを設ける)場合、アノテーションとしてrel=”alternate”要素を使います。
これはサイトマップでの記述も可能ですが、HTML内でのrel=”alternate”要素と併用しても問題はありませんか。

【回答】
特に問題ありません。ただし、サイトマップと HTML 内でのアノテーションの設定が一致しているよう確認してください。


【ご質問】
HTTP通信中に Vary: User-Agent を出す順番にルールなどはありますか?

【回答】
特に順番にルールはありません。


【ご質問】
スマートフォン向けページがあることを示すアノテーション

  <link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1" >

ですが、ヘルプにあるような従来型携帯電話向けのアノテーション(Mobile Link Discovery)

  <link rel="alternate" media="handheld" href="alternate_page.htm" />

との併用は問題は無いでしょか?
その場合、スマートフォン向けページから従来型携帯電話向けページに対しても Mobile Link Discovery 指定した方がより良いですか?
デスクトップ向け、スマートフォン向け、従来型携帯電話向けのそれぞれが別々のURLで作られている場合、それぞれの関係をもっとも正確に伝えるにはどう指定すればよいか教えて下さい。


【回答】
こちらの件ですが、ご質問を受けまして Google Developers 上に情報を追加しました。
https://developers.google.com/webmasters/smartphone-sites/feature-phones

Google Developers 上の情報 ”Building Smartphone-Optimized Websites” は英語で掲載しておりますが、各言語の Google 検索共通の情報となっております。このスレッド上では日本語にてポイントをご紹介したいと思います。

”出来れば図を使って、今回の件を絡めた最適な構築方法の一例を教えて頂きたいです。”というご質問についても、まずはこちらで回答とさせていただきます。またリクエストやご提案がありましたらお知らせください。)
 

2012/07/27
元の投稿者
Kiyotaka - Google 社員

スマートフォンに最適化されたウェブサイトの構築方法について(抄訳)

https://developers.google.com/webmasters/smartphone-sites/feature-phones

* こちらの情報は 2012 年 7 月 26 日現在の抄訳となっています。最新の情報の確認は元ページで行ってください。



スマートフォン、フィーチャーフォン(従来型携帯電話)での閲覧
Google ではスマートフォン向けウェブサイトを提供する際には、可能であればレスポンシブ・ウェブデザインでのページの提供をお勧めしています。 しかしながら、フィーチャーフォンでは CSS media queries に対応していないことが多いため、フィーチャーフォン向けにコンテンツを提供するウェブマスターは動的な配信(Dynamic Serving)かフィーチャーフォン向けに別 URL でコンテンツを提供する必要がある場合があります。


動的な配信(Dynamic Serving)
スマートフォンなど他の端末用ページと同じ URL で、フィーチャーフォンに最適化したコンテンツを動的に提供する方法です。この場合、 "Vary: User-Agent" HTTP response header を記載する必要があります。またユーザー エージェントによる振り分け時に例えばクローキングとなってしまわないように設定の確認も必ずするようにしてください。


別 URL での提供
デスクトップ、スマートフォン、フィーチャーフォン向けに異なる URL でコンテンツを提供する手法です。この手法では、アノテーションの設定を行います。以下では 3 つのケースに分けてそれぞれの設定についてご紹介します。

1. それぞれの端末ごとに URL を持つ場合

(例)

こうした環境の場合、アルゴリズムにページ間の関係を適切に伝えるのを手助けするため、以下のアノテーションを追記してください。

(推奨するアノテーションの設定方法)




2. デスクトップ向けとその他モバイル端末向けで URL が異なる場合

(例)

(推奨するアノテーションの設定方法)

  • http://www.example.com/page-1 (デスクトップユーザー向け)

    <link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1" />
    <link rel="alternate" media="handheld" href="http://m.example.com/page-1" />
  • http://m.example.com/page-1 (スマートフォン、フィーチャーフォンを含めたモバイル端末ユーザー向け)

    <link rel="canonical" href="http://www.example.com/page-1" />

    *この rel="canonical" 設定は、スマートフォン向けページ、フィーチャーフォン向けページのどちらであれ、各ページに記載するようにしてください。
    *また、このケースでは、 HTTP Vary: User-Agent header の設定もする必要があります。この情報が、キャッシュサービスや Googlebot に対して、ユーザー エージェントによって表示するコンテンツが異なることがあると伝えるシグナルとなりますし、Googlbot-Mobile がクロールする際のシグナルともなります。


3. デスクトップ向けとフィーチャーフォン向けで URL が異なる場合
デスクトップ向けとスマートフォン向けにはレスポンシブ・ウェブデザインで対応し、フィーチャーフォン向けに異なる URL を用意するケースです。


(例)

(推奨するアノテーションの設定方法)

補足:リダイレクトと Vary HTTP header について

もし、デスクトップ向けページを訪れたモバイル端末のユーザーをモバイル端末向けページに自動でリダイレクトさせる場合は(あるいはその逆にデスクトップユーザーがモバイル端末向けページを訪れた際にデスクトップ向けページにリダイレクトさせる場合も)
こちらのページ(英語)をご確認の上 Vary HTTP header を記載してください。


サイトマップについて

フィーチャーフォン向けサイトマップ、スマートフォン向け alternate URL 用サイトマップの利用をお勧めします。


* Google Developers 上に掲載している情報の日本語訳についてもご質問を頂きましたが、まずは今回のような形で必要に応じてフォーラム上で抄訳、解説などをさせていただけたらと思っています。
 


2012/07/27
元の投稿者
Kiyotaka - Google 社員
さらに上記情報に関連するご質問となります。

【ご質問】 
デスクトップとモバイルで別URLを使う場合以下の3つを選択できます。
A. 同一ドメインのサブディレクトリ e.g. www.example.com vs. www.example.com/m/
B. サブドメイン e.g. www.example.com vs. m.example.com
C. 異なるドメイン www.example.com vs. www.m-example.com

Google側の処理としてこれらの間に差異はありますか。もしあるとしたらGoogleにとって都合がいいのはどれですか?(サイト運営者側の管理面、コスト面は考慮しなくてよいです)

【回答】 
特に大きな違いはありません。みなさまのサイト運営の状況に合わせて選択されてください。その上で強いて言うならば、同じドメイン上からモバイル向けコンテンツを提供していることは、モバイル向けコンテンツとデスクトップ向けコンテンツが同じウェブマスターによって所有・運営されていることを Google 側に伝えるシグナルの 1 つとなりますので、A か B をお勧めします。

まずは、アノテーションの設定に関連する質問について回答させていただきました。お役に立ちましたら幸いです。残りのご質問への回答も近日中に投稿させていただきます。よろしくお願いいたします。


yamadatomonori
2012/07/27
yamadatomonori
こちらでお尋ねして良いかわからなかったのですが、質問させてください。

私のサイトは「1. それぞれの端末ごとに URL を持つ場合」に該当するため、
デスクトップユーザー向けページに

<link rel="alternate" media="only screen and (max-width: 640px)" href="スマートフォンユーザー向けURL" />
<link rel="alternate" media="handheld" href="フィーチャーフォンユーザー向けURL" /> 

を設定したところ、
スマートフォンでウェブの(アプリでなく)グーグルリーダーから私のサイトに遷移すると、
一部のユーザーでフィーチャーフォン向けのURLにリダイレクトする現象が発生しています。
ユーザーへのヒアリングの結果、グーグルリーダーの設定で「リンク先のウェブページをケータイ用に変換します。」にチェックが入っていると、
この現象が再現されるようでした。

この状況から見て「リンク先のウェブページをケータイ用に変換します。」は
 media="handheld"
の方のhrefにリダイレクトさせるオプションであると推測しているのですが、
グーグルリーダーにmedia="only screen and (max-width: 640px)"のhrefがスマートフォンのURLであると認識させる方法はございますでしょうか?

もし他にこの質問にふさわしいフォーラムなどございましたら、
お手数ですがご紹介ください。

よろしくお願いいたします。


2012/08/08
元の投稿者
Kiyotaka - Google 社員
Google 社員の Kyotaro です。ウェブマスター ヘルプフォーラムをご利用いただきありがとうございます。 
続きまして、レスポンシブ・ウェブデザインについて、具体的なケース対応に関するご質問への回答です。


【ご質問】
記事中にレスポンシブ・ウェブデザインに関して言及がありましたが、レスポンシブ・ウェブデザインを採用した場合の Google AdSence の扱いについて1点だけ質問させてください。
ウィンドウの横幅に応じて、Google AdSence を操作すること(表示位置の変動、表示サイズの変動、表示/非表示の変動)は、Google AdSence のポリシーに違反となるのでしょうか?

【回答】
広告コードの変更につきましては、Google のプログラム ポリシーに記載されているとおり、いかなる理由でもお客様が広告の動作および AdSense コードを変更することは許可しておりません。AdSense アカウント ページで生成された広告コードは、表示されているとおりにサイトのソース コードに貼り付ける必要があります。 こちらについて、追加で質問がある方は、Gogole AdSense 公式フォーラムで投稿をお願いします。



【ご質問】
Google が推奨するレスポンシブ・ウェブデザインは、基本的にモバイルであってもデスクトップと同じHTMLファイルや画像を読み込みます。3G 回線でユーザーがモバイルアクセスしている場合、ページの読み込みを遅くすることもありえます。
現在Googleは、微々たるものですがページの表示速度もランキングのシグナルとして採用しています(インターナショナルですでに展開済みと聞きました)。モバイル向けのサイトだとしてもページの表示速度も加味されているのでしょうか?(表示速度は無視できるほどに小さなシグナルであることは理解しています)

【回答】
ランキングの詳細については申し訳ありませんが、お答えいたしかねます。ランキングに採用されているかどうか、ということから離れて一般論で言うならば、表示速度が速ければ速いほどそれはユーザーの利便性を高めることになるとになると Google は考えています。
また、javascript 等を用いて、デバイスごとに異なるサイズの画像を使用する方法もありますので、そのようなテクニックを使用する際には、こちらのページ(英語)もご覧ください。



【ご質問】
2 デバイス毎に最適化したHTMLがある場合、 それぞれに Vary HTTP ヘッダを設定したほうがよいのでしょうか?
同じURLでユーザーエージェントによって読み込むHTMLを変えている場合や、別々のURLにリダイレクトしている場合など。

 Googlebot
  → デスクトップ版 /index.html Vary: User-Agent

 Googlebot-Mobile (従来型携帯電話)
  → 従来型携帯電話版 /mobile/index.html Vary: User-Agent

 Googlebot-Mobile (スマートフォン)
  → スマートフォン版 /smart/index.html Vary: User-Agent

【回答】
上記抄訳でのご案内にありますとおり、Vary HTTP ヘッダーにつきましては基本的にユーザー エージェントごとにページの振り分け(動的な配信)が発生する際に設定が必要となります。もしご質問で想定された具体的なケースがありましたら、追加でお知らせください。



【ご質問】
PC サイトとスマホサイトでURLが異なる場合の
canonical と alternate の指定 URL について質問です。

1.PC サイトでリストのソート URL を canonical で正規化している場合
 スマホサイトから PC サイトへ向けて正確に対となるページを canonical 指定すると
 canonical のチェーンが発生します。

 例
 sp.sample.com/list/sort/
 ↓canonical
 pc.sample.com/list/sort/
 ↓canonical
 pc.sample.com/list/

 この場合、チェーンが発生しないよう
 最終的な canonoical 先 URL をスマホ側に指定するべきでしょうか。



2.pc 側に rel="alternate" を設定する場合は
 正確に対となる URL を指定したほうが良いでしょうか。

 以下のようにソート条件を絞り込む前のスマホ URL を
 指定するとなにか問題ありますでしょうか。

 例
 
pc.sample.com/list/sort/
 ↓alternate
 
sp.sample.com/list/


【回答】
1. については、現在 RFC の中で 規定されていませんので、こうした rel=”canonical” 指定をおこなうと意図したようにうまく機能しない可能性があります。社内のエンジニアにこのような声があったことは報告させていただきました。
2. については、対となるスマートフォン向け URL がある場合は当然それを rel=”alternate” 指定することをお勧めしますが、もし正確に対となる URL がない場合は、rel=”canonical” の設定で許容される程度の違いであれば、rel="alternate" 設定を利用しても特に問題ありません。



以上、みなさまからの質問に回答させていただきました。一部お答えをまとめさせていただいたり、お答えできていないものもあるかと思いますがご了承ください。

少しでもお役に立ちましたら幸いです。
 
この返信は役に立ちましたか?
改善できる点がありましたらお聞かせください。
 
この質問はロックされているため、返信は無効になりました。不明な点については、ヘルプ コミュニティで質問してみてください

バッジ

一部のコミュニティ メンバーには、Google の社員やパートナーであること、またはコミュニティへの参加度を示すバッジが表示されます。

 
エキスパート - Google 社員 — ガイド役やコミュニティ管理者である Google 社員
 
エキスパート - コミュニティ スペシャリスト — 専門知識を共有する Google のパートナー
 
エキスパート - ゴールド — 多くの知識を持ち、積極的にフォーラムに参加している信頼の置けるメンバー
 
エキスパート - プラチナ — ユーザーを助けるだけでなく、メンターとしての活動やコンテンツの作成などを通じてコミュニティに貢献している経験豊富なメンバー
 
エキスパート - 元トップレベル ユーザー — 現在は活動していないが、過去に大きな貢献が認められていた元メンバー
 
エキスパート - シルバー — プロダクトに関する知識を習得中の新規メンバー
コミュニティには、検証されていない、または最新ではないコンテンツが掲載されている可能性があります。詳細

レベル

メンバーのレベルは、そのユーザーのフォーラムへの参加状況を示します。レベルが高いほど、参加が多いことを意味します。どのユーザーもレベル 1 からスタートし、最高はレベル 10 です。次のような行為がフォーラムでのレベルアップにつながります。

  • 回答を投稿する。
  • 回答がベストアンサーに選ばれる。
  • 自分の投稿が役に立ったと評価される。
  • 投稿を評価する(役に立ったかどうか)。
  • トピックまたは投稿を適切に不正行為とマークする。

投稿が不正行為と報告されて削除されると、レベルアップは遅くなります。

フォーラムでプロフィールを表示しますか?

このメンバーのプロフィールを表示するには、現在のヘルプページから移動する必要があります。

フォーラムで不正行為を報告

これは Google プロダクト フォーラムのコメントです。不正行為を報告するには、現在のヘルプページから移動する必要があります。

フォーラムで返信

これは Google プロダクト フォーラムのコメントです。返信するには、現在のヘルプページから移動する必要があります。