楽天市場の商品ページHTMLガイド｜使えるタグ・記述方法・制限を解説

「Webサイト制作の感覚で楽天の商品ページを組んだら、保存ボタンでエラーが出た」——楽天市場の店舗運営を始めた多くの担当者が、最初にぶつかる壁です。楽天の商品ページHTMLは、PC版とスマホ版で使えるタグが大きく違います。HTMLレベル別の使用可能タグ、スマホ版の制限、楽天GOLDによるCSS読み込み手順、転換率を上げるコーディングのコツ——この4点を押さえることが、制作の出発点になるでしょう。

「楽天市場で売上に繋がる商品ページHTMLの書き方がわからない」「楽天市場の売り上げを最大化したい」といったご相談があれば、ぜひお気軽にご相談ください。▶ サービス紹介資料をダウンロードする（無料）

楽天市場の商品ページHTML・CSSを正しく使うための前提知識

楽天市場の商品ページは、一般的なWebサイトとはまったく異なるHTML環境で動きます。通常のWeb制作ではdivタグやscriptタグを自由に組み合わせてレイアウトを組みますが、楽天市場のRMS（店舗運営システム）では使用できるタグが厳しく制限されているからです。

この制限を知らずにコーディングを進めると、ページ更新時にエラーが出て商品ページを公開できない事態に陥ります。だからこそ、制限の全容を把握したうえで制作に取りかかる姿勢が、楽天市場でのコーディング効率を左右する最初のステップです。

楽天市場がタグ制限を設けている背景

楽天市場がタグ制限を設ける主な理由は、プラットフォーム全体のセキュリティと安定性を守るためです。2020年10月以降、楽天市場はセキュリティ強化を名目に、それまで一部の事業者が使っていた「裏技的」なHTML実装を全面的に禁止しました。

それ以前は、スマホ版でもscriptタグでJavaScriptを読み込んだり、外部スタイルシートを適用したりする手法が存在していました。しかし現在はそうした手法がすべて封鎖されており、2020年以前の参考記事やYouTube動画で紹介されている方法は、最新の仕様と異なる可能性があります。

HTMLレベルという概念を理解する

楽天市場の商品ページHTMLには「HTMLレベル」という概念があり、記入する場所によって0〜3の4段階に分かれます。レベルによって使えるタグの種類が変わるため、どの入力欄にどの記述ができるかを把握する作業が、正しいコーディングの出発点です。

PC版とスマホ版でも制限の内容は大きく異なります。そのため、両方の仕様を別々に理解したうえでコーディングに取りかかることが欠かせません。「PC版では使えるのにスマホ版ではエラーになる」というトラブルの大半は、この違いを把握していないことが原因です。

RMSコールセンターではHTMLの相談は受け付けない

楽天市場のRMSコールセンターは、HTMLタグのコーディング方法をサポート対象外としています。使用できるタグを楽天市場に問い合わせても回答が得られないケースがほとんどで、自分でルールを習得するか、専門知識を持つ制作会社に依頼するかの二択です。

公式のRMSマニュアルには使用可能なタグの一覧こそ載っていますが、実際のコーディングの書き方や表示崩れの解決策までは書かれていないことが多いものです。こうした背景を踏まえて以降の内容を読み進めると、各制限の意味と対処法が腑に落ちます。

PC版商品ページのHTMLレベル別制限と使い分け

楽天市場のPC版商品ページは、記入場所によってHTMLの使用範囲が4段階に分かれます。HTMLレベル0〜3の各レベルに対応する入力欄と使える機能を順番に確認すると、どこに何を書けばよいかが明確になります。

HTMLレベル0：商品名・SKU設定欄

HTMLレベル0は最も制限が厳しい記入欄で、商品名・商品番号・項目選択肢別在庫用の縦軸・横軸項目名が対象です。使えるのはbrタグによる改行のみで、装飾を加えようと他のタグを入力しても、RMSの保存時にエラーが出るか無効化されてしまいます。

