スマホサイトをインターネット上に公開する方法と注意点

作成したスマホサイトのデータを、インターネット上に公開する方法は、「パソコンサイト（ホームページ）をインターネット上に公開する方法」と一緒です。

具体的には、レンタルサーバを借りて、ドメインを取得して、FFFTPソフトを使って、スマホサイトのデータを、レンタルサーバにアップするという形ですね。




なお、具体的な手順については、ホームページのファイルをアップする方法　～ FFFTPソフトの設定方法 ～ のページで、解説しているので、確認してみてください。

この手順どおりにやれば、スマホサイトのデータをレンタルサーバにアップして、インターネット上に公開することができます。


ただ、「スマホサイトを作りたい！」という人は、「すでにホームページ（パソコンサイト）を持っている」という場合が、ほとんどだと思います。

そこで、ここでは、「すでにホームページを持っている人が、そのホームページの「スマホ版」として、スマホサイトをインターネット上に公開する手順」をお伝えします。


この方法を行えば、訪問者が使っている端末（パソコンやスマホ）によって、表示されるホームページを切り替えることもできますよ。

たとえば、パソコンを使ってホームページに訪れた人には、パソコンサイトを表示させて、スマホを使ってホームページに訪れた人には、スマホサイトが表示される、、、という形ですね。

この方法は、とても便利な方法であるため、ぜひ実施してみてくださいね！

【手順１】パソコンサイトとスマホサイトの
「HTMLファイルのファイル名」を、一致させておくこと

すでにホームページを持っている人が、そのホームページの「スマホ版」として、スマホサイトをインターネット上に公開する方法をお伝えします。


まず最初にやることは、パソコンサイトとスマホサイトの、ホームページを表示させているファイル（HTMLファイル）のファイル名を、一致させてあげるということです。




具体的には、パソコンサイトの「トップページ」のファイル名が、「index.html」だった場合、スマホサイトのトップページのファイル名も、「index.html」にするという形です。

同じように、パソコンサイトの「プロフィール」のページのファイル名が、「page1.html」だった場合、スマホサイトのプロフィールのページのファイル名も、「page1.html」にするという形ですね。


パソコンサイトとスマホサイトを連携させるには、まず、パソコンサイトとスマホサイトの「HTMLファイルのファイル名」を一致させるようにすることが、必要になります。

■ スマホサイトのデータを入れる「フォルダ名」について

【手順２】スマホサイトのHTMLファイルのヘッダー部分に、「canonical」タグを入れる

パソコンサイトとスマホサイトを連携させるためには、スマホサイトのHTMLファイルのヘッダー部分に、「canonical」タグを入れてあげます。

具体的には、下記の赤くなっている１行を入れてあげます。

なお、上記の赤くなっている一行の「ドメイン名」と「ファイル名（index.html）」は、必ず変更してください。

具体的には、ホームページのドメイン名が「torebook.jp」だった場合には、下記のような記述になります。

また、たとえば、page1.html ファイルに、「canonical」タグを入れる場合は、
下記のような記述になります。

スマホサイトのHTMLファイルには、すべて、上記の「canonical」タグを入れてあげる必要がある、ということです。

そして、スマホサイトに、この「canonical」タグを入れてあげることで、「このページと同じ内容が書かれたパソコンサイトのページがありますよ！」ということを、検索エンジンに知らせることができるようになります。


なお、ドメイン名については、すべてのページで一緒になりますが、ファイル名は、それぞれのHTMLファイルに合わせて、変更してあげる必要があるので、十分 注意してくださいね。

【手順３】パソコンサイトのHTMLファイルのヘッダー部分に、「alternate」タグを入れる

パソコンサイトとスマホサイトを連携させるためには、パソコンサイトのHTMLファイルのヘッダー部分に、「alternate」タグを入れてあげます。

具体的には、下記の赤くなっている１行を入れてあげます。

なお、上記の赤くなっている一行の「ドメイン名」と「ファイル名（index.html）」は、必ず変更してください。

具体的には、ホームページのドメイン名が「torebook.jp」だった場合には、下記のような記述になります。

また、たとえば、page1.html ファイルに、「alternate」タグを入れる場合は、
下記のような記述になります。

パソコンサイトのHTMLファイルには、すべて、上記の「alternate」タグを入れてあげる必要がある、ということです。

そして、パソコンサイトに、この「alternate」タグを入れてあげることで、「このページと同じ内容が書かれたスマホサイトのページがありますよ！」ということを、検索エンジンに知らせることができるようになります。


なお、ドメイン名については、すべてのページで一緒になりますが、ファイル名は、それぞれのHTMLファイルに合わせて、変更してあげる必要があるので、十分 注意してくださいね。

【手順４】スマホサイトのデータをレンタルサーバにアップする

パソコンサイトとスマホサイトのファイルを一致させて、スマホサイトに「canonical」タグ、そして、パソコンサイトに「alternate」タグを入れたら、 あとは、スマホサイトのデータを、レンタルサーバにアップロードします。

（もちろん、修正したパソコンサイトのデータもアップしてくださいね！）


そして、スマホサイトのデータについては、パソコンサイトの index.htmlファイルと同じ場所に、 「sp」という名前のフォルダを作成して、その「sp」フォルダの中に、スマホサイトのデータをアップします。

具体的には、下記のような形です。


▼スマホサイトのアップロード方法



これによって、そのホームページ（パソコンサイト）の「スマホ版」として、スマホサイトをインターネット上に公開することができます。

ちなみに、URLは、ホームページのドメイン名が「torebook.jp」だった場合は、パソコンサイトのURLは「http://torebook.jp/」になりますし、スマホサイトのURLは、「http://torebook.jp/sp/」になりますよ。

【手順５】訪問者によって表示させるサイトを切り替えるために、
.htaccess ファイルを修正する

最後に、訪問者が使っている端末（パソコンやスマホ）によって、表示されるホームページを自動的に切り替えるようにします。


具体的には、パソコンでアクセスをしてきた人には「パソコンサイト」を表示させて、スマホでアクセスをしてきた人には「スマホサイト」を表示させる、という形です。

このような振り分けを、自動的に行うようにしてげたほうが、訪問者は助かるので、その方法をお伝えしますね！




具体的な手順（実現方法）としては、「.htaccess」ファイルに、下記の情報を追加してあげます。

この情報を、「.htaccess」ファイルに追加してあげることで、訪問者が使っている端末（パソコンやスマホ）によって、表示されるホームページを切り替えることができます。

上記の記述を、「.htaccess」ファイルに追加してあげることで、パソコンを使ってホームページに訪れた人には「パソコンサイト」を表示させて、 スマホを使ってホームページに訪れた人には「スマホサイト」を表示させる、ということができます。


なお、「.htaccess」ファイルを置く場所（レンタルサーバにアップする場所）については、パソコンサイトの index.htmlファイルと同じ場所に、置くようにしてください。

スマホサイトのデータをアップした場所（spフォルダの中）にアップロードするのではなく、必ず、パソコンサイトのindex.htmlファイルと同じ場所に置くようにしてくださいね。

これで、パソコンサイトとスマホサイトの連携は完成です。

当サイトで使用しているサンプルサイトのデータを、無料でダウンロードできます。
サンプルサイトがあれば、さらにホームページの作り方が分かりやすくなりますよ。

⇒　当サイトで使用しているサンプルサイトの無料ダウンロードはこちら

これからはAIの時代になります。 私も、AIを使って文章や画像やホームページを作っています。 私が実際に行っているやり方を、分かりやすく解説した講座が、下記の講座です。

⇒　AIやChatGPTを活用してビジネスを行う講座はこちら