みやちサイト制作所

未経験でもWEBサイト制作で稼ぐためのノウハウまとめ

閉じる

webサイトを公開するときに必ずすることリスト〜超基本的なSEO対策も〜

webサイトを公開するときに必ずすることリスト〜超基本的なSEO対策も〜

新しくwebサイトを作成したあと、実際に公開するときにはどんな設定をしていますか?

基本的なSEOの知識や、公開後にサイトを運用していくときのイメージがないと

question
ドメインとサーバーを用意して、アップロードするだけじゃないの?

と思うかもしれません。

実際に、サーバーにあげる(=アップロードする)だけで、webサイトとして形にはなります。

ただし、システム上の細かな設定がきちんとされていないと、後々困ることも多いです。

SEO対策がされていないのでいつまで経っても検索順位が上がらなかったり、そもそもアクセス数の把握ができなかったり……。

でも、webサイトを公開するときに何が必要なのかわからないですよね。

そこで、サイトを公開するときにどうしたら良いのか迷う初心者向けに、「サイトを公開するときの作業リスト」を用意しました。

miyachi
この記事にある項目を順にカバーするだけで、webサイト公開時に迷うことがなくなるよ

【この記事の目次】

webサイトとして必要な機能を整える

まず、サーバーにあげるまえに「webサイトとして必要な体裁をなしているか」をチェックします。

具体的には以下の2点です。

  1. デザイン崩れがないか確認する
  2. リンク切れがないか確認する
  3. 404 not found ページを作成する

順に詳しく説明していきますね。

デザイン崩れがないか確認する

自分ではしっかりサイトを作ったつもりでも、思わぬところで崩れていることは多々あります。

特に、自分が制作中に使っていたブラウザや端末ではないもので閲覧した場合に想定外のところでデザイン崩れが発生している可能性があります。

そこで、実際にネット上で公開する前に改めて「デザイン崩れが発生していないか」を確認する必要があります。

といっても、確認のためだけに新しくPCを用意したりスマホ・タブレットを購入するのは難しいですよね。
そこで、できる範囲でいいので最低限の確認をしましょう。

macOSとiPhone7を持っている私は、基本的には以下でチェックしています。

まずはPCでの確認は…

  • Chrome
  • Firefox
  • Safari
  • Safariの開発者モードでIE, Edgeにして確認

macOSだと、IE(Internet Explorer)やEdgeが使えないのが痛いですよね……。
どうしても擬似的にはなってしまいますが、Safariの開発者モードで切り替えて確認をしています。

ちなみに、現在、世の中で一番利用されているブラウザはGoogle Chromeです。

WebブラウザシェアランキングTOP10(日本国内・世界) | ソフトウェアテスト・第三者検証ならウェブレッジ

WebブラウザシェアランキングTOP10(日本国内・世界) | ソフトウェアテスト・第三者検証ならウェブレッジ

日本国内・世界それぞれのWebブラウザシェアランキングTOP10を紹介しております。

次に、スマホ版の確認は……

  1. Chromeの検証モードにある、iPhone/Android端末のモード
  2. 実機(iPhone7)のSafari・Chrome

Chromeの検証モードではいろんな端末の場合でテストができるとはいえ、やはり実機で確認するのが一番なので、最後にはできる範囲で実機確認をしています。

なお、制作途中のサイト(まだサーバーに上げていないサイト)で実機確認をする手順は↓を参考にしてくださいね。

PCで制作中のWEBサイトを、スマホでリアルタイムに確認する方法

2020.06.19

PCで作っている途中のサイトを、そのままリアルタイムでスマホで見えたらな…と思ったことはありませんか? そう思ったときは、以下で「なんとなく」対応してませんか? …

リンク切れがないか確認する

ついつい、リンクの確認は忘れがちですが、きちんと確認しておきましょう。
せっかく作ったページが見てもらえないと痛いうえに、SEO対策としても打撃があります。

かといって、1つ1つ手作業での確認は大変。
人のやることなので、確認自体にもれがある可能性もあります。

そこで、リンク切れの確認などには無料のウェブツールを使います。

リンクチェッカー(リンク切れチェックツール) dead-link-checker.com

リンクチェッカー(リンク切れチェックツール) dead-link-checker.com

サイトのトップページURLを入れてボタンを押すだけで、全ページ分を一気に確認してもらえるのでオススメです。

404 not foundページを作成する

404 not foundページというのは、サイト上に存在しないページが開かれようとしたときに表示されるエラーページです。

そもそも「404」というのは、webサーバーから返されるエラーの種類を意味しています。
つまり、サーバーが「404というタイプの状態になっているよ」と連絡してきた、ということです。

ポイント

webページを開くとき、実は裏側でそのページがどういう状態であるか(正常にページが読み込めた、ページがない、サーバーエラーが発生している、など)を数字で通知してもらっています。
その状態を表す数字を「HTTPステータスコード」といいます。

404は「ページがない」ということを表すHTTPステータスコードです。

何かの拍子に、サイト閲覧者が存在していないページにアクセスしようとしてしまうことがあります。

具体的には、以下のケースなどですね。

  • いったん作成したページを削除したあとに誰かがアクセスしようとした
  • 閲覧者がURLを打ち間違えた
  • サイト内でリンクの張り間違いがあって、存在しないページに繋いでしまった

