web-dev-qa-db-ja.com

同じドメイン内のデスクトップ用とモバイル用の1つのWebサイト

2つのWebサイトがあり、1つはデスクトップに、もう1つはモバイルとタブレットに提供されています。

ユーザーをJSスクリプトでリダイレクトします。 Googleでは、リダイレクトは良い習慣ではないことを知っています。レスポンシブデザイン以外の最適な方法は何ですか？メインサイトはHypeに基づいて構築されており、アニメーションに満ちているため、1つのレスポンシブサイトだけにすることはできません。

seoredirectsmobile
3
stathisg

これは、適応型Web開発と呼ばれます。ユーザーエージェントを検出し、デバイスに基づいて異なるマークアップを提供する必要があります。

PHPでは、$ _ SERVER ['HTTP_USER_AGENT']を使用できます。

次のことをGoogleに知らせるために、このコードを含める必要があります。

<?php
Header('Vary: User-Agent');
?>

詳細は次のとおりです。 https://developers.google.com/webmasters/mobile-sites/mobile-seo/dynamic-serving

または、サブドメインでサイトのモバイルバージョンを実行することもできます

デスクトップページ（ 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">
4
NickWebman

メインサイトはHypeに基づいて構築されており、アニメーションに満ちているため、1つのレスポンシブサイトだけにすることはできません。

それはまったく真実ではありません。

Hypeにはレスポンシブデザイン機能があるため、アニメーションを更新して、同じWebサイトの同じページ内で配信しながら、デスクトップで一方向に、モバイルで一方向に実行することができます。誇大広告自体は、文字通りレスポンシブデザインツールです。それが最善のアプローチです。

しかし、それをしたくない場合は、各ページをモバイル用に設定し、デスクトップを検出してまったく別のページにリダイレクトする代わりに、デスクトップを検出し、現在のページのコンテンツを誇大広告に置き換えるようにJavaScriptを書き換えます同じURLの同じページ内のアニメーション。

理解しておくべき重要なことは、URLがページであることです。 1つのページ、1つのURL、Googleのデータベースの1つのエントリ、すべてのブラウザの1つのブックマーク。URLは変更されず、インターネットから消えることはありません。これが、文字通りWorldWideWebのアーキテクチャの仕組みです。サイトが閉鎖され、コンテンツが削除される場合がありますが、少なくともサイトが閉鎖されコンテンツが削除されることを読者に通知して、作成するすべてのURLがそこにあるはずです。

したがって、基本的に、サイトマップをリストに記述することは、Webドキュメントを作成する際の最初で最も重要なタスクです。

/about
/bar
/foo
/privacy
/products
/terms

…そして、あなたはこれに多くの時間と努力を費やします。なぜならそれらのURLは、一度作成すれば決して消えないからです。 （後でそれらを解除することもできますが、Googleおよび読者のブックマークやその他の場所から削除することはできません。）

次に、約約のものを/ aboutに配置し、すべてのバーのものを/ barなどに配置します。これは、最も小さなモバイルから最大のデスクトップまたはテレビまで、すべての画面で機能する単一列の方法です。

その後、レスポンシブデザインテクニックを使用して、大画面向けにWebサイトを強化します。主に、単一の列を2列または3列にリフローし、デスクトップ用の大きな背景を配置しますが、これには大画面のみが表示されるHypeアニメーションなども含まれます。ただし、URLを混乱させないでください。すべての読者はあなたのaboutページを/ aboutで見るでしょうが、MacBook Proと比較するとiPhone 5では異なって見えます。デスクトップを送信するページ「/ about2」がある場合、それはあらゆる点でまったく異なるページです。グーグルはそのページを見ることさえないかもしれないが、もしそうなら、彼らはそれを別のページと見なすだろう。 URLは、あるページと他のページを区別できるようにする一意の識別子です。 1ページと思われるものを2つのURLに分割すると、2ページになります。場合によってはこれを回避する複雑な方法がありますが、完璧ではなく、正しい方法で行うよりも複雑です。

レスポンシブデザインを初めて使用する場合は、 Skeleton をご覧ください。これは、約10分でモバイルサイトをレスポンシブWebサイトに変えることができる定型CSSです。ページ内の任意の要素をグリッドに簡単に割り当てることができ、画面が小さくなるとそのグリッドが崩れます。

レスポンシブデザインはなくなりません。実際には、より敏感になる必要があります。ウォッチは独自の4Gを取得します。ロゴを背景として、2つまたは3つの重要なリンクを持つユーザーを見るために、ページの最小限のビューを表示することをお勧めします。 Webサイトがレスポンシブである場合、30〜60分のCSSコーディングです。サポートしたい4KTVと5K iMacがあります。つまり、いくつかの本当に高解像度の画像を生成し、30〜60分のCSSコーディングを行います。レスポンシブサイトは、CSSのすべての難しい処理を簡単に実行します。

0
Simon White