サイト公開のときにやっておきたいこと
アクシスモーションエンジニアブログ
こんにちは。
フロントエンドエンジニアの小栗です。
サイト公開時にやることっていろいろあるんですけど、最低限これはやっておきたいことについて書きます。
1. サイトマップを作成
サイトマップ作成とかでググると色々いでてくるのでそこでドメインを入れるだけでサイトマップが作成できます。
作成後ダウンロードしたサイトマップをプロジェクトのルートの直下に配置します。(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のタグをサイト内に1ついれておけば、あとはTagMangerの管理画面から様々なタグを追加できるようになります。
例えば、GoogleAnalitycsやTwiiterシェア,Facebookシェアなど
タグは2種類貼り付けます。(管理画面からコードは発行されますのでコピペのみ)
こっちは<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 でサイトを登録
Googleに対するクロール申請やインデックスの登録依頼ができる以外に、サイトの状態や問題発生をアラートメッセージとして知らせてくれる重要な機能
引用: https://www.asobou.co.jp/blog/web/gsc04
とりあえずやることは、
- ドメインとGoogle Search Consoleを連携する
2. sitemap.xmlの送信でインデックスを申請
5. Google Analitycsでアクセス解析
定番の無料アクセス解析ツール。とりあえずこれ入れておけば集客や広告運用の計測、PDCAとかできますので必ず入れておきましょう。でもシリコンバレーのスタートアップとかは有料解析ツールを初期からお金使ってガンガンやってるらしいですね。使いたい
6. PageSpeed Insightsでエクスペリエンスを調査
サイトのドメインを入力するとページの表示速度やエクスペリエンスを調査してくれます。これを使ってウェブパフォーマンスを向上しましょう。
具体的には、css,jsの圧縮、画像の最適化、ブラウザのキャッシュを活用などを行いページの表示速度改善を図ります。
- css,jsはwebpackやgulp等を使ってビルドと圧縮
- 画像は、gulp等でのやり方もありますが一度やった時画像が劣化したことがあったので、https://tinypng.com/ とかでやるものありです。おそらく画像の情報とか削除して軽くしているのだと思う。
3. AWSのAmazon CloudFront使ったり、最近良く見るのだと、ビルドされたCSSやJSファイルをCDN化して別サーバーにおいて読み込むようにしてサーバーに掛かる負荷を分散したりもしてますね。
とりあえず1,2は必ずやったほうがいいですね表示速度が格段と変わります。
まとめ
今回はサイトを公開する際の基本手順なので、最低これぐらいはやっておければとりあえずいいかなと思っています。(サービスの規模によっても変わってきますが)
とにかくおすすめしたいのはGoogleTagManagerです。すでにanalyticsのタグをhtmlに入れてる人とかは是非試してほしい。