李钟意讲前端

外观

咨询/接单/付费bug修复/学习交流群

前端 SEO ??前端如何进行 SEO 搜索引擎优化 ​

前端对 SEO 的影响：了解前端如何影响搜索引擎优化，如何通过优化前端来提升网站的搜索排名。

什么是前端 SEO ​

SEO（Search Engine Optimization）：汉译为搜索引擎优化。

前端 SEO 指的是优化你的网站前端，使之更容易被搜索引擎理解和收录。

这包括使用合适的标题和描述元标签、使用高质量的图片和视频、优化网站的加载速度、使用简洁的 URL 地址、使用简洁的 HTML 代码、使用合适的字体和颜色、使用合适的布局和导航等。

为什么前端 SEO 很重要 ​

前端 SEO 很重要，因为它可以帮助你的网站在搜索引擎中更好地排名。

这意味着你的网站会更容易被用户发现，从而带来更多流量。

此外，好的前端 SEO 还能帮助你的网站在搜索结果中更吸引眼球，增加点击率。

前端 SEO 的常见技巧 ​

使用合适的标题和描述元标签 ​

在 HTML 代码中，你可以使用标题元标签（<title>）和描述元标签（<meta>）来描述你的网站。

这些标签会在搜索结果中显示，因此应该认真设计。标题应该简洁明了，而描述应该吸引用户点击。

html
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>抖音@程序员李钟意</title>
  <meta
    name="keywords"
    content="程序员李钟意, 前端, 程序员, 李钟意, HTML5, CSS, JavaScript, Vue, React, 爬虫, Electron, 钟意未来 "
  />
  <meta
    name="description"
    content="程序员李钟意，在抖音分享 HTML5、CSS、JavaScript、Vue、React 等前端技术，并提供 Vue 和 Electron 开发实战经验。还有爬虫技术和其他编程知识。钟意未来。"
  />
  <meta name="googlebot" content="index,follow" />
  <meta name="robots" content="index,follow" />
</head>

<meta name="googlebot" content="index,follow"> 和 <meta name="robots" content="index,follow">

这两个 meta 标签是用来告诉搜索引擎爬虫（例如 Googlebot）如何处理网站内容的。

其中，

  • "index" 表示允许搜索引擎索引这个页面，
  • "follow" 表示允许搜索引擎抓取这个页面上的链接。

因此，这两个 meta 标签的意思是：

允许搜索引擎索引这个页面，并且允许搜索引擎抓取这个页面上的链接。

在页面中显示 <h1></h1> 标签，介绍这个网站。

html
<head>
  <style>
    .seo-header {
      position: absolute;
      left: 999999px; /* 让标签消失在页面 */
    }
  </style>
</head>
<body>
  <h1 class="seo-header">
    <a href="https://ffffee.com"
      >程序员李钟意, 前端开发工程师, electron开发工程师,
      在抖音平台直播讲前端相关技术。</a
    >
  </h1>
</body>

使用合适的关键字 ​

关键字是指你希望你的网站在搜索中被搜索到的词。 使用合适的关键字有助于提升你的网站在搜索中的排名。 你可以使用工具来帮助你确定最佳的关键字，并在你的网站中使用它们。

建立网站地图 ​

抖音 sitemap.xml： https://www.douyin.com/sitemap.xml

当前网站 sitemap.xml： https://www.ffffee.com/sitemap.xml

建立网站地图可以帮助搜索引擎理解你的网站的结构，并使网站内的每一页都能被搜索引擎收录。

建立网站地图的步骤如下：

1. 创建网站地图文件 ​

你需要创建一个 XML 文件，其中包含你的网站中所有页面的链接。这个文件应该包括你网站的每一个子目录，并包括所有页面的完整链接。

例如，如果你的网站包含如下页面：

你的网站地图文件应该包含以下内容：

xml
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://ffffee.com/about</loc>
  </url>
  <url>
    <loc>https://ffffee.com/products</loc>
  </url>
</urlset>

2. 上传网站地图文件 ​

将你的网站地图文件上传到你的网站根目录。通常情况下，你的网站根目录的地址应该是 https://ffffee.com/。

在 Google Search Console 中提交网站地图 ​

登录到 Google Search Console，然后单击左侧菜单中的“网站地图”。

在“提交新网站地图”文本框中，输入你的网站地图文件的完整 URL，例如 https://ffffee.com/sitemap.xml。 然后单击“提交”按钮。

Google Search Console 添加新的sitemap.xml

这样，Google 就可以轻松地获取你的网站地图文件。

