web-dev-qa-db-ja.com

外部HTMLファイルを別のHTMLファイルに読み込む-SEOに影響はありますか？

約50ページの最初のWebプロジェクトがあります。これまでに5ページのWebサイトを作成したばかりです。ナビゲーションリンクを追加すると、コードをすばやく入力し、5つのHTMLファイルすべてにコピーして貼り付けるだけです。

どこかでナビゲーションリンクを更新できるように、「ベストプラクティス」のような方法を探しています。すべてのページが更新されます。

StackOverflowでこのソリューションを見ました：

ホームページコード：

<div id="nav-container">

</div>

<script>
$(function(){
$("#nav-container").load("navigation-links.html");
});

navigation-links.html file：

<div class="nav-btn1">Link</div>
<div class="nav-btn2">Link</div>
<div class="nav-btn3">Link</div>
<div class="nav-btn4">Link</div>

しかし、htmlリンクは実際のページ内にないため、これはSEOの観点からマイナスの影響を与えるでしょうか？

もしそうなら、私はこれを行うべき別の方法がありますか？

seohtmljavascript
1
SteveyG

JSインクルードにはいくつかの理由で問題があります-検索エンジンはそれらを常に適切に処理するわけではありません。スクリーンリーダーなどの代替技術を使用して訪問者がアクセスできないことがよくあります。

1つのオプションはCMSに移行することです。これにより、サイト全体のすべてのコンポーネントを1か所で管理し、すべてのページで更新することができます。

静的HTMLファイルを保持できるようにする簡単なオプションは、サーバーサイドインクルード（SSI）を使用することです。ホストが許可されているかどうかを確認する必要があります。一部のホストはセキュリティ上の理由でそれらを無効にしますが、自分のファイルのみを含める限り、大きなリスクではありません。

nav.htmlのようなサイト全体のナビゲーションを保持するファイルを1つ作成します。

<a href="/">Home</a>
<a href="/page1.html">Page 1</a>
<a href="/page2.html">Page 2</a>

など、そしてナビゲーションを表示したいすべての静的ファイルに、そのファイルを含めます：

<!--#include file="nav.html"-->

フッター、サイドバーなどでも同じことができるため、単一のファイルで更新するだけで、他のすべてのファイルに反映されます。

3
WebElaine