商品名で目立たせたい情報は、テキストの工夫（記号の活用・冒頭への重要ワード配置など）で対応するのが現実的です。楽天市場の検索アルゴリズムは商品名のテキストを重視するため、装飾よりも検索キーワードの自然な配置を優先したほうが、検索流入にも効いてきます。

HTMLレベル1：PC用キャッチコピー欄

HTMLレベル1はPC用キャッチコピー欄が該当し、レベル0よりは使えるタグの幅が広がります。とはいえ制限はまだ多く、bタグ（太字）やfontタグ（色指定）といった基本的な装飾タグが主な利用範囲で、インラインCSSはこのレベルでも使えません。

キャッチコピー欄は商品ページのタイトル直下に表示されるため、ユーザーの第一印象を左右する重要な箇所です。文字数は半角240文字以内という制限がありますが、この範囲で商品の最大メリットを一言で伝えるコピーを入れると、転換率の底上げにつながります。

HTMLレベル2：PC用商品説明文・販売説明文

HTMLレベル2は商品ページコーディングのメイン作業エリアで、PC用商品説明文・PC用販売説明文・カテゴリ説明文（上・下）・トップ説明文（上・下）などが該当します。tableタグを使ったレイアウト組み、imgタグによる画像挿入、pタグによる段落構成が可能なため、商品説明文のデザインのほとんどはこのレベルで完結するでしょう。

ただし、HTMLレベル2ではstyleタグやlinkタグを使った外部CSS読み込みはできません。テキスト色の指定はfontタグのcolor属性、文字サイズの調整はfontタグのsize属性という、古いHTML形式で対応します。

HTMLレベル3：ヘッダー・フッター・共通説明文

HTMLレベル3は、RMSのデザイン設定内にある「ヘッダー・フッター・レフトナビ」の記述欄と、共通説明文（大）が対象です。このレベルになって初めてlinkタグが使えるため、楽天GOLDでCSSファイルをアップロードし、ページ全体にスタイルを適用できます。

ヘッダーへのCSS適用は、PC版全ページに共通デザインを当てる唯一の手段です。しかし、この手法はPC版にしか効きません。スマホ版ではlinkタグを含む外部CSS読み込みが2020年以降完全に禁止されており、tableタグの属性指定や画像化で対応する必要があるからです。

スマホ版商品ページで使えるHTMLタグと制限の全容

楽天市場のスマホ版ページは、PC版よりも大幅に使えるタグが絞られます。2020年のスマートフォンページリニューアル以降、使用可能とされているHTMLタグのみが有効で、それ以外はすべて無効化やエラーの原因です。

楽天市場へのアクセスの7〜8割はスマホユーザーが占めるといわれており、スマホページのコーディングを誤ると売上に直結します。スマホ版の制限を正確に把握する作業は、PC版と同等以上に重要です。

スマホ版で使用できるHTMLタグ一覧

スマホ版商品ページ（スマートフォン用商品説明文）で使えるタグは、aタグ・imgタグ（最大20枚）・tableタグ・trタグ・tdタグ・thタグ・brタグ・pタグ・fontタグ・bタグ・centerタグに限られます。divタグは使えないため、PC版のようなdivベースのレイアウトはスマホ版では実現できません。

使える属性も制限されており、aタグはhrefとtarget属性のみ、imgタグはalt・border・height・src・width属性のみが利用できます。tableタグはbgcolor・border・cellpadding・cellspacing・height・widthなどの属性が使え、実務で最もよく使う組み合わせは、widthとbgcolorによる色付きブロック表現です。

スマホ版で絶対に使ってはいけないタグ

スマホ版ページでstyleタグやlinkタグを使おうとすると、ページの保存時にエラーが出るか、タグが自動的に除去されます。2020年10月以前は、一部の事業者がscriptタグでハンバーガーメニューを実装したり外部CSSを読み込んだりしていましたが、現在はすべて封鎖されました。

