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

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

具体的には、レンタルサーバを借りて、ドメインを取得して、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ファイルと同じ場所に置くようにしてくださいね。

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

【確認作業】モバイルフレンドリーのテストをする

パソコンサイトとスマホサイトの連携ができているかどうかを確認するには、 ご自身のスマホで、ホームページにアクセスをして、「スマホサイト」が自動的に表示されれば、それでOKです。

アクセスをした端末によって、表示されるホームページが自動的に切り替わっていれば、作業に問題はない、ということですね。


あとは、下記サイトで、「モバイルフレンドリー」のテストを行うこともできますよ。

・モバイル フレンドリー テスト - Google Search Console


上記のサイトに、URLを入力して、「このページはモバイル フレンドリーです」と表示されれば、パソコンサイトとスマホサイトの連携ができているということです。




これで、確認作業は完了になります。

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

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

インターネットを使ったサイドビジネス（副業）で、自宅にいながら、空いている時間で、月２０万円の収入を得ていただくための方法 もお伝えしています。 これからは、「複数の収入源を持つこと」がとても大切なので、ぜひホームページで収入を得ていきましょう！

⇒ 副業で自宅にいながら、収入を得るための講座はこちら！