【Astro No.02】Astroのセットアップ
ブログを世の中に公開するためにはいくつかの設定が必要です。合わせてあると便利なツールもインストールする方法を紹介します。
ブログを世の中に公開するためにはいくつかの設定が必要です。合わせてあると便利なツールもインストールする方法を紹介します。
Google Analytics
Google Analyticsはサイトが「どのページがよく見られているか」「リアルタイムの閲覧ユーザ数」などを調べられます。
主な手順は以下です。
- Google Analyticsのアカウントを登録
URL : https://analytics.google.com/
- Google Analyticsの識別コードを入手する
管理設定からプロパティを作成し、色々アンケートを答えると以下のようなスニペットが提示されます。 ※IDは人それぞれです。
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=<ID>"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '<ID>');
</script>- IDを<head>タグに挿入します。
Google Search Console
Google Search Consoleは「どのようなキーワードで検索されているか」を調べられます。また、Google検索エンジンでサイトをブラウザに表示してもらうための処理するサービスでもあります。このサービスを登録することは閲覧数を増やす手助けになります。
サイトマップの登録
まずは、サイトマップの登録です。
サイトマップはドメイン内にどのくらいのページが存在するかをまとめた1つのファイルになります。目次みたいなものです。Google Search Consoleはサイトマップを登録すると、自動的にGoogleのロボットがページが増えた場合にWebページとして登録してくれます。サイトマップを登録しなければ、記事などのページを追加するたびに手動で登録が必要になりますので大変手間となりえます。
astroをインストールしたディレクトリにて実行してください。
yarn astro add sitemapホームディレクトリに「astro.config.拡張子(min.js , ts, etc)」のファイルがあり、その中の「"site"の<YOUR SITE>」を自分のドメインへ更新してください。それと「"integrations"の行が追加されていること」を確認してください。
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';
export default defineConfig({
// ...
site: 'https://<YOUR SITE>',
integrations: [sitemap()],
})次にロボットが巡回できるように設定を追加します。<head>タグの中に「 <link rel="sitemap" href="/sitemap-index.xml">」を追加してください。
<head>タグはデフォルトの状態では「layouts/Layout.astro」に組み込まれているようです。
<head>
<link rel="sitemap" href="/sitemap-index.xml">
</head>次に「public/robots.txt」の設定を変更・追加してください。
まずはドメイン以下すべてのページをロボットが巡回できるよう「Allow: /」としてください。そして「Sitemap: https://<YOUR SITE>/sitemap-index.xml」の行を追加してください。<YOUR SITE>には自分のドメインを入力してください。
User-agent: *
Allow: /
Sitemap: https://<YOUR SITE>/sitemap-index.xmlここまで対応できたら、一度ビルドを実施しましょう。
Astroドキュメント
Google Search Consoleのアカウント登録
以下URLにて登録を実施して下さい。
Google Search Consoleのサイト登録
サイトをGoogleに登録するのですが、タイプが2種類あります。
- ドメイン
- URLプレフィックス
ドメインで登録できれば一番簡単なのですが、ドメインサービスによってできない場合があります。私はstarserverでドメインを取得しておりますが、登録できませんでした。ですのでURLプレフィックスにて「https://pi-product.com/」を入力してサイト登録をしました。
前章にて実施したGoogle Analyticsのスニペットでサイト確認ができます。ほかにもHTMLファイルを配置したり、<head>タグに既定文を挿入したり色々な選択肢があります。
ひとまず、上記が最低限の登録内容です。
コンテンツが充実してきたらGoogle Adseneの登録をするのが良いでしょう。