作成したスマホサイトのデータを、インターネット上に公開する方法は、「パソコンサイト(ホームページ)をインターネット上に公開する方法」と一緒です。
具体的には、レンタルサーバを借りて、ドメインを取得して、FFFTPソフトを使って、スマホサイトのデータを、レンタルサーバにアップするという形ですね。

なお、具体的な手順については、ホームページのファイルをアップする方法 ~ FFFTPソフトの設定方法 ~ のページで、解説しているので、確認してみてください。
この手順どおりにやれば、スマホサイトのデータをレンタルサーバにアップして、インターネット上に公開することができます。
ただ、「スマホサイトを作りたい!」という人は、「すでにホームページ(パソコンサイト)を持っている」という場合が、ほとんどだと思います。
そこで、ここでは、「すでにホームページを持っている人が、そのホームページの「スマホ版」として、スマホサイトをインターネット上に公開する手順」をお伝えします。
この方法を行えば、訪問者が使っている端末(パソコンやスマホ)によって、表示されるホームページを切り替えることもできますよ。
たとえば、パソコンを使ってホームページに訪れた人には、パソコンサイトを表示させて、スマホを使ってホームページに訪れた人には、スマホサイトが表示される、、、という形ですね。
この方法は、とても便利な方法であるため、ぜひ実施してみてくださいね!
【手順1】パソコンサイトとスマホサイトの
「HTMLファイルのファイル名」を、一致させておくこと
すでにホームページを持っている人が、そのホームページの「スマホ版」として、スマホサイトをインターネット上に公開する方法をお伝えします。
まず最初にやることは、パソコンサイトとスマホサイトの、ホームページを表示させているファイル(HTMLファイル)のファイル名を、一致させてあげるということです。

具体的には、パソコンサイトの「トップページ」のファイル名が、「index.html」だった場合、スマホサイトのトップページのファイル名も、「index.html」にするという形です。
同じように、パソコンサイトの「プロフィール」のページのファイル名が、「page1.html」だった場合、スマホサイトのプロフィールのページのファイル名も、「page1.html」にするという形ですね。
パソコンサイトとスマホサイトを連携させるには、まず、パソコンサイトとスマホサイトの「HTMLファイルのファイル名」を一致させるようにすることが、必要になります。
■ スマホサイトのデータを入れる「フォルダ名」について
スマホサイトのデータは、「sp」という名前のフォルダで管理するのが一般的です。
たとえば、パソコンサイトのURLが、「http://torebook.jp/」だとしたら、スマホサイトのURLは、「http://torebook.jp/sp/」になるという形ですね。
このように、「sp」というフォルダを作って、その「sp」のフォルダの中に、スマホサイトのデータを管理します。
そして、フォルダを分けることで、パソコンサイトのHTMLファイルと、スマホサイトのHTMLファイルの名前を一緒にすることができる、ということですね。
|
【手順2】スマホサイトのHTMLファイルのヘッダー部分に、「canonical」タグを入れる
パソコンサイトとスマホサイトを連携させるためには、スマホサイトのHTMLファイルのヘッダー部分に、「canonical」タグを入れてあげます。
具体的には、下記の赤くなっている1行を入れてあげます。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="keywords" content="ホームページ,制作,サンプル">
<meta name="description" content="無料ホームページ制作講座のために作成したサンプルサイトです。">
<link href="http://ドメイン名/index.html" rel="canonical">
<title>ホームページ制作</title>
<link rel="stylesheet" href="style.css" type="text/css">
<base target="_top">
</head>
|
なお、上記の赤くなっている一行の「ドメイン名」と「ファイル名(index.html)」は、必ず変更してください。
具体的には、ホームページのドメイン名が「torebook.jp」だった場合には、下記のような記述になります。
<link href="http://torebook.jp/index.html" rel="canonical">
|
また、たとえば、page1.html ファイルに、「canonical」タグを入れる場合は、
下記のような記述になります。
<link href="http://torebook.jp/page1.html" rel="canonical">
|
スマホサイトのHTMLファイルには、すべて、上記の「canonical」タグを入れてあげる必要がある、ということです。
そして、スマホサイトに、この「canonical」タグを入れてあげることで、「このページと同じ内容が書かれたパソコンサイトのページがありますよ!」ということを、検索エンジンに知らせることができるようになります。
なお、ドメイン名については、すべてのページで一緒になりますが、ファイル名は、それぞれのHTMLファイルに合わせて、変更してあげる必要があるので、十分 注意してくださいね。
【手順3】パソコンサイトのHTMLファイルのヘッダー部分に、「alternate」タグを入れる
パソコンサイトとスマホサイトを連携させるためには、パソコンサイトのHTMLファイルのヘッダー部分に、「alternate」タグを入れてあげます。
具体的には、下記の赤くなっている1行を入れてあげます。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="keywords" content="ホームページ,制作,サンプル">
<meta name="description" content="無料ホームページ制作講座のために作成したサンプルサイトです。">
<link href="http://ドメイン名/sp/index.html" rel="alternate">
<title>ホームページ制作</title>
<link rel="stylesheet" href="style.css" type="text/css">
<base target="_top">
</head>
|
なお、上記の赤くなっている一行の「ドメイン名」と「ファイル名(index.html)」は、必ず変更してください。
具体的には、ホームページのドメイン名が「torebook.jp」だった場合には、下記のような記述になります。
<link href="http://torebook.jp/sp/index.html" rel="alternate">
|
また、たとえば、page1.html ファイルに、「alternate」タグを入れる場合は、
下記のような記述になります。
<link href="http://torebook.jp/sp/page1.html" rel="alternate">
|
パソコンサイトのHTMLファイルには、すべて、上記の「alternate」タグを入れてあげる必要がある、ということです。
そして、パソコンサイトに、この「alternate」タグを入れてあげることで、「このページと同じ内容が書かれたスマホサイトのページがありますよ!」ということを、検索エンジンに知らせることができるようになります。
なお、ドメイン名については、すべてのページで一緒になりますが、ファイル名は、それぞれのHTMLファイルに合わせて、変更してあげる必要があるので、十分 注意してくださいね。
【手順4】スマホサイトのデータをレンタルサーバにアップする
パソコンサイトとスマホサイトのファイルを一致させて、スマホサイトに「canonical」タグ、そして、パソコンサイトに「alternate」タグを入れたら、
あとは、スマホサイトのデータを、レンタルサーバにアップロードします。
(もちろん、修正したパソコンサイトのデータもアップしてくださいね!)
そして、スマホサイトのデータについては、パソコンサイトの index.htmlファイルと同じ場所に、
「sp」という名前のフォルダを作成して、その「sp」フォルダの中に、スマホサイトのデータをアップします。
具体的には、下記のような形です。
▼スマホサイトのアップロード方法

