web-dev-qa-db-ja.com

HTML静的サイトをよりSEOフレンドリーにします

下の画像に示されているように、私はウェブサイトをデザインしていますが、現在は基本的な構造にすぎません。このサイトは完全に静的であり、基本的にウェブサイトに6つのメインページがあります。ナビゲーションセクション、スライダー、フッターはすべてのページで同じです。 6ページから1ページがアイテムのリスト用になります（アイテムのサブページは15個まで）。詳細はすべてCONTENTセクションに読み込まれます。

enter image description here

ここで私の問題は、ナビゲーション、スライダー、フッターが一度読み込まれ、コンテンツがページに従って変更される場所など、どうすれば実現できるかということです。

AJAXを使用してコンテンツを読み込むことを考えたため、1ページのWebサイトになります。しかし、問題はSEOにあります。

それで、この両方をワンショットでどのように達成できますか？ナビゲーション、スライダー、フッターが1回読み込まれ、SEOも問題ない場合。

任意のヘルプがappriciatedされます。

seohtmlweb-developmentwebsite-designwebsite-features
3
IT ppl

あなたはこれを行うことができますが、私はあなたがあまりにも早くそれについて心配していると思います。ソフトウェアには次のような格言があります。最適化は進化を妨げます。本質的に、これは問題を複雑にすると変更が難しくなると言います。

そうは言っても、本当にしたい場合にできることがあります。コンテンツをページ上に保持し、AJAX経由でロードしないことが最善であることに同意します。

iframeはおそらく最も簡単です。上部と下部をiframeに配置し、各ページから単純に読み込むことができます。 iframeをシームレスに動作させるための作業があり、適切な場所でリンクを開きます。

代わりにAJAXを使用してヘッダーとフッターをロードすることを検討できますが、クローラーが内部リンクを表示できるように、ナビゲーションをインラインに保ちます。

resourcesキャッシュされるため、ヘッダーとフッターに大量のHTMLが含まれていない限り、パフォーマンスの違いは無視できるはずです。すべてのページのヘッダーとフッターで使用する画像やFlashオブジェクトは、キャッシュヘッダーが正しく正しく設定されていることを前提に、一度も読み込まれます。

2
Itai

優れたSEOページとAJAXで読み込まれたページの間の妥協の方法として、次のことができます。

メニュー内に、それぞれのhref属性と、できればクラス名として、おそらく各リンクがトリガーするajaxが必要とする何らかのインジケータを使用して、要素の標準セットを作成します

<a href="index.php?page=1" class="nav">Nav 1</a>
<a href="index.php?page=2" class="nav">Nav 2</a>

.nav要素をクリックすると、次の2つのことが行われます。

  • AJAXリクエストの送信
  • jQuery event.preventDefault（）関数のトリガー

AJAXリクエストは明らかです-コンテンツのロードは指定した場所ですが、デフォルトのブラウザの動作-要素のhref属性で指定されたページへのリダイレクト-はキャンセルされ、同じページにとどまります。

JavaScriptがオフになっているブラウザーの場合、Webクローラーと訪問者は何らかの方法で直接リンク（ "index.php？page = 1"）を使用してページにアクセスします。index.phpファイルは、使用しているソースからデータの標準検索を実行します。

より良い方法があると確信していますが、これは私が使用したものであり、今のところうまく機能しています。

単純なWebサイトなので、必ずしも必要ではないかもしれませんが、サイトの閲覧履歴（AJAXリクエストを使用してナビゲート）を追跡することは、意識することです。私は一目をお勧めします： https://stackoverflow.com/questions/1457/modify-address-bar-url-in-ajax-app-to-match-current-state

0
Maciej Gurban