8

ユーザーが JavaScript を有効にしていない場合、どうするのが最善ですか? そのようなユーザーにコンテンツを配信するにはどうすればよいでしょうか? 検索エンジンがサイトを読みやすくする最善の方法は何ですか?

これを達成するための 2 つの方法を考えることができますが、どちらが優れているかはわかりません (または 3 番目のオプションが優れているかどうか)。

  1. meta-refresh タグを使用して、ユーザーを非 JavaScript バージョンのサイトにリダイレクトします。meta-refresh タグを noscript タグでラップして、javascript を使用している場合は無視されるようにします。
  2. body タグ内にある iframe タグに依存して、非 JavaScript バージョンのサイトを配信します。iframe タグを noscript タグでラップして、javascript を使用している場合は無視されるようにします。

また、これを行うための正しい方法または間違った方法の有名な例もいただければ幸いです。

---------- 質問への追加 -----------

これに対処するために私が過去に行ったことの例を次に示します: http://photocontest.highpoint.edu/

これを行うためのより良い方法がないことを確認したい。

4

7 に答える 7

4

あなたは優雅な劣化について話している.javascriptで動作するようにサイトを設計および作成し、その後、javascriptをオフにしてもサイトを動作させる. 最も簡単な方法は、HTML の「noscript」タグをページの上部近くに追加して、サイトが JavaScript を必要とするか、正しく動作しないことを示すメッセージを表示することです。SOはこれの完璧な例です。画面上部のボタンのほとんどは、JavaScript を介して実行されます。オフにすると、素敵な赤いバナーが表示され、ドロップダウンの js 効果がなくなります。

私はプログレッシブエンハンスメント開発を好みます。javascript / flash / css3などを使わずにサイトを完全に機能させ、ユーザーエクスペリエンスを向上させるために少しずつ強化します（まだnoscriptタグを含めます）. これにより、スクリーン リーダーや検索エンジンを使用している障害のあるユーザーであるかどうかに関係なく、完全に機能する読みやすい Web サイトが確保されると同時に、新しいブラウザーを使用するユーザーに優れたユーザー エクスペリエンスが提供されます。

結論: 動的に生成されたコンテンツ (たとえば、AJAX を介して生成されたページ要素) には、このコンテンツが標準リンクを介して利用可能でなければならない静的ページの代替が必要です。タブ付きコンテンツに JavaScript を使用している場合は、Web ページの残りの部分と一貫性のある方法ですべてのコンテンツを表示します。

例はhttp://www.bbc.co.uk/news/です。 JavaScript をオフにすると、コンテンツ、写真、リンクなどが書かれたページ全体が表示されます。等々。

私はいたずらをしてウィキペディアへのリンクを投稿します:

プログレッシブエンハンスメント

優雅な劣化

于 2011-03-21T12:51:07.020 に答える
1

アプリケーションが機能するためにjavascriptが必要な場合は、noscriptタグで丁寧なメッセージを表示する以外にできることはありません。

そうでなければ、あなたは逆に考えるべきです。

  1. JSなしでサイトを構築する
  2. 素晴らしいユーザーエクスペリエンスを提供し、それを完全に機能させる
  3. JSを追加して、UXをさらに機能的にします。JSを上に重ねます。

したがって、ユーザーがJSを持っていない場合でも、サイトはサイト状態のステップ2に戻ります。

クロールも。サイトがAJAXと多くのJSに依存している場合は、gogoleにそれを認識させることができます：http ：//code.google.com/web/ajaxcrawling/docs/getting-started.html

于 2011-03-21T12:51:33.340 に答える
1

「本格的な」Ajax (クライアント側のルーティングなど) を実行している場合は、次の手法が役立つ可能性があります。

  1. GET/"?" パラメータなしで URL を使用します (これにより、後で作業が楽になります)
  2. クライアント側のルーティングにはhttp://baseurl.com/#!/path/to/resourceを使用します
  3. http://baseurl.com/path/to/resourceで、サイトの非スクリプト HTML バージョンのレンダリングを実装します (HTML スナップショットは Google が呼ぶものです)。
  4. HTML スナップショットのコンテンツ全体を noscript タグでラップし、top.location.href 経由でサイトの完全版にリダイレクトします。
  5. http://baseurl.com/?_escaped_fragment=/path/to/resourceを処理します - 301 レスポンス経由で http://baseurl.com/path/to/resource にリダイレクトする必要があります
  6. GET リンクには a タグのみを使用し、POST/PUT/DELETE リンクにはフォームを使用します - 必要に応じてスタイルを完全に解除します

「適切な Ajax コードの書き方」を調べているときに見つけたリンクの素敵なサンプル コード:

<a href="/path/to/resource" onclick="Routing.navigate(&quot;/path/to/resource&quot;); return false;">Resource</a>

もちろん、これはかなり複雑なソリューションですが、SEO (検索エンジン以外のクローラーを含む) とアクセシビリティの両方を有効にする必要があります。問題は、ページのサーバー側とクライアント側をレンダリングできる必要があることです。

1 つの解決策は、さまざまなプラットフォームの実装が存在する口ひげのようなテンプレート フレームワークを使用することです。

  1. ページの動的部分には {{#pagelet}}/path/to/partial{{/pagelet}} のようなものを使用します - 例: {{#pagelet}}/image/{{image_id}}/preview{{/pagelet }}
  2. クライアント側のレンダリングでは、ページレットが実装され、Ajax を介してロードされたものに動的に置き換えられます (例: render )
  3. サーバー側のレンダリングでは、ページレットは直接レンダリングされます (ページレットをカールしてすぐにレンダリングするか、コードを非同期に記述できる場合は、クライアント側で行うのと同じように実行します: 一時的なスパンをに書き込みますすべてのページレットのフェッチを開始し、ページレットが到着すると一時的なスパンを置き換え、すべてのページレットがレンダリングされたらバッファーをフラッシュします。

これは、私が今まで見つけた中で最高の一般的なデザインです。アプリにディープリンクできます。検索エンジンにやさしく、適切に劣化するページを作成する必要があります。

PS: 上記の手法の利点の 1 つは、ページの Ajax レンダリングと "Web 1.0" レンダリングの両方が、ページレット全体の memcached キャッシュから利益を得ることができることです。

于 2011-10-24T22:48:25.750 に答える
1

別のオプションがあります。同じページをロードするだけで、noscript ユーザーでも機能するようにします (プログレッシブ エンハンスメント/グレースフル デグラデーション)。

簡単な例: ajax を使用してコンテンツを div にロード<a>し、新しいコンテンツを含むページ全体にリンクするタグを作成し (noscript 動作)、その<a>タグを jQuery でバインドしてクリックをインターセプトし、ajax でロードします (スクリプト動作)。

$('a.ajax').click(function(){
var anchor = $(this);
$('#content').load(anchor.attr('href') + ' #content');
return false;
});
于 2011-03-21T12:49:52.870 に答える
1

プログレッシブ エンハンスメントが最近のベスト プラクティスと見なされているかどうかは完全にはわかりませんが、私が個人的に好むアプローチです。この場合、JavaScript なしで動作するシステムに少なくとも十分な機能を提供するために、標準の Web 1.0 Web アプリ (JavaScript なし) のように機能するようにサーバー側コードを記述します。次に、この上に JavaScript 機能を重ねて、システムをよりユーザーフレンドリーにします。適切に行われれば、JavaScript を使用しないユーザーにとって有用な機能を少なくとも提供する Web アプリが完成するはずです。

関連するプロセスは Graceful Degradation として知られています。これは同様の方法で機能しますが、ユーザーが JavaScript を有効にしていて、そうでない場合の回避策を組み込んでいるという前提から始まります。ただし、これには欠点があります。何かを見落とすと、JavaScript を使用していないユーザーがフォールバックなしで放置される可能性があります。

検索ページのプログレッシブ エンハンスメントの例: 通常は検索結果の HTML ページを返すように検索ページを作成しますが、GET を介して設定できるフラグを追加し、設定すると代わりに XML または JSON を返します。検索ページに、クエリ文字列に追加されたフラグを使用して検索ページに AJAX 要求を実行し、ページのメイン コンテンツを AJAX 呼び出しの結果に置き換えるスクリプトを含めます。JavaScript ユーザーは AJAX の利点を享受できますが、JavaScript を使用していないユーザーでも機能する検索ページを取得できます。

http://en.wikipedia.org/wiki/Progressive_enhancement

于 2011-03-21T12:50:22.213 に答える
1

役立つかもしれない簡単なヒント: コマンドライン Web ブラウザーである lynx をインストールするだけで、Google や他の seo があなたのサイトをどのように見ているかをすぐに確認できます (視覚障害者も同様です)。これは非常に便利です。もちろん、コマンド ライン ウィンドウにはグラフィックはなく、javascript は無効になっています。

于 2011-03-21T13:16:49.140 に答える
0

JavaScript を使用せずにページをコーディングし、JavaScript が有効になっている場合は、JavaScript を使用して同様のページにユーザーをリダイレクトします。（プログレッシブエンハンスメントと同じ概念）

JavaScript を使用したリダイレクト

于 2013-12-30T08:14:57.017 に答える