同様に、formタグ・inputタグ・selectタグ・scriptタグ・iframeタグ・doctype宣言・baseタグ・varタグ・labelタグ・optionタグも、HTMLレベルを問わず使えません。なお、hrタグはスマートフォン用商品説明文のみ例外的に使用でき、color・noshade・sizeの属性が利用可能です。

スマホ版での画像20枚制限への対処法

スマートフォン用商品説明文ではimgタグが1ページあたり20枚までという制限があるため、商品の特徴を画像で詳しく説明するロングページを作ると、この上限に引っかかりがちです。対処法としては、複数の説明画像を1枚にまとめた「バナー画像」として制作し、画像点数を削る方法が現場では多く採られています。

EC専門コンサルタントが指導する現場では「スマホページは1画像あたりの情報密度を上げる」という設計が定石です。たとえば画像点数を絞りつつ1枚1枚のクオリティを高めると、転換率の改善につながります。R-Cabinetへの動画アップロードで商品の使用シーンを補えば、画像枚数を節約しながら情報量も確保できるでしょう。

PC版・スマホ版共通の禁止タグと注意すべきコーディングルール

楽天市場で使えないHTMLタグは、PC版・スマホ版の両方に共通する禁止事項と、スマホ版のみの制限の二つに大別できます。制作を始める前に禁止タグを体系的に把握しておくと、無駄な作業やエラーの連鎖を防げるはずです。

PC版・スマホ版いずれでも使えない代表的な禁止タグは、formタグ・inputタグ・labelタグ・optionタグ・selectタグ・scriptタグ・varタグ・doctype宣言・baseタグです。これらはRMSのコールセンターのサポート対象外で、楽天市場に問い合わせても使えるようにはしてもらえません。

スマホ版で追加される禁止・制限事項は、styleタグ（インラインCSS記述）・linkタグ（外部CSS読み込み）・divタグ（ブロック要素）の3つが代表的です。スマホ版のレイアウトはtableタグの属性のみで組む必要があるため、PC版のCSSベースのレイアウトをそのままスマホ版に転用することはできません。

コーディング時に見落としがちなのが、インラインstyle属性の扱いです。htmlタグのstyle属性（color:redのような書き方）も、スマホ版ではサポートされていません。テキスト色を変えたいときは、fontタグのcolor属性を使う必要があります。

この違いを知らずにPC版のコードをそのままスマホ版へ貼り付けると、スタイルが一切反映されません。そのため、スマホ版に移植する際はstyle属性をfontタグ系の属性に置き換えることが、ページ崩れを防ぐポイントになります。

楽天GOLDを使ったCSS読み込みの具体的な手順

PC版商品ページ全体にCSSを適用する唯一の方法が、楽天GOLDを通じたCSS読み込みです。楽天GOLDとは楽天市場の有料オプションサービス（月額3,300円〜）で、FTPやブラウザを通じてサーバーにファイルをアップロードできる機能を指します。

楽天GOLDを契約していない店舗では、外部CSSファイルをアップロードする場所がないため、linkタグ経由のCSS読み込みはできません。PC版で高品質なデザインを実現したいなら、楽天GOLDの契約を検討する価値があるでしょう。

CSSファイルの作成とアップロード手順

まず、PC用のCSSファイルを作成し、ファイル名はmain.cssなど分かりやすい名称にします。楽天GOLDのサーバーの任意のディレクトリ（例：/css/）にアップロードすると、URLはhttps://www.rakuten.ne.jp/gold/【ショップID】/css/main.cssの形式になります。

このURLを、RMSのデザイン設定「PC版 ヘッダー・フッター・レフトナビ」の記述欄（HTMLレベル3）にlinkタグで参照すると、CSS読み込みが完成します。設定後は必ず、PC版のプレビューで正常にスタイルが当たっているかを確認してください。

RMSのリセットCSSとの競合が起きることもあるため、CSSには特定のIDやクラスを起点にしたセレクターを使い、楽天のデフォルトスタイルを意図せず上書きしない設計が求められます。たとえばbodyや全要素に広範な上書きをかけるとテーブルレイアウトが崩れるケースが報告されており、スコープを絞ったセレクター設計が安全でしょう。

