Javascriptを多用したサイトや、ノーコードツールで制作したサイトがGoogle Search ConsoleではGoogleにインデックスされましたが、Bing Webmaster Toolsに登録してもBingにインデックスできないことが多々あります。Bingでは最初は空ページで、Javascriptが後からコンテンツを読み込んでくるページは認識しないみたいです。そこで、事前にレンダリングされた静的ページのキャッシュを用意し、検索エンジンのクローラーからのアクセスはそのキャッシュに誘導してページコンテンツを認識させるといった方法があったのでメモ。

目的

• クライアントサイドレンダリング（CSR）で動作するJavaScriptサイトを Google や Bing にインデックスさせる
• クローラー（bot）にだけ静的HTMLを返す仕組みを構築する

必要なもの（すべて無料で始められます）

• Cloudflare アカウント
• GitHub アカウント
• Prerender.io アカウント
• 対象ドメインのDNSを Cloudflare DNS に変更すること
• コマンド実行環境（Windows: PowerShell / macOS/Linux: ターミナル）

ざっくりとした仕組みの流れ

Prerender.ioで静的ページのキャッシュを作成し、CloudFlareのWorkersを使って検索ボットのアクセスはPrerender.ioのキャッシュに誘導し、それ以外のアクセスは通常サイトが配信されるようにします。これを行うためにはCloudFlare Workersに登録するスクリプトをGitHubまたはGitLabに置き、それを読み込ませます。

手順

1. Prerender.io に登録し、APIトークンを取得
2. Cloudflare にドメインを追加（ネームサーバー変更）
3. GitHub に新しいリポジトリを作成（例: cf-prerender-multisite）
4. 以下の 2 ファイルを作成して GitHub に push

src/index.js

export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url)
    const pathname = url.pathname
    const userAgent = request.headers.get("user-agent") || ""
    const isBot = /bot|crawl|spider|slurp|bing/i.test(userAgent)

    // .xml や .txt で終わるパスは除外（Prerender.ioを経由させない）
    const isStaticFile = pathname.endsWith(".xml") || pathname.endsWith(".txt")
    if (isStaticFile) {
      return fetch(request)
    }

    const token = "YOUR_API_TOKEN"

    if (isBot) {
      const prerenderUrl = `https://service.prerender.io/https://${url.hostname}${url.pathname}${url.search}`
      return fetch(prerenderUrl, {
        headers: {
          'X-Prerender-Token': token
        }
      })
    }

    return fetch(request)
  }
}

wrangler.toml

name = "prerender-multisite"
main = "src/index.js"
compatibility_date = "2024-04-15"

[[routes]]
pattern = "example.com/*"
zone_name = "example.com"
  

5. Cloudflare Pages に GitHub を接続して「空のWorker」としてデプロイ
6. Cloudflare DNS の A レコードで ☁️（プロキシ）を ON にする
7. Cloudflare の「SSL/TLS」を フル（Strict） に変更（リダイレクトループ回避）
8. Cloudflare の対象ドメイン選択した中の Wokers＆Pages の編集で「リクエスト制限失敗モード」と「失敗オープン (続行)」に変更（504エラー対応）
9. Cloudflare Caching 構成 で Crawler Hints を ON にする（Index Now 対応）

デバッグ方法（PowerShell / ターミナルで実行）

• Googlebot になりすましてHTMLを取得

curl -A "Googlebot" https://example.com/
    

• ヘッダーのみを取得してステータス確認

curl -A "Googlebot" -I https://example.com/
    

• Prerender.io に直接アクセスしてHTMLを確認

curl -H "X-Prerender-Token: YOUR_API_TOKEN" "https://service.prerender.io/https://example.com/"
    

• Cloudflare ダッシュボードの「Workerログ」でリクエスト確認
• Chromeのデベロッパーツールで User-Agent を Googlebot に変更して動作確認
• Prerender.io Dashboard の「Recently Cached Pages」を確認

成功時のレスポンス例

HTTP/1.1 200 OK
Server: cloudflare
X-Prerender-Requestid: xxxxxxxx
X-Prerender-External-Lb: haproxy-private-cache
  

まとめ

