サイト公開のときにやっておきたいこと

Ryunosuke Oguri

Published in

axis-motion-tech

6 min readJun 1, 2018

アクシスモーションエンジニアブログ

こんにちは。

フロントエンドエンジニアの小栗です。

サイト公開時にやることっていろいろあるんですけど、最低限これはやっておきたいことについて書きます。

1. サイトマップを作成

サイトマップ作成とかでググると色々いでてくるのでそこでドメインを入れるだけでサイトマップが作成できます。

http://www.sitemapxml.jp/

作成後ダウンロードしたサイトマップをプロジェクトのルートの直下に配置します。（PHPとかRubyフレームワークとかだとだいたいpublic/配下）例: public/sitemap.xml

2. robots.txtの作成

これはグーグルの検索ロボットに対して、sitemapの場所を教えてあげる的なやつです。public/robots.txtにファイルを置きます

robots.txtの中身

Sitemap:https://domainName/sitemap.xml
User-agent: *

3. Google Tag Manager の導入

https://tagmanager.google.com/

マーケティングの解析やSNSのシェア機能などを使う場合、scriptタグをサイト内に仕込むことが多いのですが、導入したくなったときにいちいちソースコード内に入れ込むのは面倒なので、TagMangerのタグをサイト内に１ついれておけば、あとはTagMangerの管理画面から様々なタグを追加できるようになります。

例えば、GoogleAnalitycsやTwiiterシェア,Facebookシェアなど

タグは２種類貼り付けます。（管理画面からコードは発行されますのでコピペのみ）

こっちは<head> 内のなるべく上のほうに貼り付け

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','ここにコンテナID');</script>
<!-- End Google Tag Manager -->

こっちは<body> の直後にこのコードを次のように貼り付け

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=ここにコンテナID"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

これだけ入れてデプロイしておけば、あとは管理画面から好きなようにできます。プレビュー機能などでちゃんと機能しているかを確認でき、コンテナのバージョン管理が可能になります。

4. Google Search Console でサイトを登録

Search Console - ホーム

Webmaster Central -利用規約 -プライバシーポリシー -Search Console ヘルプ

www.google.com

Googleに対するクロール申請やインデックスの登録依頼ができる以外に、サイトの状態や問題発生をアラートメッセージとして知らせてくれる重要な機能

引用: https://www.asobou.co.jp/blog/web/gsc04

とりあえずやることは、

ドメインとGoogle Search Consoleを連携する

2. sitemap.xmlの送信でインデックスを申請

5. Google Analitycsでアクセス解析

定番の無料アクセス解析ツール。とりあえずこれ入れておけば集客や広告運用の計測、PDCAとかできますので必ず入れておきましょう。でもシリコンバレーのスタートアップとかは有料解析ツールを初期からお金使ってガンガンやってるらしいですね。使いたい

6. PageSpeed Insightsでエクスペリエンスを調査

サイトのドメインを入力するとページの表示速度やエクスペリエンスを調査してくれます。これを使ってウェブパフォーマンスを向上しましょう。

PageSpeed Insights

PageSpeed Insights analyzes the content of a web page, then generates suggestions to make that page faster. Learn more.

developers.google.com

具体的には、css,jsの圧縮、画像の最適化、ブラウザのキャッシュを活用などを行いページの表示速度改善を図ります。

css,jsはwebpackやgulp等を使ってビルドと圧縮
画像は、gulp等でのやり方もありますが一度やった時画像が劣化したことがあったので、https://tinypng.com/ とかでやるものありです。おそらく画像の情報とか削除して軽くしているのだと思う。

3. AWSのAmazon CloudFront使ったり、最近良く見るのだと、ビルドされたCSSやJSファイルをCDN化して別サーバーにおいて読み込むようにしてサーバーに掛かる負荷を分散したりもしてますね。

とりあえず1,2は必ずやったほうがいいですね表示速度が格段と変わります。

まとめ

今回はサイトを公開する際の基本手順なので、最低これぐらいはやっておければとりあえずいいかなと思っています。（サービスの規模によっても変わってきますが）

とにかくおすすめしたいのはGoogleTagManagerです。すでにanalyticsのタグをhtmlに入れてる人とかは是非試してほしい。