CSSで実現できるデザイン強化の具体例

楽天GOLDのCSS読み込みを使うと、PC版では通常のWebサイトに近い品質のデザインを実現できます。具体的には、商品説明文内のセクション見出しにborder-leftで縦ラインを設けてメリハリをつける、吹き出し型のメッセージブロックを作る、複数の特徴を並べたカードUIを実装する——こうした表現が可能です。

CSSのhover疑似クラスや隣接セレクターを活用した純CSSのアコーディオン・タブも、PC版なら実装可能です。gridプロパティやflexboxを使えば、tableタグに頼らないモダンなレイアウトをPC版のみに適用できます。「PC版は高品質なデザイン・スマホ版はシンプルなtableレイアウト」という使い分けが、現在の楽天市場でのベストプラクティスです。

転換率を高める商品ページのHTMLコーディング設計

楽天市場の全体平均転換率は1.2〜1.5%程度といわれ、カテゴリや商品特性によって差があります。食品・飲料系では2〜3%を超える店舗も存在しますが、いずれにせよ商品ページのHTMLをどう設計するかは、転換率に直結する重要な意思決定でしょう。

ファーストビューの設計と最初の350px以内に入れるべき情報

スマホのファーストビュー（スクロールせずに見える領域）は350〜400px程度で、この領域に何を入れるかが、ページの印象と滞在率を分ける分岐点です。商品のメリットを一言で伝えるキャッチコピー、送料無料や期間限定などのオファー情報、購入ボタンへ視線を誘導する要素を配置し、スクロールせずとも価値が伝わる構成にします。

ファーストビューの設計で多くの店舗が見落とすのが、スマホ版とPC版でのビジュアル崩れです。スマホ版ではtableのwidthを100%に設定し、全カラムを50%ずつ均等割りにすると崩れにくく、EC専門の制作者が実務でよく採用しています。

商品説明のbody部分：tableレイアウトと画像・テキストの組み合わせ方

商品説明文のbody部分（ファーストビュー以降・クロージング前）は、商品の特徴・スペック・利用シーンを詳しく伝える部分にあたります。スマホ版ではdivタグが使えないため、tableタグを使ったレイアウトが基本です。1カラムのシンプルなtableに画像とテキストを交互に配置する構成が最も崩れにくく、実務の出発点として適しています。

背景色付きのセクション区切りを作りたいときは、tableタグのbgcolor属性を16進数6桁のカラーコードで指定するのが基本です。fontタグのcolor・size属性と組み合わせると、CSSが使えないスマホ版でも視覚的なメリハリをつけられます。EC制作の実務現場では、こうした属性の組み合わせを「楽天CSS代替テクニック」と呼び、制作マニュアルとして整備している事業者も多いものです。

文字数制限（5,120文字）の上手な使い方

楽天市場のスマートフォン用商品説明文とPC用商品説明文・販売説明文は、それぞれ全角5,120文字（半角10,240文字）以内が上限です。HTMLタグそのものも文字数にカウントされるため、tableタグで細かいレイアウトを組むほど、残りのテキスト量が減っていきます。

文字数の有効活用という観点で効果が出やすいのは、詳細な仕様テキストよりも「使用シーン」や「選ばれる理由」をテキストで記述することです。楽天市場の検索アルゴリズムは商品説明文内のテキストをインデックス対象とするため、検索にかかりたいキーワードを自然に盛り込んだ文章を入れると、SEO上も効いてきます。

楽天市場の商品ページHTMLにおけるアクセシビリティ対応

楽天市場の商品ページHTMLでは、imgタグのalt属性を必ず記述することが推奨されています。alt属性は画像が表示されない環境（スクリーンリーダーや低速回線）でのテキスト代替として機能するほか、楽天市場内での画像検索における商品の発見性にも寄与するからです。