• Cloudflare Worker + Prerender.io の組み合わせで SEO に強い構成が実現
• 通常ユーザーには動的なSTUDIOサイト、Botには高速なHTMLを返す
• すべて無料で始められ、Cloudflare上で完結するため保守も簡単

ウェブサイト制作のノーコードプラットホーム「STUDIO」で作成したサイトをBingウェブマスターツールに登録しても検索エンジンBingにインデックスされなくなりました。

以前はヘルプデスクに日本語から英文に翻訳した文章で問い合わせしたら、2023年頃は手動で解決してくれていたのですが、2024年のいつ頃からか対応してくれなくなりました。

発見されましたがクロールされていません

URL は Bing に表示できません

検査された URL は Bing に認識されていますが、いくつかの問題があるためにインデックス作成が妨げられています。Bing Web マスター ガイドラインに従って、インデックス作成の機会を増やすことを推奨します。

以前は以下のページにある方法でBing Webマスターサポートに問い合わせして解決できていました。

• https://qwerty.work/blog/2022/05/bing-webmaster-tools-request-index.php

インデックスされない理由

Bing Webmaster Toolsには以下の理由が表示されていました。

• H1タグが見当らない
• DESCRIPTIONが見当たらない

STUDIOで制作したどのサイトもBing WebmasterToolsに登録すると、このエラーが出ます。もちろん制作時にH1やサイトの概要は設定していますが、どうやらここが問題ではなさそうです。

原因はJavascriptによる仕組？

何がいけないのか調べたところ、Javascriptにより動的に吐き出しているサイトがダメで、STUDIOの仕組み上に問題があるっぽいです。

このことについてはBingのヘルプにも説明があります。

JavaScript: Bing はJavaScript を処理できますが、HTTP リクエスト数を最小限に抑えながら大規模な JavaScript を処理するには限界があります。Bing では、 Bingbot などの特定のユーザーエージェント、特に大規模なウェブサイトでは、クライアント側でレンダリングされたコンテンツと事前レンダリングされたコンテンツを切り替えるために、 ダイナミック レンダリングを推奨しています。

（参考 https://www.bing.com/webmasters/help/webmasters-guidelines-30fba23a

STUDIO Communityでも触れられていました。

• https://community-ja.studio.design/c/publish/bing-seo-6ae05b
• https://community-ja.studio.design/c/feedback/bing-seo

動的サイトといってもPHPのようにサーバーサイドでHTMLを吐き出すものはいいのですが、Javascriptでもクライアントサイドで動くものがダメみたいです。

Bingのシェアは10%台で低いとは言え、クライアントから「検索に結果にヒットしない」と言われると困ります。

そろそろ無視できないレベルにきていますので、BingもSTUDIOも早く対応して欲しいです。

利用頻度の高いファイルを複数のWindowsパソコンで自宅でも外出先で使用するのにOneDriveは便利でいいのですが、有料プランへ誘導する警告画面が鬱陶しいです。課金してまで使用することは考えていません。「同じような仕組みを構築できないかな？」と考えてたとき、レンタルサーバーのWebDAVやクラウドストレージサービスとフリーソフトで構築できたのでメモ。

構築する環境の概要

Windows上で任意の場所に作成したローカルフォルダと、ネットワークドライブとして割り当てたWebDAVフォルダを監視し、ファイルやフォルダに変化があれば、リアルタイムに同期を実行する環境を作ります。

準備するもの

画像も簡単に入力ができる商品管理的なデータベースが欲しいという要望があり、ファイルメーカーでサンプル的に作りました。しかし、横向きの画像がどうしても縦になると依頼主はすでに100件以上登録済みで、そのほとんどが縦向きになっており困った様子。

原因はカメラにあるようで、何の機種かわかりませんが恐らくスマホで、横向きで撮影してもEXIF情報に登録された向きが90度横になるみたいで、Windows上の表示は横向きなのですが、ファイルメーカーのオブジェクトフィールにピクチャ挿入してみるとEXIF情報通り90度横に表示されてしまいます。

解決方法として「縮小専用」などのフリーソフトでリサイズするついでにEXIF情報を削除する方法が思いついたので、縮小専用でリサイズした画像を挿入したところ横向きで登録できました。EXIF情報を削除すれば解決できることが分かったのですが、依頼主にその方法を提案しましたが、100以上ある画像を変換して再登録するのは嫌だとのこと...。

