把分类目录嵌到别人网站：嵌入小部件的性能、收录和三条规矩
把
来问的人通常是这样的：某个协会的官网想加一个「推荐工具」板块，某个博客主想在文章里放一组资源链接，某家公司的内部知识库想带一批常用地址。他们看上的是你整理好的那个分类。
技术上这件事十分钟就能搞定，丢一段嵌入代码过去就行。真正在后面等着的是三件事：它能不能给对面带去内容价值、会不会拖慢对方页面、以及你到底让渡了什么。
图片来源：网络，版权归原作者所有，侵权请联系删除
先把对方的页面当成最差的宿主
你不知道对方的站点有多重。可能它本身已经有七八个第三方脚本，可能它的模板十年没动过。所以设计铁律是：你的部件绝不能成为拖慢对方页面的人。
web.dev 那份「第三方嵌入最佳实践」里的几条建议，挪到这个场景一样适用：
- 脚本排序。对方的第一方正文是主角，你的部件应该在它之后，并且用
async或defer。同步脚本执行时 DOM 构建会停下来，这一点挪位置就能解决。 - 延迟加载。这类部件通常在页面下半部分，给 iframe 加
loading="lazy"，让它靠近可视区时再加载。更省的做法是 facade：先放一个静态外壳，滚动到附近再拉真脚本。 - 尺寸写死。高度自适应会让对方页面抖一下。要么固定高度加内部滚动，要么用 postMessage 协商一次高度，不要让它自由生长。
内容归属：iframe 里的东西不算对方的
这是很多人会想错的一点。通过 iframe 加载的内容，搜索引擎会认为它属于 iframe 自己的地址，而不是嵌入它的那个页面。换句话说，对面那个页面上并没有这些内容。
对提供部件的目录站来说，这其实是好事：内容还是算你的。但要想清楚你要的是什么——如果目标是让对方页面的 SEO 变好，iframe 方案做不到；如果目标是让这批内容能被搜到，那它必须在你自己的域名上有一个独立、可索引的页面。
另一件事也要记住：如果用 JS 动态生成部件内容，它能不能被看到，取决于搜索引擎有没有渲染这个页面。渲染存在延迟，实测口径是 p50 在十秒量级、p90 能到几个小时。指望渲染来解决收录问题，是很不稳的。
三条硬规矩
一、必须有一段 HTML 兜底
不管最终用什么方式加载，都要给一段能直接工作的静态内容。最简版本就是一个列表：
<div class="dir-embed" data-cate="design">
<ol>
<li><a href="https://example-dir.com/item/foo">某某工具 - 一句话说明</a></li>
<li><a href="https://example-dir.com/item/bar">某某素材站 - 一句话说明</a></li>
</ol>
</div>
<script src="https://example-dir.com/embed.js" async defer></script>好处有三个：脚本加载失败时板块依然可用；搜索引擎访问这段 HTML 就能看到真实的链接；对读屏软件也友好。这就是渐进增强——先把能用的部分做出来，脚本只是在它上面做增强。
二、嵌入的内容必须在自己这边有正式页面
某个分类在你的域名上应该有一个正常的分类页，部件只是它的一个「窗口」。窗口底部留一条回到该分类页的普通链接，用真实锚文本（比如「查看更多设计类站点」）。
这样好处是双向的：对方页面即使全部由 JS 渲染，这条链接也是 HTML 里就存在的；而你自己那个分类页则是这批内容真正去重、排名、积累外链的地方。
三、权限最小化，别伸手碰对方
- iframe 加
sandbox，只给确实需要的权限；能不加allow-scripts的场景就别加 - 加
referrerpolicy，按需选择严格版本 - 不读对方页面的 DOM，不改对方的样式，不写不属于自己的 cookie
- 给宿主一个「一键关闭数据回传」的开关；某些合作方所在地区会明确要求这个开关默认关闭
计数：别只看 Referer
想知道谁嵌了你的部件、各带来多少点击，常规做法有两个：
- 嵌入点位 ID：给每个合作方生成一段带 ID 的代码，URL 里带上它。这是最准的做法。
- Referer：省事，但会被 Referrer-Policy 抹掉，也会遇到代理和缓存页面。
建议两者一起用，以 ID 为准、Referer 做校验。注意别为了统计在对方页面里写三方 cookie，这条在大部分地区现在都要单独取得同意。
三个常见坑
- 混合内容。对方站点还没上 HTTPS，或者用了某种形式的改写代理，你的 https 资源会被拦掉。交付文档里要写清楚必须走 https，并在部件里做一次协议自检提示。
- 被反向代理整页缓存。对方的 CDN 或者中间层把你的响应整页 cache 住了，数据更新半个月看不见。给接口设短 TTL 加
must-revalidate，并在响应里标明数据版本时间。 - 过期条目跟着部件一起扩散。你把已下线的条目删了，但嵌在几百个站点上的静态副本还在。所以条目下架时，部件一侧要有兜底：拿不到数据时展示分类页而不是空白，或者自动 fallback 到同类推荐。
上线前的一张清单
- 静态 HTML 兜底能不能在禁用 JS 的情况下正常打开
- 脚本是不是 async/defer，iframe 是不是 lazy
- 高度固定，或者协商一次后不再变化
- sandbox、referrerpolicy 是否配置
- 底部有没有一条回到自己域名分类页的普通链接
- 计数是否用 ID，有没有在宿主页面写三方 cookie
把部件当成「别人家客厅里的一件家具」来做，标准自然会高一些：不能占太多地方，不能冒烟，主人说搬走的时候要能一次搬干净。