alt属性には、商品名・特徴・サイズなどの情報を20〜30文字程度で端的に記述するのが実務上の目安です。「画像1」「バナー」といった意味のないalt属性は設定しないことが、ページ全体の品質向上につながります。

楽天市場の転換率(CVR)改善方法｜業種別平均・RMS活用・施策28選まで実践解説

スマホ版HTMLの実践コーディングパターン集

スマホ版商品説明文のHTMLコーディングは、tableタグを中心とした限られた手法の組み合わせです。実務でよく使うパターンを把握しておくと、実装速度と品質の両方を高められます。

パターン1：全幅の画像バナー配置

スマホ版でフル幅の画像を表示する最もシンプルなパターンは、tableタグのwidthを100%に設定し、内部のtdタグにimgタグを配置してimgのwidthも100%で指定する方法です。この書き方なら、スマホ画面幅に合わせて画像が自動的にリサイズされ、横スクロールが生じません。

cellpadding・cellspacingを0に設定すると画像間の余白がなくなり、バナーを隙間なく連続表示できる点が利点です。少しの余白が欲しいときは、cellpaddingに5〜10程度の値を指定して調整するとよいでしょう。EC専門制作会社の担当者は、こうした細かな属性値の調整が「プロらしい仕上がり」と「素人感のあるページ」の差を生むと指摘しています。

パターン2：2カラムの特徴説明テーブル

商品の特徴を左右に並べるレイアウトは、tableタグのwidthを100%にし、内部の2つのtdタグそれぞれにwidth=”50%”を指定すると実現できます。左右のtdにbgcolorで異なる背景色を付けると視覚的なメリハリが生まれ、スマホ版でもメリットを整理して伝えられるでしょう。

centerタグをtd内のコンテンツ全体に適用すると、画像・テキストがセルの中央に揃います。bタグとfontタグを組み合わせて特徴名を太字・色付きで目立たせ、その下に説明テキストを置くパターンが、楽天市場の商品ページで最も多く見られる2カラムレイアウトの構成です。

パターン3：見出し付きのセクション区切り

テキスト主体のセクション区切りには、背景色付きのtableで見出しブロックを作るパターンが有効です。tableのbgcolorにブランドカラーを指定し、その中のtdにfontタグとbタグで白い太字テキストを置くと、目立つ見出しブロックが完成します。

見出しブロックの下に続く本文テキストは、pタグで段落を構成し、fontタグで文字サイズを調整するのが基本です。fontタグのsize属性は1〜7の数値で指定でき、標準サイズの3に対して4〜5を指定するとやや大きめのテキストになり、仕様や詳細説明の見出しとして活用できます。

パターン4：スペース調整のための透明テーブル

要素間の余白を調整したいとき、CSSのmargin・paddingが使えないスマホ版では、透明のtableセルを使ったスペース調整が役立ちます。heightを指定した空のtdタグを挿入すると縦方向のスペースを任意の大きさで作れ、CSSが浸透する前のWeb制作で広く使われていた「スペーサーtable」と同じ考え方です。

実際の楽天市場コンサルティング動画でも「スペースの調整はtableの高さ指定で行う」という解説は、コンサルティング動画でも定番です。画像とテキストの間やセクションとセクションの間にこのスペーサーtableを挟むと、ページ全体の視認性が上がります。こうした現場で積み重ねられたノウハウが、スマホ版コーディングの品質を左右するでしょう。

楽天市場の商品ページHTMLでよくあるエラーと解決策

楽天市場での商品ページ制作では、特定のエラーパターンが繰り返し起こりがちです。エラーが出ると保存・更新ができなくなるため、代表的なエラーとその解決策をあらかじめ把握しておくと、制作時間を大幅に短縮できます。

エラー1：「本来利用できないHTMLタグ」エラー

スマートフォン用商品説明文で使用禁止タグを入力すると、「本来利用できないHTMLタグが含まれています」というエラーが表示されます。原因のほとんどは、divタグ・spanタグ・scriptタグなどの禁止タグで、PC版のdivベースのHTMLをそのままスマホ版の入力欄にコピーしたときに頻発するパターンです。