他に思いつく解決策はファイルメーカー内で画像操作を行うプラグインを使うことですが、すぐに試すことができなかったり、高額だったり、バージョンが古くて対応していなかったりと現実味に欠けており、どれもピンときませんでした。

目についたプラグイン

• Factory's FileMaker Plug-in 2
• ScriptMakerPS

プラグイン不要でPowerShellと連携できる方法があった

以下のサイトがヒントだったのですが、Windows上で動いているFileMakerであればスクリプトからPowerShellにコマンドを送信し、PowerShell上で画像の回転、EXIF情報の削除を行うことができることを発見しました。ちなみに、環境はWindows11とFileMaker12です。

ただ、上記サイトのまま使用してもPowerShellに値を渡せなかったり、スクリプト内で画像のエクスポート・インポートがうまくいきませんでした。これはそれぞれでパスの書き方が原因で、以下のように改造したらうまくいきました。

現在のブラウザ表示領域

これはミックスホストのサーバーがLightspeedだから？？

いろいろ試したこと

webclientの再起動

Windowsのサービス「webclient」を再起動を以下のコマンドで行います。試しましたがダメでした。

net stop webclient
net start webclient

サービス「webclient」を自動実行に変更

以下のページに、同様の症状と回避方法が掲載されていました。試しましたが関係ありませんでした。

レジストリを変更してみる

以下のレジストリを「1」から「2」に変更し、パソコンを再起動しましたが、改善されませんでした。

HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\WebClient\Parameters

ここにある

BasicAuthLevel

の値を「2」に変更する。

もしかしてExplorerから接続しないほうがよい？

以下の参考ページは次の記載がありました。WindowsOSではExplorerより、WebDAVクライアントソフトを使うほうがいいみたいです。こりゃ困ったな。

Windows OS では、OS 側の WebDAV の実装が不十分なため、操作が不安定になる場合があります。また、異なるOSや異なるクライアントソフトでファイル共有を行うと、OSやクライアントソフトの相性により不具合が発生する可能性があります。複数の端末でファイル共有を行う場合は、共通のWebDAVクライアントソフトを利用することをおすすめしています。

Windowsでwebclientは非推奨になったらしい

2023年11月にwebclientサービスは使えるけど、非推奨になったらしい。

CarotDAVのDAV Server機能が使えるかも？

フリーソフトのCarotDAVにあるDAVサーバー機能で、このDAVサーバーを経由してエクスプローラーから接続すれば解決かも？CarotDAVに登録してあるWEBドライブをまとめてエクスプローラーから操作できるようです。

結論から言うと、ドメイン接続の実行は権限が「サイトオーナー」じゃなかったら48時間待っても失敗し、エラー画面が表示されます。

今回、お客様のサイトをWIXで制作し、既に取得済みのドメインに、ポインティング方式で「管理者（共同所有者）」の権限でドメイン接続の実行を３回（１週間）くらい行ない、何度接続にチャレンジしても、「ドメインチェック」のステータスから進むことができず、ドメイン接続に失敗しました。

お客様の環境が、別に独自ドメインで運用しているメールサーバーがあり、ポインティング方式を選択しました。DNSレコードの設定を見直したり、SSLサーバー証明書関連を調べたりしましたが、時間を浪費するばかりで解決の糸口が見当たりませんでした。そこで、WIXのカスタマーケアに問い合わせをしたところ、権限の問題であることを教えてもらえ、「サイトオーナー」権限のあるユーザーからドメイン接続を行ったところ、あっさり接続できました。

各権限の違い

管理者（共同所有者）では独自ドメインの接続ができないことは、以下のWIXのサポートサイトにも記載がありました。

以下のページでは「共同管理者が所有するドメインとの接続」ができないとの記載があります。私のケースですと、サイトオーナーとは別に、私を含めて「管理者（共同所有者）」が２名いました。「管理者（共同所有者）」が１人ならドメイン接続が成功したのかは、わかりません。

まとめ

解決できたので良かったのですが、ドメイン接続の権限がないのなら、設定できないようにするとか、「あなたには権限がありません」とか、もっとわかりやすくして欲しいなと感じました。てっきり、DNSレコードの設定が悪いのかな？それとも、バックグラウンドでSSLサーバー証明書の発行が失敗しているのかな？とか、いろいろ調べるなど、かなり調査で時間を浪費しました。

