楽天RMSのHTMLタグエラーを直す方法｜保存できない・表示崩れの切り分け

楽天RMSでHTMLが保存できない、表示が崩れるときは、コードを闇雲に書き換えず、最初に元データを退避します。次に「保存時に拒否される」「保存できるが表示が崩れる」「画像・リンクだけ動かない」を分け、最小コードへ戻してから、削った内容を半分ずつ戻します。

この記事では、入力欄の特定、閉じタグ、入れ子、引用符、全角記号、許可されないタグ・属性、URL、コピー時の不可視文字、文字数、PC・スマホ差を、安全に切り分ける方法を解説します。

古いHTML例をそのまま使わない

HTMLタグのよくある間違いを解説した古い資料には、サンプルコードや練習資料が添えられていることがあります。ただし2016年前後の情報も多く、当時のHTML応用、CSS、jQueryなどの記述が現行の仕様と一致しない場合があります。

RMSでは、入力欄、PC・スマホ、ページ種別によって利用できるタグ・属性や文字数が異なる可能性があります。古いサンプル、他モールのHTML、競合ページのソースを、現在の許可仕様として流用しません。

変更前の原本と状況を保存する

直す前に、再現に必要な情報を残します。

• 店舗、商品管理番号、SKU
• RMSの画面名・入力欄名
• PC用・スマホ用等の対象
• 発生日時と実行者
• エラーメッセージ全文
• 保存前のHTML原文
• 直前に変更した箇所
• ブラウザ・端末
• 公開ページのURLとスクリーンショット

HTMLをテキストファイルとして保存し、RMS上の内容を上書きし続けません。正常だった版がある場合は、そのコードと更新日時も保存します。

症状を3種類に分ける

保存エラーなのに公開ページのCSSだけを調べる、画像404なのにタグの入れ子だけを直す、といった遠回りを避けます。

複数症状がある場合は、保存を通す、最小表示を確認する、画像・リンクを戻す、装飾を戻す順に進めます。

エラーメッセージを記録して対象を特定する

RMSがタグ名、属性、文字数、行等を示す場合、その文言を正確に記録します。担当者の要約だけでは、検索・問い合わせ時に原因を特定しにくくなります。

確認することです。

1. どの入力欄で出たか
2. 保存ボタン押下直後か、反映後か
3. 商品一件だけか、複数商品か
4. 同じコードを別欄へ入れた結果はどうか
5. 空欄・最小コードなら保存できるか
6. エラー番号・対象文字列が示されているか

同じ「商品説明」でも、PC、スマホ、販売説明等で仕様が違う可能性があります。欄名を省略しません。

現行の許可タグ・属性・文字数を確認する

構文として正しいHTMLでも、RMSが対象欄で許可していなければ保存できません。

現行マニュアルで確認する項目です。

• 利用できるHTMLタグ
• 利用できる属性と値
• CSS・style属性の扱い
• JavaScript、フォーム、埋め込みの制限
• 文字数・バイト数の上限と数え方
• 画像URL・リンクURLの要件
• PC・スマホの差
• 廃止・非推奨になった記述

「以前保存できた」は現行仕様の証明ではありません。仕様変更や既存データの経過措置があり得るため、新規保存時の条件を確認します。

最小コードで保存できる状態へ戻す

原因が不明なら、元コードのコピーで作業し、内容を最小にします。たとえば単純な段落一つなど、対象欄で現行仕様上許可されることを確認した記述だけにします。

最小コードで保存できれば、アカウントや商品全体ではなく、削ったコード内に原因がある可能性が高まります。最小コードでも失敗するなら、入力欄、権限、文字数の数え方、商品状態、RMS側障害等を確認します。

本番ページを空にして試すのではなく、下書き・テスト商品等、店舗ルールと楽天の規約上安全な環境を使います。

二分探索で問題箇所を絞る

長いHTMLを一行ずつ眺めるより、コードを意味のあるブロックへ分け、半分ずつ戻します。

1. 正常に保存できる最小コードを用意する
2. 元コードの前半を追加して保存する
3. 成功なら後半、失敗なら追加した前半をさらに半分にする
4. 問題ブロックが小さくなるまで繰り返す
5. 最後にタグ・属性・文字を一つずつ確認する

追加するたびに結果を記録します。一度に複数箇所を修正すると、真の原因が残ったり、別のエラーを作ったりします。

開始タグと終了タグを対応させる

<p>に対する</p>、<a>に対する</a>のように、開始と終了を対応させます。閉じ忘れだけでなく、余分な閉じタグも確認します。

インデントを付け、親子関係を見やすくします。

確認の例です。

• 開いたタグを閉じているか
• 閉じる順序が逆になっていないか
• 自己終了・空要素の扱いを混同していないか
• コメントが途中で閉じていないか
• タグ名の綴りが一致しているか
• <や>が欠けていないか

ブラウザが自動補正して見えても、RMSの保存判定や別端末では崩れる場合があります。

誤った入れ子を直す

開始した順と逆順で閉じるのが基本です。ある要素の途中で親要素を先に閉じると、後続の文字・画像・リンクまで崩れる場合があります。

同じタグを何段も重ねた箇所、表、リスト、リンクの中に別リンクを入れた箇所を重点的に確認します。コピーしたセクションを削除したとき、開始タグだけ・終了タグだけが残っていないかも見ます。

複雑な表や装飾は、まず単純な段落・リストへ戻し、必要性を確認してから再構築します。

引用符と属性の書き方を確認する