解決策は、禁止タグをすべて削除しtableベースの構成に書き直すことです。エラー箇所を特定する方法として、HTMLを半分ずつ削除して保存テストを繰り返す「二分法」が現場でよく使われており、文字数が多い長いHTMLでも数分以内に原因を絞り込めます。

エラー2：画像が表示されない・URL指定が反映されない

商品説明文にimgタグを入力したのに画像が表示されないことがあります。多くはsrc属性に指定したURLが誤っているか、楽天GOLDやR-Cabinetへのアップロードが完了していないことが原因です。楽天市場の商品ページに表示できる画像は、R-Cabinetまたは楽天GOLD上のファイルに限られます。外部ドメインの画像URLを直接入力しても、セキュリティポリシーにより表示されない点に注意が必要です。

R-Cabinetで画像をアップロードした後に表示される「HTMLを表示する」ボタンを押すと、正確なURLを含むimgタグのHTMLが出てきます。これをコピーして商品説明文に貼り付けるのが確実な手順で、ファイル名の大文字・小文字の違いやスペースの混入によるURLエラーを防げるはずです。

エラー3：スマホ版でページ横幅がはみ出る

スマホ版で横スクロールが発生しページが見切れる場合、tableのwidthに固定ピクセルを指定しているケースがほとんどです。解決策は、外側のtableにwidth=”100%”を指定し内部のtd要素もパーセント指定に変更すること、そしてimgタグにもwidth=”100%”を設定することで、端末幅に合わせてリサイズされます。

楽天市場のコンサルティングを行う現場では、スマホ実機または開発者ツールのエミュレーターで複数機種サイズを確認する工程が制作フローに組み込まれています。特に画面幅375px（iPhone SE相当）と390px（iPhone 14相当）でのプレビューは、最低限おさえておきたいところです。この2サイズで崩れがなければ、ほとんどのスマホ端末で正常に表示されるでしょう。

エラー4：tableレイアウトが入れ子になって崩れる

楽天市場の商品ページで複雑なtable構造を組もうとして、tableタグを多重に入れ子にするとページが崩れることがあります。特にスマホ版では、外側のtableのwidthを100%に設定しても、内側のtableが固定幅で指定されていると崩れの原因になります。

入れ子のtableを使うなら、すべての階層でwidthをパーセント指定にするか、一段階の平坦なtable構造に書き直すのが安全です。楽天市場の商品ページ制作の実務では、table入れ子は2階層以内に収めるという経験則が、コーディング品質の安定に役立つとされています。

楽天市場の商品ページコーディングを効率化する体制の作り方

商品ページのHTMLコーディングを複数の担当者で行う体制では、共通のテンプレートとルールを整備することが、制作効率と品質の安定化に直結する要素です。楽天市場独自の制約を毎回一から確認しながら制作するのは時間の無駄で、テンプレート化によって制作時間を大きく削れます。

コーディングテンプレートの整備方法

スマホ版・PC版それぞれの基本テンプレートHTMLを作成し、社内で共有する運用が効果的です。テンプレートには1カラム全幅バナー・2カラム特徴説明・見出しブロック・テキスト説明ブロック・スペーサーのパーツを揃えておき、担当者はパーツを組み合わせてページを作ると、禁止タグの混入を防ぎつつ制作速度が上がります。

テンプレートはCSVや専用の管理シートに保存し、商品カテゴリ別（食品・ファッション・インテリア等）にカスタマイズしたバリエーションを用意しておくと実用的です。実際、楽天市場の運営代行・コンサルティングを行う事業者の多くが、独自の「楽天商品ページHTMLテンプレート集」を社内ナレッジとして用意しています。新しいスタッフが加わった際の教育コストを大きく抑えるためです。

制作会社・ページ制作ツールとの使い分け

楽天市場専用のページ制作ツール（EasyPageやBiiino等）を使う選択肢もあります。GUI操作でHTMLページを作れるため、HTMLの知識がないスタッフでも商品ページを作れる点が利点です。ツール経由で生成されるHTMLは楽天市場の仕様に準拠していることが多く、禁止タグのエラーが起きにくいというメリットがあります。

