Bloggerをホームページ風にする

Bloggerは基本的にはブログを書くためのものなので、トップページからブログになってしまう。
設定を少し変えるとブログ仕様から、ホームページ仕様に変更できる。

Bloggerをホームページ風にする手順

1. ホームページを「ページ」で作成（ページのタイトルに一工夫入れるとより良い）
2. トップディレクトリを、作成したホームページにリダイレクト
3. ブログにアクセスするためのナビゲーションを作成する
4. robots.txtの対応

※ BloggerのURLが「https://△△△△.□□□□.○○○/」だと仮定して說明。

ホームページにする「ページ」を作成

メニューから「ページ」を選び、ホームページにする内容を作成する。

その際、一時的にページタイトルを「index」などにして保存すると見た目がよい。

ページタイトルは、最初に保存されたときに半角アルファベットだけであれば、その名前のページが作成される。

これを利用して、ページタイトルを「index」にしておくと「index.html」という名前になり、トップページっぽい名前になる。

一旦保存した後は、ページタイトルを何に変えても最初に保存した時の名前が残るので、好みのページタイトルをつける。

後でリダイレクト設定に使用するので、このページの実際のURLを確認しておく。https://△△△△.□□□□.○○○/p/☆☆☆☆.html のようなURLになっているはず。

もし、最初につけたページタイトルが「index」という名前であれば、 https://△△△△.□□□□.○○○/p/index.html となる。

トップディレクトリを、作成したホームページにリダイレクトする

以前はリダイレクトする機能がなったようで、様々な手法を考えて来られたようだが、今はリダイレクトすることで容易にトップページを変更できる。

［設定］→［検索設定］の中に「エラーとリダイレクト」という設定があり、その中の「カスタム リダイレクト」を使用する。上記のスナップショットはすでにリダイレクトの設定をした例。

設定前は、「アイテムなし　編集」という表示になっているので、「編集」をクリック。

画面表示が崩れるようだが、「リダイレクト元」「リダイレクト先」というテキストボックスが作成される。そこに以下のように入力する。

リダイレクト元：「/」 （半角のスラッシュ）

リダイレクト先：「/p/☆☆☆☆.html」（上で確認したホームページのURL）

「永続的」のチェックボックスは、入れても入れなくても良いが、入れなくて良い（＝永続的ではない）と思う。

入力後、「保存」という文字列をクリックし、「変更を保存」のオレンジ色のボタンをクリックする。

これで、「https://△△△△.□□□□.○○○/」にアクセスすると、先ほど作成したホームページが表示される。

裏の動き。「https://△△△△.□□□□.○○○/」にアクセスすると、上で設定したリダイレクトの機能が働き、Webサーバはブラウザに対して「アクセスしたページはリダイレクト先で設定したページに移動しました」というメッセージを送る。ブラウザは、移動になったことを理解して、リダイレクト先のページにアクセスするので、ブラウザ上にはホームページが表示される。

ブログにアクセスするためのナビゲーションを作成する

ただ、このままだとブログ記事を作っても、常に先程のホームページが表示されるため、ブログ記事を見ることができない。

そこで、ブログ記事を表示させるために、ブログ記事のページを作成する。

［レイアウト］メニューの中に、「ページ」ガジェットがある（なければ、「ガジェットを追加」から追加する）ので、編集する。

「ページ」ガジェットは、Webサイトの画面上部によくあるメニューバーを作成する機能を提供している。

何も変更を加えていなければ、上のような設定画面が表示される。「ホーム」は上記で設定したホームページが表示されるので、そのままにする。

左の中程に「外部リンクを追加」というリンクがあるので、クリック。

ページタイトルは、メニューバーに表示したい名前をつけるので、ここでは「ブログ」とした。

ウェブアドレス（URL）は「/search/label/?max-results=7」とする。最後の「7」は、一度に表示させるブログ記事の数を指定する。この例では、7つの記事を1画面に表示させることになる。

様々なところでこのテクニックを紹介しているが、多くは「/search/label/」を指定させている。この場合、ブログページにアクセスすると、公開したすべてのブログ記事を表示させるため記事が多い場合は表示に時間がかかる。そのため、1画面の表示件数を制限する設定を入れる。

「リンクを保存」をクリックして、前の画面（「ページ」ガジェットの設定画面）にて「保存」をクリックする。

これで、「https://△△△△.□□□□.○○○/」にアクセスすると、ホームページが表示され、その上部にはメニューバーがあり、そこからブログ記事にアクセスできるようになった。

robots.txtの対応

以上で目標は達成できているが、検索サイトなどのクローラが記事を見てくれないと思われる。
これは、blogger標準のrobots.txtは「/search」以下のクロールを許可していないが、上記の方法でブログ記事にアクセスするには[/search/label/」を使っているためである。

標準のrobots.txt
（https://<自サイトのURL＞/robots.txt でアクセスできる。
　例： https://mocomoco.money/robots.txt）


User-agent: Mediapartners-Google
Disallow:

User-agent: *
Disallow: /search
Allow: /

Sitemap: https://www.mocomoco.money/sitemap.xml

この状態の時、google search consoleでは、下記のような警告が出ていた。

まさに、robots.txtの設定通りの挙動をしている。

「/search」はブロックしたまま「/search/label/」のみを許可する設定を入れる。
変更は、「設定」→「検索設定」にある「独自のrobots.txt」に行う。
「独自のrobots.txt」の右の方にある「編集」をクリック。

「独自のrobots.txtのコンテンツを有効にしますか？」を「はい」にして、変更後のrobots.txtの内容を入れて、「変更を保存」をクリックする。

変更後のrobots.txtの内容は、以下の通り。

User-agent: Mediapartners-Google
Disallow:

User-agent: *
Disallow: /search
Allow: /
Allow: /search/label/

Sitemap: https://www.mocomoco.money/sitemap.xml

変更が反映されるまでしばらく待ち、公開されているrobots.txt（https://<自サイトのURL＞/robots.txt）にアクセスし、更新されていることを確認する。