检查网站地图文件是否被成功提交

回到 Google Search Console 的“网站地图”页面，你应该能看到你的网站地图文件已被成功提交。

你也可以在“网站地图”页面的“错误”标签下查看任何错误信息。

如果你的网站地图文件被成功提交，那么 Google 就会开始索引你的网站。这可能需要一段时间，但是当 Google 索引完你的网站后，你的网站就会在搜索结果中出现。

检查网站地图文件是否被成功提交

在微软必应 Bing Webmaster Tools 中提交 ​

Bing 提供了类似 Google Search Console 的工具，叫做 Bing Webmaster Tools，它可以帮助你管理和优化你的网站在 Bing 搜索引擎中的表现。以下是使用 Bing Webmaster Tools 更新和管理你的网站的方法：

  1. 注册和验证网站
  • 访问 Bing Webmaster Tools。
  • 使用 Microsoft 账户登录或创建一个新账户（或直接从 Google Search Console 中授权导入）。
  • 添加你的网站，并通过提供网站地图或放置验证代码在你的网站上来验证所有权。
  1. 提交网站地图
  • 进入你的 Bing Webmaster Tools 控制台。
  • 在左侧菜单中选择 “Sitemaps”。
  • 添加你的网站地图 URL，这有助于 Bing 快速发现和索引你网站的所有页面。
  1. 监控网站表现
  • 使用 “Performance” 报告查看网站在 Bing 搜索中的点击、展示和点击率等数据。
  • 通过 “Index Explorer” 查看哪些页面已经被索引，哪些页面存在问题。
  • 使用 “SEO” 工具来获取网站优化建议，以提升你的搜索排名。
  1. 修复问题
  • 如果发现爬取或索引问题，可以通过 “Crawl Information” 查看详细信息并采取措施。
  • 使用 “Security” 报告来检测和修复任何网站的安全问题，如恶意软件或黑客攻击。
  1. 提交 URL
  • 当你发布新内容或对现有页面进行了重要更新时，可以手动提交 URL 来加速这些页面的重新索引。
  • 在 “URL Submission” 中输入你更新的页面 URL，然后点击 “Submit”。

通过 Bing Webmaster Tools，你可以全面管理你的网站在 Bing 上的表现，确保其内容被及时发现和准确索引。

在百度站长平台上提交数据 ​

上传到百度站长平台 https://ziyuan.baidu.com/site/index

  1. 添加网址
添加网址
  1. 输入域名
输入域名
  1. 验证域名
输入域名
  1. 域名验证成功
域名验证成功
  1. 提交提交 sitemap.xml 文件
提交提交 sitemap.xml 文件

使用社交媒体帮助推广你的网站 ​

  • 简书（名称、个人中心、文章）

    1. 修改名称为“程序员李钟意”
    2. 个人主页修改为你的网站地址 https://ffffee.com
    3. 发布优秀文章，文章中把你的网站地址带上

  • 掘金（名称、个人中心、文章）

    1. 修改名称为“程序员李钟意”
    2. 个人主页修改为你的网站地址 https://ffffee.com
    3. 发布优秀文章，文章中把你的网站地址带上

  • Gitee

    1. 个人介绍、主页信息把你的网站域名填写上来

  • GitHub

    1. 个人介绍、主页信息把你的网站域名填写上来

  • 知乎

  • 其他

前端 SEO 的工具和资源 ​

前端 SEO 的工具和资源有很多，下面是一些常用的：

  • Lighthouse：这是一款免费的网页性能分析工具，可以帮助你检测网页的加载速度、性能、可用性等。

  • Google Search Console：这是一款免费的搜索引擎管理工具，可以帮助你提交网站地图、查看网站的搜索排名、检测网站的性能等。

  • Google Analytics：这是一款免费的网站流量分析工具，可以帮助你了解网站的访问来源、访问量、浏览器类型等信息。

  • SEO Quake：这是一款浏览器插件，可以帮助你查看网页的 SEO 相关信息，包括关键词密度、反链数量、头信息等。

总结 ​

前端 SEO 是指优化你的网站前端，使之更容易被搜索引擎理解和收录。

前端 SEO 很重要，因为它可以帮助你的网站在搜索引擎中更好地排名，并吸引更多流量。

  • 在进行前端 SEO 优化时，应该遵循一些基本原则，并使用一些常见技巧。
  • 此外，你还可以使用各种工具和资源来帮助你优化你的网站。
  • 通过认真遵循这些建议，你就可以为你的网站带来更多流量和更好的排名。