一方で、細かいデザインの自由度はゼロから手書きしたHTMLに劣ります。そのため、ハイクオリティなページを求めるならHTMLを直接書ける人材か制作会社との連携が必要でしょう。商品点数が多いならツール、転換率改善のための戦略的なページ設計が必要なら専門制作会社、という使い分けが、コストと品質のバランスを最適化する現実的な判断です。

定期的な改善サイクルの設計

商品ページのHTMLは一度作ったら終わりではなく、定期的な改善が転換率向上のカギです。ファーストビューの画像差し替え・キャッチコピーの変更・商品特徴の強調ポイントの見直しを月次で行う体制を作ると、楽天市場での長期的な売上改善につながります。

改善の優先度を決めるときは、楽天市場のRMSアクセス解析と注文分析が判断材料です。アクセス数が多いのに転換率が低い商品ページは、ページのコンテンツや構成に問題がある可能性が高く、HTMLの改善で数値が動くケースがよくあります。

改善サイクルを続けるには、担当者が変わっても品質を保てる仕組みづくりが欠かせません。テンプレートの整備・バックアップルール・変更記録のフォーマットをセットで運用すると、属人的な管理から脱却し、チームとして商品ページの品質を高め続けられます。

楽天市場のスマートフォン用商品説明文ではpタグを使ったテキスト段落も表示できるため、画像中心の構成に偏らずテキストと画像をバランスよく組み合わせると、情報量と視認性を両立できます。テキスト段落は楽天市場内の検索インデックスにも寄与するため、仕様・用途・購入理由をテキストで丁寧に補足する姿勢が、転換率と露出の両方に効果的です。

楽天SEO対策の基本と実践手順｜検索順位を上げるアルゴリズム解説【2026年】

楽天市場の商品ページHTMLとSEO・検索対策の関係

楽天市場の商品ページのHTMLは、楽天市場内検索（楽天サーチ）でのランキングにも間接的に影響します。楽天サーチは商品名・説明文内のテキストをインデックスしているため、HTMLの構成によってキーワードの網羅度が変わるからです。

画像だけで商品の特徴を説明するページは、テキスト情報が乏しく、楽天サーチでの露出機会を失います。商品説明文にテキストで仕様・利用シーン・ターゲット情報を充実させると、楽天市場内の検索順位向上に効いてくるでしょう。

商品説明文テキストとキーワード配置の考え方

楽天市場の商品説明文でSEO効果を高めるには、商品に関連する検索キーワードを自然に盛り込んだテキストを書くことが基本方針です。「どんな人が・どんな場面で・どんな目的で使うか」を具体的に書くと、多様な検索クエリへの対応力が上がります。

ただし、キーワードを詰め込み過ぎた不自然なテキストは読者にとって価値がなく、かえって転換率を下げる要因です。テキストの目的はあくまで「読者が商品の価値を理解して購入を決断できる情報を提供すること」であり、SEOとコンバージョンを両立させる文章構成が求められるでしょう。

楽天GOLDのCSS活用と表示速度への影響

楽天GOLDから外部CSSを読み込む際、CSSファイルのサイズが大きいとページの表示速度に影響することがあります。楽天市場のページ表示速度は楽天のサーバー環境に依存する部分が大きいものの、不要なCSSプロパティを含む肥大化したファイルは、読み込みの遅延につながるからです。

CSSファイルは商品ページで実際に使うセレクターのみを含むよう整理し、ファイルサイズを最小限に抑えるのが望ましいといえます。楽天GOLD上のCSSファイルは月次または四半期ごとに未使用セレクターを棚卸しして整理する運用が、長期的なページ品質の維持に役立ちます。

楽天市場の商品ページHTML改善で成果を出すための進め方