属性値の引用符が片側だけ、全角の引用符、不要な記号が混ざると、以降のコード全体が属性値として解釈される場合があります。

確認します。

• "と'の開始・終了が揃っている
• 全角の引用符や空白へ置換されていない
• 属性名と値の間に=がある
• URL内の記号が途中で切れていない
• 同じ属性を重複していない
• 現行RMSで許可された属性だけを使っている

属性を一つずつ外して保存し、どの属性で失敗するか確認します。

全角記号・不可視文字・貼り付け装飾を除く

Word、Google Docs、Webページ、チャット、生成AIからコピーすると、見た目では分からない文字や装飾HTMLが入る場合があります。

問題になり得る例です。

• 全角の＜ ＞ ”
• 改行しない空白や特殊なスペース
• スマート引用符
• 制御文字・ゼロ幅文字
• 不要なspanやstyle
• Office固有のタグ・属性
• Markdownの記号をHTMLと混在

プレーンテキストとして貼り直し、必要なタグだけを手で戻すと切り分けやすくなります。文字コードも現行RMSの案内に合わせます。

文字数・バイト数の上限を確認する

画面上の文字数だけでなく、HTMLタグ、属性、URL、改行等を含めて上限判定される場合があります。日本語と半角英数でバイト数が異なる可能性もあります。

RMSが示す現行の上限と数え方を確認し、次を減らします。

• 重複した説明・装飾
• 不要なインラインスタイル
• 自動生成された長い属性
• 同じ画像・リンクの繰り返し
• 不要な空要素・コメント

上限ぎりぎりまで使わず、更新時の余裕を持たせます。内容を削る場合も、法定表示・注意・購入条件を優先して残します。

画像が表示されない原因を分ける

imgタグが保存できても、画像URL側の問題で表示されないことがあります。

画像URLをブラウザで直接開き、HTML問題と画像配信問題を分けます。商品画像管理の仕様は現行マニュアルで確認してください。

リンクが動かない原因を分ける

リンクでは、hrefの値、プロトコル、URLエンコード、閉じタグ、リンクの入れ子を確認します。

• URLを直接開けるか
• https://等が欠けていないか
• 全角文字・空白・改行が混入していないか
• aタグを正しく閉じたか
• リンクの中へ別リンクを入れていないか
• 対象欄で属性が許可されているか
• ログイン・地域・期間で遷移先が変わらないか

保存できるがクリックできない場合、透明な要素や別要素が上に重なっていないかも実ページで確認します。

PCとスマホの差を確認する

PCで正常でも、スマホ用入力欄の許可仕様、画面幅、楽天側の変換で表示が変わる場合があります。

固定幅の表・画像、長いURL、改行しない文字列、インラインサイズを確認します。スマホで横スクロール、文字の極端な縮小、画像のはみ出し、ボタン重なりがないか見ます。

PC用コードをそのままスマホ欄へ貼らず、それぞれの現行仕様に合わせます。楽天市場アプリとスマホWebの両方で確認します。

修正後は実ページで回帰確認する

保存成功を完了条件にしません。

1. 商品ページをログアウト状態で開く
2. PC、スマホWeb、アプリで確認する
3. 見出し、段落、表、リストの構造を見る
4. 全画像を読み込み、リンクをクリックする
5. SKU選択、価格、在庫、配送を確認する
6. 修正箇所の前後が崩れていないか見る
7. 構造化データや計測への影響を必要に応じて確認する
8. 修正版、確認者、確認日時を保存する

商品ページ全体の読みやすさは「楽天で売れる商品ページの作り方」も参照してください。

再発防止のテンプレートと変更管理

正常確認済みのHTML部品をテンプレート化し、担当者が毎回ゼロから記述しないようにします。ただし、現行仕様の改定時に更新できる責任者を決めます。

変更管理には、元コード、変更理由、差分、実行者、承認者、テスト商品、本番反映、ロールバック版を含めます。大量商品へ反映する前に、代表商品とPC・スマホでテストします。

外部制作会社へ依頼する場合も、RMSの対象欄、許可仕様、納品形式、検証結果を契約・仕様書へ含めます。

HTMLエラーチェックリスト

• 元HTMLとエラー全文を保存した
• 入力欄、PC・スマホ、症状を特定した
• 現行の許可タグ・属性・文字数を確認した
• 最小コードで保存できるか試した
• 二分探索で問題ブロックを絞った
• 閉じタグ、入れ子、引用符を確認した
• 全角・不可視文字・貼り付け装飾を除いた
• 画像URL・リンクURLを直接確認した
• 実ページのPC・スマホ・アプリを確認した
• 正常版とロールバック手順を保存した

よくある質問

HTMLが正しいのにRMSで保存できないのはなぜですか？

一般的なHTMLとして正しくても、対象入力欄でタグ・属性が許可されていない、文字数上限、URL要件等に合わない可能性があります。欄名を特定し、現行マニュアルを確認してください。

エラー箇所が分からない長いコードはどう直しますか？

原本を保存し、正常な最小コードへ戻します。元コードをブロック単位で半分ずつ追加し、失敗する側をさらに半分にする二分探索で絞ります。

WordやAIから作ったHTMLを貼ってもよいですか？

不要な装飾タグ、style、全角記号、不可視文字が混入することがあります。プレーンテキストへ戻し、現行RMSで許可されたタグ・属性だけを再構築して確認してください。

保存できたら修正完了ですか？

実ページのPC、スマホWeb、アプリで表示し、画像、リンク、SKU、価格、在庫、配送、前後の構造を確認して完了です。保存時に自動変換される可能性もあります。