外部から読み込んだhtmlに、更に外部htmlを読み込みたい。

Question

トップページ（index.html)に、外部html(201～223.html)を読み込んで表示しています。
外部html(201～223.html)に、料金表（room-type/service-room.html、room-type/economy-room.html等、全部で7タイプ）を表示していたのですが、単独では表示出来ていたのですが、外部から読み込むようにすると、表示されなくなってしまいました。

料金表の読み込みは、以下のようなプログラムです。

$(function(){
    $.ajaxSetup({cache:false});
    $("#service-room").load("ホームページのURL/room-type/service-room.html");
    $("#economy-room").load("ホームページのURL/room-type/economy-room.html");
    $("#standard-room").load("ホームページのURL/room-type/standard-room.html");
    $("#superior-room").load("ホームページのURL/room-type/superior-room.html");
    $("#delux-room").load("ホームページのURL/room-type/delux-room.html");
    $("#sweet-room").load("ホームページのURL/room-type/sweet-room.html");
    $("#open-air-sweet-room").load("ホームページのURL/room-type/open-air-sweet-room.html");
});

トップページに、201～223.htmlを表示するのは、全部書くと長いので一部ですが、以下のプログラムです。

var all_link=new Array(),
	links = $('.room-list').find('li'),

	for(var i=0;i<links.length;i++){
	all_link[i]='ホームページのURL/room/room'+(i+201)+'.html';
	box_load.append('<li class="load_'+i+'"></li>');
	$('.load_'+i).load(all_link[i]);
}

アドバイスありがとうございます。質問修正します。
トップページのhtmlは以下のようになっております。

<ul class="room-list">
<li><img src="images/room201_02_s.jpg" alt="201"><span>201</span></li>
		<li><img src="images/room202_01_s.jpg" alt="202"><span>202</span></a></li>
		<li><img src="images/room203_01_s.jpg" alt="203"><span>203</span></a></li>
		<li><img src="images/room204_01_s.jpg" alt="204"><span>204</span></a></li>
		<li><img src="images/room205_01_s.jpg" alt="205"><span>205</span></a></li>
		<li><img src="images/room206_01_s.jpg" alt="206"><span>206</span></a></li>
		<li><img src="images/room207_01_s.jpg" alt="207"><span>207</span></a></li>
		<li><img src="images/room208_01_s.jpg" alt="208"><span>208</span></a></li>
		<li><img src="images/room209_01_s.jpg" alt="209"><span>209</span></a></li>
		<li><img src="images/room210_01_s.jpg" alt="210"><span>210</span></a></li>
		<li><img src="images/room211_01_s.jpg" alt="211"><span>211</span></a></li>
		<li><img src="images/room212_01_s.jpg" alt="212"><span>212</span></a></li>
		<li><img src="images/room213_01_s.jpg" alt="213"><span>213</span></a></li>
		<li><img src="images/room214_01_s.jpg" alt="214"><span>214</span></a></li>
		<li><img src="images/room215_01_s.jpg" alt="215"><span>215</span></a></li>
		<li><img src="images/room216_02_s.jpg" alt="216"><span>216</span></a></li>
		<li><img src="images/room217_01_s.jpg" alt="217"><span>217</span></a></li>
		<li><img src="images/room218_01_s.jpg" alt="218"><span>218</span></a></li>
		<li><img src="images/room219_01_s.jpg" alt="219"><span>219</span></a></li>
		<li><img src="images/room220_01_s.jpg" alt="220"><span>220</span></a></li>
		<li><img src="images/room221_02_s.jpg" alt="221"><span>221</span></a></li>
		<li><img src="images/room222_01_s.jpg" alt="222"><span>222</span></a></li>
		<li><img src="images/room223_01_s.jpg" alt="223"><span>223</span></a></li>
</ul>
<div class="box">
	<div class="box_inner">
		<ul class="box_load">
			<!-- ↓ここに.load_xxが入る -->
		</ul>
		
		<div class="close">×&nbsp;CLOSE</div>
		
		<ul class="arrows">
			<li class="arrow_left"><span class="arrow_span"><i class="fas fa-chevron-left"></i></span></li>
			<li class="arrow_right"><span class="arrow_span"><i class="fas fa-chevron-right"></i></span></li>
		</ul>
	</div>
</div>
<div class="box_cover"></div>

201～203.htmlは以下で、料金によって<div id="standard-room">の部分のIDを変えています。

<div class="room-type-wrap">
	<h3 class="room-type">201&nbsp;スタンダード</h3>
</div>

<div class="room-info-wrap responsive-wrap">
	<div><img src="ホームページのURL/images/room201_01.jpg" alt="お部屋写真01"></div>
	<div><img src="ホームページのURL/images/room201_02.jpg" alt="お部屋写真02"></div>
	<div><img src="ホームページのURL/images/room201_03.jpg" alt="お部屋写真03"></div>
	
	<div class="price-room-info-list">
		<div id="standard-room">
			<!-- standard-room.htmlが入る -->
		</div>
	
		<p class="room-facilities">ここは部屋の設備が入ります</p>
	
	</div><!--price-room-info-list  -->
	
</div><!-- room-info-wrap -->

料金表は以下のhtmlです

<h4>ショートタイム</h4>
<ul>
	<li>月～金曜日・祝前日</li>
	<li>￥4,580</li>
</ul>
<ul>
	<li>土・日・祝日</li>
	<li>￥5,480</li>
</ul>

<h4>ご休憩</h4>
<ul>
	<li>月～金・祝前日</li>
	<li>￥5,000</li>
</ul>
<ul>
	<li>土・日・祝日</li>
	<li>￥5,700</li>
</ul>

<h4>サービスタイム</h4>
<ul>
	<li>月～金・祝前日</li>
	<li>￥5,000</li>
</ul>
<ul>
	<li>土・日・祝日</li>
	<li>￥5,700</li>
</ul>

<h4>ご宿泊</h4>
<ul>
	<li>日～金・祝日</li>
	<li>￥7,500</li>
</ul>
<ul>
	<li>土・祝前日</li>
	<li>￥10,000</li>
</ul>

<h4>ご延長</h4>
<ul>
	<li>全日</li>
	<li>￥1,800</li>
</ul>

201～223.htmlは、index.htmlと同じ階層に「room」フォルダを作って、その中に入れています。
料金表は「room-type」のフォルダに入れています。
トップページにも同じ料金表があって、そちらは表示されているので、動いてはいると思うのですが…。。。。

今回の料金表や、ヘッダーもこの方法でインクルードしていますが、あまり良くないでしょうか？？
この方法でよいのか、SEOはどうなのか、ネットではいまいちわからず、詳しい人も周りにおらず、みんな共通部分の読み込みはどうしているのだろうと、色々悩みながら作っております。
できれば、metaタグなど<head></head>の部分もひとつで済むようにしたいのですが、今のやり方では無理そうです。

他に何か良い方法があれば、ご教示頂けましたら幸いです。

ソースコードの書き方知らなかったので、この点は何だろう。と思いつつ「、、、」と手入力していました。すみません。

よろしくお願いいたします。

Comments

[m.ts10806]

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

あとHTMLも何も提示されないとアドバイス難しいかと。

蛇足ですが、データ次第ではHTMLに持つのはかなり悪手かと。
もっと簡単に作れるデータ構造考えたほうが良いかと。

[tk-tail]

アドバイスありがとうございます。編集しました。よろしくお願いします。