技术岗简历应只放GitHub、LinkedIn及专业博客等真实活跃账号，链接须加rel="noopener noreferrer"防护安全风险，图标用SVG内嵌防加载失败，邮箱用data属性+JS动态显示防爬虫。
直接用 HTML 写带社交账号的简历，关键不是“怎么加链接”，而是“加哪些账号、怎么加才不被爬虫滥用、怎么让招聘方一眼看懂又方便点击”。
哪些社交账号该放，哪些不该放
只放真实在用、内容专业、更新较勤的账号。GitHub 和 LinkedIn 几乎是技术岗刚需；个人博客（如用 Hugo/Jekyll 搭建）可替代博客链接；Twitter/X 除非你常发技术观点，否则慎放；微信公众号若无高质量原创内容，不如不放；QQ、豆瓣、知乎私密回答 这类默认不建议——招聘方打不开、看不懂、或看到无关内容反而减分。
务必检查每个链接是否能直接打开、是否登录态正常、主页是否无敏感/娱乐化信息。曾有候选人因 LinkedIn 主页显示“Currently seeking opportunities”被误判为在职状态不稳定，其实只是模板没改。
href 链接写法必须加 rel="noopener noreferrer"
所有社交链接都用 <a></a> 标签，但别只写 href="https://github.com/xxx"。不加 rel 属性，点击后新标签页打开时，目标页可通过 window.opener 访问你的简历页，存在安全风险，且部分浏览器（如 Safari）会因此降权页面性能。
立即学习“前端免费学习笔记（深入）”；
正确写法：
<a href="https://github.com/yourname" target="_blank" rel="noopener noreferrer">GitHub</a>
注意：target="_blank" 必须和 rel="noopener noreferrer" 同时出现，缺一不可；noreferrer 还能防止 referral 泄露来源，避免被误标为“垃圾流量”。
图标用 SVG 行内嵌入，别用第三方 CDN 或字体图标
很多教程推荐用 Font Awesome 或 iconfont.cn，但这类服务可能加载失败、跨域报错、或触发企业防火墙拦截，导致图标变方块或空白。更稳的方式是把 GitHub、LinkedIn 等平台官方 SVG 图标复制进 HTML，用 <svg></svg> 行内嵌入。
例如 GitHub 图标（精简版）：
<a href="https://github.com/yourname" target="_blank" rel="noopener noreferrer">
<svg viewBox="0 0 16 16" width="16" height="16">
<path fill="#24292e" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.37 0-.19-.01-.82-.01-1.49 0-.89.01-1.48.01-1.49 0-.2-.15-.43-.55-.37A8.31 8.31 0 0 1 8 14.02c.68 0 1.23.56 1.23 1.23 0 .67.01 1.29.01 1.48 0 .2-.15.43-.55.37A8.31 8.31 0 0 1 8 14.02c-.68 0-1.23-.56-1.23-1.23 0-.67-.01-1.29-.01-1.48 0-.2.15-.43.55-.37.4.07.55.17.55.37 0 .2-.01.82-.01 1.49 0 .67.01 1.29.01 1.48 0 .2-.15.43-.55.37A8.31 8.31 0 0 1 8 14.02c.68 0 1.23.56 1.23 1.23 0 .67.01 1.29.01 1.48 0 .2-.15.43-.55.37A8.31 8.31 0 0 1 8 14.02z"/>
</svg>
</a>
优点：零依赖、可配色（改 fill）、缩放无损、SEO 友好；缺点：多几个平台就得贴多段 SVG，但比加载失败强得多。
邮箱别明文写，但别过度混淆
写 yourname@gmail.com 容易被爬虫抓走群发垃圾邮件；但写成 yourname [at] gmail [dot] com 或图片，又影响 HR 一键复制。折中方案：用 JavaScript 动态拼接，且只在用户交互（如 hover 或 click）后显示完整邮箱。
简单可靠的做法：
- HTML 中放一个带
data-email属性的占位元素：<span class="email-placeholder" data-email="yourname@gmail.com">[email]</span> - 加几行 JS（无需框架）：监听点击，把
data-email值赋给textContent，并自动选中 - 同时加 CSS
user-select: none防止误选乱码
这样既防基础爬虫，又不牺牲可用性。注意：不要用 Base64 编码或复杂加密，HR 不会解码，而且现代爬虫早就能执行简单 JS。
最常被忽略的一点：所有社交链接的文案必须明确平台名，不能只靠图标——屏幕阅读器、纯文本渲染、或图标加载失败时，只有文字能传达信息。哪怕加个 aria-label="GitHub 个人主页"，也比留白强。
