web-dev-qa-db-ja.com

デスクトップページとモバイルページのリンク

私は非技術的な人間なので、モバイルスペースに参入することを希望しているため、可能であれば、ページに追加するためのアドバイスと特定のコードを求めたいと思います。

私のデスクトップサイトは、すべてのページが（機械翻訳とは対照的に）人間が翻訳した英語/スペイン語のバイリンガルです。例を見てみましょう：

  • www.example.com/new-york.html（英語）
  • www.example.com/nueva-york.html（スペイン語）

モバイル版は次のようになります：

  • m.example.com/new-york.html（英語）
  • m.example.com/nueva-york.html（スペイン語）

モバイルページはおそらくデスクトップページよりも少し小さくなりますが、同じファイル名と本質的に同じコンテンツを持ちます。

これは「同じURLアプローチ」と呼ばれると思いますが、それは正しいでしょうか？

現在、Googleが両方のサイトをクロールし、コンテンツの重複問題を回避するために、rel=alternate/rel=canonicalを使用して、デスクトップとモバイルのプラットフォーム間でページをリンクする必要があると言われました。各ページと言語に対して、AからBへ、およびBからAへの、ある種の双方向リンクが必要と思われます。

次の2つの点についてご意見をお寄せください。

  1. 私が今言ったことが正しく、そのように実装できる場合。

  2. それが正しい場合は、デスクトップページとモバイルページの両方の<head></head>タグ内に配置する正確なコードを教えてください。

mobilerel-canonicalrel-alternatedesktop
2
Daniel

  1. URLは異なるため、サブドメイン上にあるため、実際のセットアップは「同じURLアプローチ」ではなく、個別のURLです。 「同じURLアプローチ」は、モバイルコンテンツがデスクトップコンテンツとまったく同じURLで動的に提供される場合です。

  2. デスクトップページで、モバイルURLを指す代替タグを追加します。

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

また、モバイルページで、デスクトップページを指す正規タグを追加します。

<link rel="canonical" href="www.example.com/new-york.html" >

これらのタグは、ページソースコードの<head></head>タグ内に追加する必要があり、モバイルバージョンがあるすべてのページで使用する必要があります。

これらのタグは、ページのソースコード内ではなく、sitemap.xmlファイルでも定義できます。

詳細情報はこちらをご覧ください Building Smartphone-Optimized Website

また、多言語サイトの構造は理想的ではないことにも言及します。また、単にURLを使用するのではなく、www.example.com/en/やwww.example.com/es/などのサブフォルダー内に異なる言語のページを追加することをお勧めします。これにより、ユーザーはページの言語をより明確にすることができます。また、必要に応じて、Googleウェブマスターツールでさまざまなフォルダをさまざまなローカルにターゲット設定できます。

詳細はこちら： 多地域および多言語サイト

1
Max

これは、notと同じURLアプローチです。使用するデバイスに関係なく、コンテンツごとに1つのURLのみ（2つではなく、デスクトップ用とモバイルデバイス用）を持つことを意味します。通常、これは レスポンシブWebデザイン で実現されます。

この回答では、既に 翻訳間のリンク （alternate属性と共にhreflangリンクタイプを使用）を持っていると仮定しています。

ただし、実際には2つの質問があります。

  • モバイルページとデスクトップページをリンクする方法は？
  • 正規ページを指定する方法は？

デスクトップ↔モバイル

デスクトップページから対応するモバイルページにリンクするには、alternateリンクタイプを使用します。

media属性を指定して、どのユーザーエージェントに対してリンクが興味深いかを示すこともできます。

したがって、www.example.com/new-york.htmlには、次のlink要素を含めることができます。

<link href="http://m.example.com/new-york.html" rel="alternate" media="only screen and (max-width: 640px)"> 
<!-- instead of "only screen and (max-width: 640px)", use the criteria you want for devices that should visit the separate mobile page -->

また、モバイルからデスクトップへのリンクについても同じです（media属性なし）。

正規

ページのコンテンツが異なる場合（この例ではそうではありません）、ページの1つ（モバイルまたはデスクトップ）が正規であることを示す必要があります。
通常、デスクトップバリアントは標準ページとして選択されます。

したがって、m.example.com/new-york.htmlには、次のlink要素を含めることができます。

<link href="http://www.example.com/new-york.html" rel="canonical">

（www.example.com/new-york.html自体にこのlink要素を設定することもできます。）

また、同じlink値を持つ2つのhref要素を使用する代わりに、それらを組み合わせることができます。例：m.example.com/new-york.html：

<link href="http://www.example.com/new-york.html" rel="alternate canonical">
0
unor