普通のJavascriptとHTML/CSSを出力してくれる。

Vue.jsをベースにしたサンプル

ヘッドレスCMSってどんなもの？

ヘッドレスCMSは通常のCMSとは異なり、フロントエンドとバックエンドが完全に切り離されていて、CMSの仕組みにとらわれず開発できます。また、表示速度が速い、CMS機能を後付けできるといったメリットがあります。

Wordpressなど、サーバー側で動的に処理して表示させるものとは違い、動的なページを予め静的なページで吐き出します。静的なサイトの読み込みとなるため表示が高速になるそうです。更にCDNにキャッシュさせて配信すると更に速くなるかも？解釈が違っていたらごめんなさい。

その中でおすすめの構成が以下のページに書かれていました。

何が必要？

ヘッドレスCMSを制作するには、幾つかの方法と組合せがあるようですが、「ジャムスタック構成」（Jamstack構成）と呼ばれるものが良いみたいです。

使用するのは以下の3つが相性がいいとのこと。

• SSG（静的サイトジェネレーター）... Gatsby.js
• ホスティングサービス ... Cloudflare Pages
• ヘッドレスCMS ... microCMS

Gatsby.jsはReactで作られた静的サイトジェネレーター。

STUDIOのカルーセルの写真入替の動きに疑問がでてきました。画像が入れ替わる際に画面がちらついて、シックで上品、落ち着いた雰囲気のサイトを作るときにチラつきが気になります。

• スライドの方向は左→右の一択しかないのかな？
• カクカクする挙動を滑らかでスムーズな動きにできない？

そこで、ふわっとフェードイン・フェードアウトで入れえる方法がありました。ただ、この通りにしてもうまくいきませんでしたが、今後の参考としてメモしておきます。

シングルページ・ランディングページ（LP）向け

Minimal Cafe

シングルページだけどお知らせを投稿する機能が欲しいといったシンプルなサイト向け

価格：9,999円（税込み）

My Song

シングルページだけどお知らせを投稿する機能が欲しいといったシンプルなサイト向け

価格：9,999円（税込み）

レンタルサーバーはミックスホストを利用しています。このレンタルサーバー上で、複数のサイトを公開しています。その中で、いくつか表示を高速化させる目的で無料で使えるCDNのCloudFlareを使用しています。CloudFlareを使用しているドメインを対象にミックスホストのコントールパネルであるcPanelから、以下のメールが届きました。

DNS DCV: No local authority: "cpanel.example.com"; HTTP DCV: "cpanel.example.com" does not resolve to any IP addresses on the internet.

DNS DCV: ローカルオーソリティがありません： "cpanel.example.com"; HTTP DCV: "cpanel.example.com" は、インターネット上のどの IP アドレスにも解決しません。

内容としては、AutoSSLでサーバー証明書を更新するために必要なドメイン認証ができなかったということでした。

この時点で、何かしらの設定をcPanel側かCloudFlare側のどちらにすればいいのか？初めてのことでチンプンカンプンでした。しかし、このまま放っておくと、サーバー証明書の期限が切れて面倒なことになると嫌だなと対処することにしました。

一時的にCloudFlareを無効化してからAutoSSLを更新

海外のサイトにヒントがありました。

日本語訳にしたこのページによると、この問題を解決するには、以下の4つが候補とありました。

1. スタンドアロンのSSL証明書を購入する
2. cPanelのAutoSSLをオフにして、CloudflareのSSLのみを使う
3. CloudflareのSSLはなしで、cPanelのAutoSSLのみを使う
4. Cloudflareを一時的に停止してから、AutoSSLの証明書を更新する

私はどちらのSSLも有効なまま使用したいので、迷わず4番を実行することにしました。

手順

1.CloudFlareにログインして、対象のドメインを選択

2.「Overview」メニューを選択し、ページ右下の「Advanced Action」にある「Pause Cloudflare on Site」をクリック

3.「Confirm」をクリック

4.MixhostのcPanelの「SSL/TLS Status」を開き、「Run AutoSSL」ボタンをクリック

5.処理が終わるまで数分待ちます

6.するとエラーが消え更新完了となります

