練習で作った架空サイトをサーバーにアップしたい！
仮完成データをお客さんに確認してもらうために、サーバーにアップしたい！
本記事は、こんな方へ向けた内容になります。
テスト用のデータをサーバーに上げる時には、注意すべきポイントがあります。
具体的にいうと、こちらの2つです。
- Basic認証をかける
- noindexの記述を行う
これらの設定を行わないと、
- 未完成のサイトが、外部の人にも見れてしまう
- 未完成のサイトが、検索結果の一覧に出てきてしまう
- 同じようなサイトが、複数ネット上に存在してしまう
といった、よろしくないことが起こります。
でも、安心してください！Basic認証とnoindexの記述は、とっても簡単に行えます。
一度覚えてしまば、サクッと作業ができるようになるので、心配いりません。
それでは、詳しくみていきましょう。
あおいこの記事を書いた人
あおい（＠aoidesign）
2018年からWebデザインを学習。
副業時代を経て現在はフリーのLP専門デザイナーとして活動。
LP制作実績は200件以上。
メンターや講師の仕事も行う。
サーバーの用意がまだの方は、まずはそちらから↓
Basic認証とnoindexはどんな時に必要？
まず、どんな時に必要になるのかを見ていきましょう。
- 状況①ポートフォリオ用の架空サイトを公開する時
- 状況②仮完成データをテストサーバー上で確認してもらう時
状況①ポートフォリオ用の架空サイトを公開する時
Webデザイナーの中には、制作実績を載せたポートフォリオの中に、架空のサイトを入れることがあると思います。
でも、これらは実在しない商品やサービスのサイトなので、ネット上に公開しておくのは避けたほうがいいです。
特に、架空のサイトが実在するサービスと名前や内容が似ていることもよくあります。
この場合、検索結果に表示されてしまうとユーザーを混乱させる原因になりますよね。
なので、こうした架空のサイトにはnoindexを記述して、検索結果に表示させないようにする必要があるわけです。
状況②仮完成データをテストサーバー上で確認してもらう時
Web制作においては、公開前のデータをテストサーバーにアップして、お客さんに確認してもらうことがあると思います。
この時のサイトは未完成なので、誰でも見れる状態でネット上に公開するのは避けたほうがいいです。
特にリニューアル案件の場合、既存のサイトがまだ存在しているのに、同じ内容の新しいサイトが同時に公開されると、重複コンテンツとみなされてSEO的にも良くないです。
なので、未完成のサイトをネットにアップする際は、必ずBasic認証とnoindexを設定して、社内の人やお客さんだけが見れるようにしておきましょう。
Basic（ベーシック）認証とは？
Basic認証は、Webサイトにアクセス制限をかけられる認証方法の1つです。
認証をかけたサイトにアクセスすると、このような表示が出ます。
ここでユーザー名とパスワードを入力しないと、サイトを閲覧できません。
あおい具体例を一つ挙げると、こちらは私が作った架空サイトになります。
架空サイト：緑のようちえん
・ユーザー名：coding2024
・パスワード：coding2024
Basic認証には、セキュリティ面における脆弱性も指摘されます。
なので、機密性の高いサイトや個人情報を扱うサイトでは、他に使える安全な認証方法を取り入れることをおすすめします。
Basic認証の設定方法を解説
レンタルサーバーをお使いの場合は、管理画面から簡単に設定できます。
例えば、私が利用している「Xサーバー」だと、サーバー管理パネルの「アクセス制限」から可能です。
下記に有名なサーバー会社のヘルプを載せておきます。
ご自身が契約しているサーバー会社のリンクから、認証のかけ方を確認してください。
noindex（ノーインデックス）とは？
noindexは、検索エンジンにページをインデックスさせないようにするタグのことです。
具体的に言うと、以下のように<head>内にnoindexタグを記述します。
インデックスは簡単にいうと、Googleにサイトを見つけてもらい、評価して検索結果に載せてもらうことです。
普通のサイトなら、できるだけ検索結果の上位に載るようにインデックスしてもらいたいですね。
しかし、テストサイトや架空のサイトは、インデックスされる必要がありません。
むしろ、質の低いページがインデックスされると、サイト全体の評価が悪くなってしまいます。
以上の理由から、テストサイトや架空のサイトには、必ずindexの記述を加えておきましょう。
noindex（ノーインデックス）の記述方法を解説
noindexのタグはこちらになります。
<meta name=”robots” content=”noindex”>
これを、<head>と</head>の間に記述します。
具体例↓
【要注意】noindexは本番環境では外すのを忘れないで！
ページを正式に公開する時には、noindexを外すのを忘れないようにしましょう。
これを忘れると、検索結果に表示されないという大問題に発展します。SEO対策としては致命的です。
公開前の最終チェックリストに、noindexの削除を必ず入れておくと安心ですよ！