楽天市場の商品ページHTMLを改善するときは、全ページを一度に刷新しようとせず、転換率への影響が大きいページから優先順位をつけて着手すると効果的です。RMSのアクセス解析でセッション数が多いのに転換率が低いページを特定し、そこから改善を始めます。

改善の効果測定には、楽天市場のA/Bテスト機能（RMS内の商品ページA/Bテスト）を活用する方法も有効です。旧バージョンと新バージョンを一定期間並べて転換率を比較すると、HTMLの変更が実際に成果につながっているかを数値で確認できます。

スマホページ改善の優先順位の決め方

スマホ版ページの改善は、ファーストビューの見直しから着手するのが最も費用対効果の高いアプローチです。ファーストビューのコンテンツを変えるだけで転換率が0.2〜0.5%ポイント改善したという事例が、楽天市場の運営支援現場では複数報告されています。全体のHTML刷新よりも短時間で成果が出やすいでしょう。

改善後は1〜2週間のデータを取得して転換率の変化を確認し、効果があれば次のセクション（商品特徴説明・クロージング）へと改善を進めます。こうした小さな改善を繰り返すアプローチが、楽天市場の商品ページを継続的に高品質へ保つ現実的な運用方法です。

PC版とスマホ版の改善を並行して進める体制

PC版とスマホ版は入力欄が分かれているため、それぞれ独立して改善を進められます。まずスマホ版の改善を先行し、成果が確認できたタイミングでPC版にも同等の情報設計を反映させる進め方が効率的でしょう。

PC版では、楽天GOLDのCSS活用による視覚的なクオリティ向上も同時に検討したいところです。スマホ版の転換率改善で得た知見（どの情報がユーザーに刺さるか）をPC版のCSSデザインに反映させると、PC版のユーザー体験も底上げできます。

HTMLの変更管理とバックアップ運用

楽天市場の商品ページHTMLは、RMS上で直接編集するため変更履歴が自動保存されません。意図しない変更で表示が崩れたときに元の状態へ戻せるよう、編集前のHTMLを必ずスプレッドシートやテキストファイルにバックアップしておく運用が必要です。

特に複数のスタッフが商品ページを編集する体制では、「誰がいつ何を変更したか」を記録するHTMLバージョン管理ルールを設けることが欠かせません。バックアップがない状態での誤編集は、商品ページの復旧に多大な時間を要するリスクをはらみます。

楽天市場 商品ページのHTML・CSSに関するよくある質問

外部EC担当者との連携時に共有すべき情報

商品ページHTMLの制作を外部のデザイン会社やフリーランスに依頼する場合、楽天市場特有の制限を事前に書面で共有することが手戻りを防ぐ鍵です。具体的には「スマホ版ではdivタグ・styleタグ・scriptタグ不可」「PC版はlinkタグが使えるが楽天GOLD契約が必要」「画像はR-Cabinetまたは楽天GOLD経由のURLのみ使用可能」といった制約条件を、制作依頼時に明示します。

制約条件を共有せずに依頼すると、PC版Webサイトと同じ感覚でdivベース・CSS依存のHTML納品物が来てしまうケースが後を絶ちません。そのため、楽天市場経験のある制作会社を選ぶか、制作会社に事前確認を行うことで、無駄なやり取りと修正コストを大きく削減できます。

まとめ

楽天市場の商品ページHTMLは、スマホ版がCSS全面禁止でtableベースのみ対応、PC版は楽天GOLDとlinkタグでCSS適用が可能という構造です。HTMLレベルの制限・禁止タグ・コーディングパターンを把握し、テンプレートを整備することで、制作の効率と品質を安定させられます。

「楽天市場の商品ページHTMLがうまく書けない」「スマホ版とPC版の表示崩れを直したい」といったご相談があれば、ぜひお気軽にお問い合わせください。TSUMUGUでは、楽天市場の商品ページ制作から転換率改善のコンサルティングまで実務ベースでサポートしています。→ まずは相談する（無料）

楽天市場の商品ページ最適化｜CVRを高めるタイトル・画像・説明文・価格設定の実践ガイド