如何在index.html里添加友链

作者：袖梨 2026-07-27

友情链接HTML代码应直接写在index.html的<body>内容末尾、</body>之前，推荐用<section id="friends">等语义化容器包裹，内含带rel="noopener noreferrer"的<a>标签，不可置于<head>或<script>中。

友链 HTML 代码直接写在 `index.html` 的哪个位置？

友链本质就是一组带文字和跳转链接的 <a> 标签，通常放在页面中相对固定、语义清晰的位置，比如页脚（<footer>）或独立的「友情链接」区块。不要塞进 <head> 或 <script> 里——那不会渲染出可点击的链接。

推荐插在 <body> 内容末尾、</body> 之前，用语义化容器包裹，例如：

<section id="friends"><h3>友情链接</h3><p><a href="<a href="https://www.php.cn/link/b05edd78c294dcf6d960190bf5bde635">https://www.php.cn/link/b05edd78c294dcf6d960190bf5bde635</a>" rel="noopener noreferrer">示例站点</a></p><p><a href="<a href="https://www.php.cn/link/9838dd08963f61611712f456f5bdd255">https://www.php.cn/link/9838dd08963f61611712f456f5bdd255</a>" rel="noopener noreferrer">另一个伙伴</a></p></section>

rel="noopener noreferrer" 必加：防止新窗口打开时泄漏 window.opener 权限，是安全底线
不要用 target="_blank" 单独出现，否则存在安全隐患（尤其在旧版浏览器中）

要不要用 JavaScript 动态加载友链？

一般不用。除非你有明确需求：比如从 JSON 文件批量读取、按条件过滤、或避免 SEO 爬虫看到全部链接。

静态写死更简单可靠，搜索引擎能直接抓取，加载无延迟
动态加载需额外处理：JSON 路径要对（如 ./friends.json），fetch 后得手动拼 DOM，还要考虑加载失败 fallback
如果真要用 JS，别用 document.write() —— 它会清空整个页面；改用 element.innerHTML 或 append()

友链被爬虫收录不了？检查这三点

常见原因不是“加了没用”，而是写法或环境挡住了爬虫：

href 值必须是完整协议地址（https:// 或 http://），不能是 /blog 这样的相对路径（否则爬虫可能解析成当前域名下的子路径）
页面本身没被 robots.txt 屏蔽，且 index.html 可公开访问（比如 GitHub Pages 默认允许，但某些私有仓库设置可能限制）
没在 <meta name="robots" content="noindex"> —— 这个标签会让所有搜索引擎忽略该页，友链自然无效

样式难看、排版混乱怎么办？

友链默认是垂直堆叠的普通段落，想改成横向、网格或带图标，靠 CSS 就够了，无需改 HTML 结构：

立即学习“前端免费学习笔记（深入）”；

给外层容器设 display: flex + flex-wrap: wrap，子 <p> 设 margin: 0 8px 就能横排
每个 <a> 加 text-decoration: none 和 color: #0066cc 统一视觉
图标可用 inline SVG 或字体图标（如 <svg>...</svg> 放在 <a> 开头），别依赖外部 CDN——否则图标不显示时只剩文字，体验断层