我

我的作品集是如何获得 100 分的 SEO 评分的？😲 技巧 #1 不要使用插件 技巧 #2 使用 lang 属性 技巧 #3 对图片使用 alt 属性 技巧 #4 不要阻止它被索引 技巧 #5 为你的链接写描述性文字 技巧 #6 在 <meta> 标签中包含描述 技巧 #7 包含 <title> 标签 技巧 #8 在 <meta> 标签中包含视口

2025-05-25

我的作品集怎么能拿到 100 分的 SEO 分数？😲

提示 #1

不要使用插件

提示 #2

使用lang属性

提示#3

使用alt图像属性

提示#4

不要阻止它索引

提示 #5

为链接撰写描述性文字

提示#6

<meta>在标签中包含描述

提示 #7

包含<title>标签

提示#8

包含viewport在<meta>标签中

你好呀！

您来这里的原因可能是因为您想知道我做了什么才在灯塔上获得了100 的 SEO 分数。

我的投资组合网站的链接位于底部。

我会在这里分享我实现这个目标的所有技巧和窍门！让我们开始吧！🤘

提示 #1

不要使用插件

大多数搜索引擎不会索引依赖浏览器插件（Java/Flash）的内容。基于插件的内容不会显示在搜索结果中，所以最好避免使用！

此外，大多数移动设备不支持插件，这会给移动用户带来不太好的体验。

这篇文章将帮助您将Flash 视频转换为 HTML5 视频

提示 #2

使用lang属性

使用lang属性可以告诉搜索引擎，针对特定语言或地区，应该在搜索结果中显示哪个版本的页面。您应该始终在标签内添加 lang 属性，以声明网页的语言。

<html lang="en">
Enter fullscreen mode Exit fullscreen mode

提示#3

使用alt图像属性

虽然为每张图片设置 alt 属性似乎不是一件重要的事情，但让我告诉你，它确实很重要。

如果由于某种原因，图像无法加载，则替代文本将告诉用户该图像的内容。

确保其简短且具有描述性。

<img src="image.png" alt="logo">
Enter fullscreen mode Exit fullscreen mode

如果图像仅用于装饰并且不提供任何有用的内容，则给它一个空的 alt="" 属性，它将从可访问性树中删除。

<img src="image.png" alt="">
Enter fullscreen mode Exit fullscreen mode

提示#4

不要阻止它索引

搜索引擎只能在搜索结果中显示那些未被明确阻止索引的页面。一些 HTTP 标头和元标记可用于告知爬虫程序该页面不应被索引。

确保您的代码不包含以下任何代码行：

<meta name="robots" content="noindex"/>
X-Robots-Tag: noindex
<meta name="AdsBot-Google" content="noindex"/>
Enter fullscreen mode Exit fullscreen mode

提示 #5

为链接撰写描述性文字

链接文本是超链接中可点击的单词或短语。当链接文本清晰地传达超链接的目标时，用户和搜索引擎都能理解其内容及其与链接页面的关系。

不

<p> To view my projects <a href="projects.html"> click here! </a> </p>
Enter fullscreen mode Exit fullscreen mode

做

<p> View <a href="projects.html"> my projects </a> </p>
Enter fullscreen mode Exit fullscreen mode

提示#6

<meta>在标签中包含描述

这是 SEO 最重要的环节。name 和 content 属性概括了搜索结果中包含的页面内容。精心编写且独特的元描述能够提升页面的相关性，从而增加搜索流量。

<meta name="keyword" content="cmcodes, portfolio, react, react native, javascript, developer">
<meta name="description" content="Here's the portfolio of cmcodes (react & react-native javascript developer).">
<meta name="author" content="cmcodes">
Enter fullscreen mode Exit fullscreen mode

提示 #7

包含<title>标签

这是用户搜索特定术语时首先阅读的内容。确保它与主题相关且引人注目！

<title>cmcodes - React Developer</title>
Enter fullscreen mode Exit fullscreen mode

提示#8

包含viewport在<meta>标签中

许多搜索引擎会根据网页的移动响应能力进行排名。如果没有视口元标记，移动设备会以桌面设备的宽度渲染网页，然后将页面缩小，导致阅读困难。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
Enter fullscreen mode Exit fullscreen mode

感谢您阅读到这里！😄

希望你能从中学到一些新东西！😃

这是我的投资组合网站👉cmcodes的链接

这是我的投资组合源代码的链接👇

GitHub 徽标 cmcodes1 / cmcodes1.github.io

😊 这是我的作品集，您可以在其中查看我的所有项目、博客和成就。

快去看看，告诉我你的看法！我迫不及待地想听听你的意见。😁

欢迎在下面的评论区分享你的作品集链接。我很乐意看看。😊

祝你编程愉快！👨‍💻

文章来源：https://dev.to/cmcodes/how-my-portfolio-got-a-seo-score-of-100-456c
Devto 翻译
PREV
5 个超棒的 Docker 工具，让你的生活更轻松
NEXT
如果 LinkedIn 很漂亮会怎么样？ - 新的 UI、API、界面动画和交互、数据管理、结论