その場合に「ページがありませんよ」と表示するエラーページが「404 not found」です。

設定しない場合は、ブラウザ規定のそっけないエラーページが表示されてしまいます。

not found
google chromeの場合

そこで、実際にサイトの雰囲気にあったページを用意しておくのがオススメです。

新しいwebサイトを公開するときの、最低限のSEO対策をする

question
SEO対策って、実際のところ何をどうしたらいいの?

SEOといっても、専門的な話となると何をどうしたらいいのかわからないですよね。

対策方法はいろいろありますが、基本的なものはサイトのmetaタグを設定しておくこと。
サイト閲覧者向けではなく、検索システム向けに「このサイトはこんな情報があるページですよ」というのを裏側で仕込んでおくものです。

具体的にはHTMLのhead部分に記入しておきます。

実際に設定することでSEOの効果がぐんとあがる、ということはないですが、設定しておかないと不利益を被るケースがあります

そこで、少し面倒に思うかもしれませんが、きちんと設定しておきましょう。

具体的には、以下の部分です。

  • ページごとのオリジナルのtitleタグを設定する
  • 文字コードを宣言する
  • IE対策をしておく
  • OGPを設定する
  • faviconを設定する

などです。

trouble
やっぱり難しそう…

と思うかもしれません。

ただし、理屈はさておき、条件に合わせてHTMLタグを書いておくだけでシンプルなので対応しておきましょう。

SEO対策のためのmetaタグはこう書く!効果のある記述方法を丁寧に解説

2020.06.19

こんにちは。サイトHTMLのhead内に書くmetaタグって、どうしてますか? と思ってませんか? 確かに、ページのデザイン面には現れてこないので、サイト制作初心…

新しいwebサイトを公開したあとの、運用のための必須ツールを導入する

webサイトは、ネット上で公開して終わり、ではありません。
公開したあと、それを実際に使っていく(運用していく)ことで価値が生まれます

実際に制作したwebサイトをどう使っていくかはケースバイケースですが、ほぼ100%「どんな人にサイトが見られているか」「どんな経路でサイトまで来ているのか」を調べたい場面に遭遇すると思います。

たとえ公開直後にデータがいらないとしても、いつか必要なタイミングが来たときにそれまでの利用者データが取れているかどうか、で対応が変わる場面もあるでしょう。

そこで、サイト利用者の情報は自動かつ無料で集めることができるので、サイト公開時にまとめて設定しておくのがおすすめです。

情報収集には、主にGoogleが提供している以下のツールを使います。

  • Search Console
  • Google Analytics

ざっくりいうと、
「サイトに来るまで、どういうルートをたどってきたか」を調べるのがSearch Consoleで、
「サイトに入ってから人がどう動いたか/どんなページを見たか」を調べるのがGoogle Analyticsです。

miyachi
サイトのことを知りたいとなったときに設定してもデータが取れないので、公開時に仕込んでおくのがオススメ!

Search Consoleを導入する

Search Consoleは、基本的に公式ページでサイトの情報を登録するだけで利用できます。
実際にデータが集計され始めるまで数日かかりますが、一度設定さえしてしまえば、あとは自動ですべてやってくれます。

Google Search Console

Google Search Console

また、Search Consoleを登録してサイトマップ(webサイトにどんなページが有るかの一覧表)を送信しておくと、早めにGoogleなどの検索システムに登録されるので、SEO効果も見込めます。

miyachi
登録したサイトでSEO効果を向上させるために何をすべきかも教えてくれるよ

Google Analyticsを導入する

Google Analyticsは、以下の手順で導入できます。

  1. Analyticsの公式ページで、サイトの情報を登録する
  2. 登録時に発行される「トラッキングコード」を、HTMLのhead内にコピペする
Redirecting...

Redirecting…

トラッキングコードは、閲覧者数などをチェックしたい全ページに貼り付けるようにしてくださいね。

miyachi
トラッキングコードのないページは測定してもらえないよ

webサイトを公開するときは、表に出ない部分もきっちりカバーして設定しておくことが大事

サイト制作の初心者であれば、実際に目にするデザイン部分だけ気にしてしまうかもしれません。

ただし、サイト制作者としてステップアップしていくためには、目に見えない裏側のシステムにも気を配る必要があります。

miyachi
理屈はどうあれ、作業自体は簡単なものばかりなので早めに知っておくといいよ!

実際にwebサイトを公開するにあたって、どんなケースも最低限注意すべきポイントは以下です。

  • デザイン崩れがないか確認する
  • リンク切れがないか確認する
  • 404 not foundページを用意する
  • SEO対策としてメタタグを設定する
  • Search Consoleを導入する
  • Google Analyticsを導入する

これができるだけで、サイト制作者としてよりスキルのある人として信頼してもらえるようになるので、少しでも早く慣れておきましょう!

サイトを効率的に作るための
秘蔵ノウハウを発信中

note

開発の基本的な部分はもちろん、コードをより素早く理解して書くための「コツ」をまとめました。15年の開発経験に裏付けられたノウハウをどうぞ!

詳しくはこちら

記事をシェア