7.最後に、Cloudflareに戻り、「Overview」メニューを選択し、ページ右下の「Advanced Action」にある「Enable Cloudflare on Site」をクリックして有効化

以上。

エラーが残ったままになる場合

cPanelの「SSL/TLS Status」の画面でエラーが一部残ったままになる場合は、CloudflareのDNSにCNAMEまたはAレコードの登録が不足しているのが原因かと思われます。特にサブドメインのURLです。私はこのパターンでした。以下のようにレコードを追加して、再度「Run AutoSSL」を行ってみてください。解消されるはずです。

CNAMEを追加した例

CloudflareのDNS Recordsにサブドメイン名とFQDN（対象ドメイン）を追加

Aレコードを追加した例

CloudflareのDNS Recordsにサブドメイン名とレンタルサーバー（Mixhost）のIPアドレスを追加

この事に繋がるヒントが以下のページにありました。

ページに設置したお問い合わせフォームの入力内容をチェックするバリデーションをVue.jsで作ってみたのですが、入力していないのにエラーを表示する仕様になってしまいました。ページを表示していきなり赤文字のエラーが表示されていると、正直気分が悪いです。

初回表示時は発火させない方法

バリデーションはcomputed（算出プロパティ）で実行するようにしています。methodsにカウンターを作り、フォームのinputタグにv-on.click="countUp"またはv-on.change="countUp"を加えて、フォームに入力があるとカウンターが0以上になり、computedの命令が実行されるうにIF文を入れることで解決できました。

例

HTML部分

@changeはv-on.changeと同じ意味です。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <input type="text" v-model="message" @change="countUp"/>  
  <div>カウント:{{count}}</div>  
  <div>エラー:{{nameCheck}}</div>  
</div>

JS部分

var app = new Vue({
  el: "#app",
  data:{
    count: 0,
  },
  methods: {
    countUp: function() {
      this.count += 1
    },
  },
  computed: {
    nameCheck() {
      if(this.count > 0) {
        if(!this.message){  
          return "入力がありません";
        }
      } 
    }
  },
})

デモ

入力欄の値を変更してフォーカスを外すとカウントの数が増えます。入力欄に何か文字があるとエラーが表示されませんが、入力欄を空にするとエラーが表示されます。

以下のソースで現在の日時を取得すると、9時間前の時間が表示されることがありました。これを修正する方法をメモ。

date( "Y/m/d (D) H:i:s", time() )

上記を実行した結果↓ これが9時間前の時間だったらこのページを公開しているレンタルサーバーのタイムゾーンがずれていることになります。

現在のデフォルトタイムゾーンは以下のコードで取得できます。これで結果が「Asia/Tokyo」ではなく、「UTC」と返ってきた場合はタイムゾーンが設定されていないことになり、日本（東京）はUTC（協定世界時）から+9時間の地域なので、タイムゾーンが設定されていないため-9時間のズレを発生させている原因になっていると思います。

echo date_default_timezone_get();

タイムゾーンの設定方法

php.iniを設定できるとき

WEBサーバのphp.iniを編集することができるときは、date.timezoneの設定を以下のようにします。

date.timezone = Asia/Tokyo

PHPのコード上で設定したいとき

レンタルサーバーの制限でphp.iniを編集できない場合は、PHPのソースに以下のコードを入れてやればOKです。

date_default_timezone_set('Asia/Tokyo');

設定のサンプルソース

例1

デフォルトタイムゾーンがAsia/Tokyoではないときにdate_default_timezone_set('Asia/Tokyo');を実行。

if(strcmp( date_default_timezone_get(), 'Asia/Tokyo' )) {
    date_default_timezone_set('Asia/Tokyo');
}
echo date("Y-m-d H:i:s");

例2

例1と同じでIF文だけで書く方法。

if(date_default_timezone_get() != "Asia/Tokyo"){
    date_default_timezone_set("Asia/Tokyo");
}
echo date("Y-m-d H:i:s");

例3

デフォルトタイムゾーンとphp.iniのdate.timezoneをstrcmpで比較して一致しないときはdate_default_timezone_set('Asia/Tokyo');を実行。

if(strcmp( date_default_timezone_get(), ini_get('date.timezone')) ) {
    date_default_timezone_set('Asia/Tokyo');
}
echo date("Y-m-d H:i:s");