これによって、そのホームページ(パソコンサイト)の「スマホ版」として、スマホサイトをインターネット上に公開することができます。
ちなみに、URLは、ホームページのドメイン名が「torebook.jp」だった場合は、パソコンサイトのURLは「http://torebook.jp/」になりますし、スマホサイトのURLは、「http://torebook.jp/sp/」になりますよ。
【手順5】訪問者によって表示させるサイトを切り替えるために、
.htaccess ファイルを修正する
最後に、訪問者が使っている端末(パソコンやスマホ)によって、表示されるホームページを自動的に切り替えるようにします。
具体的には、パソコンでアクセスをしてきた人には「パソコンサイト」を表示させて、スマホでアクセスをしてきた人には「スマホサイト」を表示させる、という形です。
このような振り分けを、自動的に行うようにしてげたほうが、訪問者は助かるので、その方法をお伝えしますね!

具体的な手順(実現方法)としては、「.htaccess」ファイルに、下記の情報を追加してあげます。
この情報を、「.htaccess」ファイルに追加してあげることで、訪問者が使っている端末(パソコンやスマホ)によって、表示されるホームページを切り替えることができます。
Header set Vary User-Agent
RewriteEngine on
RewriteCond %{REQUEST_URI} !/sp/
RewriteCond %{HTTP_USER_AGENT} (iPod|iPhone|Android|Windows\ Phone)
RewriteRule ^(.*)$ sp/$1 [L]
RewriteBase /
RewriteCond %{REQUEST_URI} /sp/
RewriteCond %{HTTP_USER_AGENT} !(iPod|iPhone|Android|Windows\ Phone)
RewriteRule ^sp/(.*)$ $1 [L]
RewriteBase /
|
※ 最後に、必ず「改行(何も書かない一行)」を入れてください
上記の記述を、「.htaccess」ファイルに追加してあげることで、パソコンを使ってホームページに訪れた人には「パソコンサイト」を表示させて、
スマホを使ってホームページに訪れた人には「スマホサイト」を表示させる、ということができます。
なお、「.htaccess」ファイルを置く場所(レンタルサーバにアップする場所)については、パソコンサイトの index.htmlファイルと同じ場所に、置くようにしてください。
スマホサイトのデータをアップした場所(spフォルダの中)にアップロードするのではなく、必ず、パソコンサイトのindex.htmlファイルと同じ場所に置くようにしてくださいね。
これで、パソコンサイトとスマホサイトの連携は完成です。
【確認作業】モバイルフレンドリーのテストをする
パソコンサイトとスマホサイトの連携ができているかどうかを確認するには、
ご自身のスマホで、ホームページにアクセスをして、「スマホサイト」が自動的に表示されれば、それでOKです。
アクセスをした端末によって、表示されるホームページが自動的に切り替わっていれば、作業に問題はない、ということですね。
あとは、下記サイトで、「モバイルフレンドリー」のテストを行うこともできますよ。
・モバイル フレンドリー テスト - Google Search Console
上記のサイトに、URLを入力して、「このページはモバイル フレンドリーです」と表示されれば、パソコンサイトとスマホサイトの連携ができているということです。

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