如何阻止搜索引擎索引Gatsby/React中的特定StaticImage？

方法1：优化alt属性（基础方案） #

搜索引擎会优先识别图片的alt属性，若图片是纯装饰性图标，设置alt=""（空值），部分搜索引擎会将其判定为非内容图片，降低索引优先级：

<StaticImage src="../img/stopcrawl/notforgoogle.jpg" alt="" />

如果需要兼顾无障碍访问，可搭配aria-hidden="true"：

<StaticImage src="../img/stopcrawl/notforgoogle.jpg" alt="" aria-hidden="true" />

方法2：页面级robots元标签控制 #

在包含目标图片的页面头部，添加robots元标签，通过noimageindex指令禁止搜索引擎索引当前页面的所有图片：

import { Helmet } from "react-helmet"

// 页面组件内添加
<Helmet>
  <meta name="robots" content="noimageindex" />
</Helmet>

注意：此方法会排除整个页面的图片，仅适用于页面内所有图片都无需索引的场景。

方法3：自定义标识+Gatsby Node API生成精准robots.txt规则 #

针对Gatsby构建后图片路径混乱的问题，可通过自定义标识定位目标图片，再自动生成robots.txt的排除规则：

1. 给需要排除的StaticImage添加自定义属性：

<StaticImage src="../img/stopcrawl/notforgoogle.jpg" data-no-index="true" />

2. 在gatsby-node.js中编写构建后处理脚本，遍历页面HTML找到标识图片，生成对应Disallow规则：

const fs = require('fs');
const path = require('path');
const cheerio = require('cheerio');

exports.onPostBuild = async ({ graphql }) => {
  const result = await graphql(`
    query {
      allSitePage {
        nodes {
          path
        }
      }
    }
  `);

  result.data.allSitePage.nodes.forEach(page => {
    const htmlPath = path.join(__dirname, 'public', page.path, 'index.html');
    if (fs.existsSync(htmlPath)) {
      const html = fs.readFileSync(htmlPath, 'utf8');
      const $ = cheerio.load(html);
      
      $('img[data-no-index="true"]').each((i, el) => {
        const imgSrc = $(el).attr('src');
        if (imgSrc) {
          const robotsTxtPath = path.join(__dirname, 'public', 'robots.txt');
          let robotsContent = fs.existsSync(robotsTxtPath) ? fs.readFileSync(robotsTxtPath, 'utf8') : 'User-agent: *\n';
          if (!robotsContent.includes(`Disallow: ${imgSrc}`)) {
            robotsContent += `Disallow: ${imgSrc}\n`;
            fs.writeFileSync(robotsTxtPath, robotsContent);
          }
        }
      });
    }
  });
};

此方法可精准定位单张图片，解决路径混乱导致的robots.txt规则失效问题。

方法4：统一图片命名+插件自动生成规则 #

如果能给需要排除的图片统一命名（比如前缀no-index-），可借助插件自动生成排除规则：

1. 安装插件：

npm install gatsby-plugin-robots-txt

2. 在gatsby-config.js中配置：

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-robots-txt',
      options: {
        disallow: ['/static/*no-index-*'],
      },
    },
  ],
};

将目标图片命名为no-index-notforgoogle.jpg，构建时插件会自动在robots.txt中添加对应Disallow规则。

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