如何在AMP页面区分人类用户与爬虫，仅向人类展示广告横幅？

Got it, let's tackle this AMP-specific problem since you can't use regular custom JS. Your caching concern is totally valid—you don't want crawlers poisoning the cache with ad-free pages for human users. Here are two solid client-side approaches that work within AMP's constraints:

1. Use amp-bind + amp-analytics (No Custom JS Required) #

This leverages AMP's built-in components to detect crawlers via User-Agent and conditionally hide ads.

First, add the required components to your page head:

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

Next, set up amp-analytics to capture the User-Agent and store it in AMP's state system:

<amp-analytics>
  <script type="application/json">
    {
      "triggers": {
        "captureUA": {
          "on": "visible",
          "state": {
            "userAgent": "${userAgent}"
          }
        }
      }
    }
  </script>
</amp-analytics>

Define an initial state to track if the visitor is a crawler:

<amp-state id="pageState">
  <script type="application/json">
    {
      "isCrawler": false
    }
  </script>
</amp-state>

Finally, modify your amp-ad component to hide itself if a crawler is detected. We'll use amp-bind to run a regex check on the stored User-Agent:

<amp-ad
  width="300"
  height="250"
  type="your-ad-network"
  data-ad-client="your-client-id"
  [hidden]="pageState.userAgent.match(/bot|crawler|spider|scraper|googlebot|bingbot|slurp/i) !== null"
  on="visible:AMP.setState({ isCrawler: pageState.userAgent.match(/bot|crawler|spider|scraper|googlebot|bingbot|slurp/i) !== null })"
>
</amp-ad>

Pros: Uses native AMP tools, no custom JS to maintain.
Cons: Regex logic is embedded in the template, so updating crawler patterns requires editing the HTML directly.

2. Use amp-script (Flexible, Close to Your Non-AMP Implementation) #

If you want more control over the crawler detection logic (matching your existing non-AMP code), amp-script lets you run sandboxed custom JS in AMP pages.

First, add the amp-script component to your head:

<script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>

Then, add an inline script block (or reference an external script) to detect crawlers and hide ads:

<amp-script layout="container" script="crawler-detection">
  <script type="text/plain" target="amp-script" id="crawler-detection">
    // Reuse your existing crawler regex here
    const crawlerPattern = /bot|crawler|spider|scraper|curl|wget|googlebot|bingbot|slurp|yahoo/i;
    const isCrawler = crawlerPattern.test(navigator.userAgent);

    // Hide all ad elements if crawler is detected
    document.querySelectorAll('amp-ad').forEach(ad => {
      ad.hidden = isCrawler;
    });
  </script>
</amp-script>

Make sure your amp-ad components are set to show by default (no hidden attribute initially) so human users see ads even if the script loads slightly delayed.

Pros: Matches your existing non-AMP logic, easy to update crawler patterns, more flexible for edge cases.
Cons: Must adhere to AMP's amp-script rules (script size <150KB, no restricted APIs, etc.)—but UA detection is well within these limits.

Key Notes #

• Test with common crawler UAs (Googlebot, Bingbot, etc.) to ensure detection works correctly.
• Both approaches keep the ad markup in the cached page, so human users never get stuck with an ad-free version from the cache—exactly what you need.

内容的提问来源于stack exchange，提问作者Oleksii Khodakivskyi