草庐IT

前端SEO

林思念 2023-10-22 原文

1. 标题 title

title值强调重点
搜索引擎在抓取网页时，最先读取的就是网页标题，所以title是否正确设置极其重要。

  • 首页title写法，一般是“网站名称-主关键词或一句含有主关键词的描述”。一般网站名称放后面，因为搜索引擎给予标题最前面的词比后面的高。比如，做“冰箱”这个词，就这样写“冰箱_变频冰箱-海尔官网”。
  • 栏目页title写法，一般有2种：“栏目名称-网站名称”、“栏目名称栏目关键词-网站名称”。而且栏目名称最好用关键词来确定，比如企业招聘栏目最好就用企业招聘，而不要起个让人无法识别的名字如企业来人，企业看看，或企业加上一些特殊符号，这种写法虽然很有个性，但会让你的网站在优化上占了下风。
  • 分类列表页title写法，一般是“分类列表页名称-栏目名称-网站名称”，这个和栏目页差不多。

2. 描述 description

description把页面内容高度概括，不可过分堆砌关键词

  • 首页description写法，一般是将首页的标题、关键词和一些特殊栏目的内容融合到里面，写成简单的介绍。
  • 栏目页description写法，一般是将栏目的标题、关键字、分类列表名称融合到里面，写成简单的介绍。
  • 分类列表页description，这个就比较简单了，一般只需要把分类列表的标题、关键词融合在一起，写成简单的介绍。

3. 关键字 keywords

keywords列举出重要关键词。

  • 首页keywords写法，一般是“网站名称,主要栏目名,主要关键词”。
  • 栏目页keywords写法，一般是“栏目名称,栏目关键字,栏目分类列表名称”。
  • 分类列表页keywords写法，这个就比较简单了，只要将你这个栏目中的主要关键字写入即可。

4. 语义化标签（H5提供了新的语义化标签，便于爬虫理解页面结构，避免使用无意义标签）

14.png

代码对比

<div class="main">
    <h2>标签的语义 <a href="#">更多</a></h2>
    <p>段落一的各种内容.....<strong>强调的内容</strong></p>
    <p>段落二的内容。。。段落二的内容。。。</p>
</div>
  • 主要部分可以通过main标签替代
  • h2标签中有<a>链接，h2并不是链接的一部分，应该加以区分
  • 段落和标题也可以加以区分，使代码更具可读性
<main>
    <header class="title">
        <h2>标签的语义化</h2>
        <a href="#">更多</a>
    </header>
    <article class="content">
        <p>段落一的各种内容.....<strong>强调的内容</strong></p>
        <p>段落二的内容。。。</p>
    </article>
</main>

5. img标签添加alt属性

<img> 标签的 alt 属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。

  • 增强内容相关性
  • 提高关键词密度

6. 友情链接

  • 友情链接，也称为网站交换链接、互惠链接、互换链接、联盟链接等，是具有一定资源互补优势的网站之间的简单合作形式，提高网站权重

7. 外链

  • 外链就是指在别的网站导入自己网站的链接。导入链接对于网站优化来说是非常重要的一个过程。导入链接的质量（即导入链接所在页面的权重）间接影响了我们的网站在搜索引擎中的权重。

8. 向搜索引擎提交尚未收录站点

9. 重要内容靠前

  • 搜索引擎自上而下抓取，而且抓取有一定的长度限制

10. 不适用iframe

  • 搜索引擎不会抓取iframe中的内容

11. 提高网站速度

  • 网站速度是搜索引擎排序的一个重要指标，页面性能优化
SEO前端li关键写法

有关前端SEO的更多相关文章

  1. ruby-on-rails - 在 Rails 应用程序的前端获取实时日志 - 2

    在Rails3.x应用程序中，我正在使用net::ssh并向远程pc运行一些命令。我想向用户的浏览器显示实时日志。比如，如果两个命令在net中运行::ssh执行即echo"Hello",echo"Bye"被传递然后"Hello"应该在执行后立即显示在浏览器中。这是代码我在ruby​​onrails应用程序中使用ssh连接和运行命令Net::SSH.start(@servers['local'],@machine_name,:password=>@machine_pwd,:timeout=>30)do|ssh|ssh.open_channeldo|channel|channel.requ

  2. ruby - 如何在转换器插件中访问页面属性(YAML 前端) - 2

    我正在为Jekyll编写一个转换器插件，需要访问一些页眉(YAML前端)属性。只有内容被传递给主要的转换器方法，似乎无法访问上下文。例子:moduleJekyllclassUpcaseConverter关于如何在转换器插件中访问页眉数据有什么想法吗？ 最佳答案 基于Jekyll源代码，无法在转换器中检索YAML前端内容。根据您的情况，我看到了两种可行的解决方案。您的文件扩展名可以具有足够的描述性，以提供您本应包含在前言中的信息。看起来Converter插件的设计就是这么基本的。如果修改Jekyll是一个选项，您可以更改Convert

  3. 前端实现文件上传（点击+拖拽） - 2

    一、简介之前在Vue项目中使用过element的上传组件，实现了点击上传+拖拽上传的两种上传功能。然后我就在想是否可以通过原生的html+js来实现文件的点击上传和拖拽上传，说干就干。首先是点击获取上传文件自然没的说，只需要借助input标签即可，但原生的点击上传按钮，实在是过于简陋，所以我的想法是通过一个div，模拟成上传按钮，然后监听其点击事件，通过input.click()去模拟点击真正的上传元素。然后是拖拽获取上传文件，这个稍有难度，我的想法是通过HTML5新增的drag拖放API+dataTransfer来实现文件的拖拽获取，但是由于是html5新增的，所以可能在某些低版本IE浏览器

  4. 教你如何使用vercel服务免费部署前端项目和serverless api - 2

    一、介绍一下vercelvercel是一个站点托管平台，提供CDN加速，同类的平台有Netlify和GithubPages，相比之下，vercel国内的访问速度更快，并且提供Production环境和development环境，对于项目开发非常的有用的，并且支持持续集成，一次push或者一次PR会自动化构建发布，发布在development环境，都会生成不一样的链接可供预览。但是vercel只是针对个人用户免费，teams是收费的首先vercel零配置部署，第二访问速度比github-page好很多，并且构建很快，还是免费使用的，对于部署个人前端项目路、接口服务非常方便vercel类似于git

  5. 前端基于DOM或者Canvas实现页面水印 - 2

    🐱个人主页：不叫猫先生🙋‍♂️作者简介：前端领域新星创作者、阿里云专家博主，专注于前端各领域技术，共同学习共同进步，一起加油呀！💫系列专栏：vue3从入门到精通、TypeScript从入门到实践📢资料领取：前端进阶资料以及文中源码可以找我免费领取🔥前端学习交流：博主建立了一个前端交流群，汇集了各路大神，一起交流学习，期待你的加入！(文末有我wx或者私信)目录前言一、vue自定义指令directive讲解二、基于DOM的实现方式1.思路整理2.新建index.vue3.新建`directives`文件4.在`directives`文件下创建`index.ts`文件5.在`main.ts`中全局引

  6. 「前端代码简洁之路」后台系统之详情页设计 - 2

    一、乱花迷人眼我就是被迷的那双眼。有时候需求来了，用熟悉的套路进行开发，确实很节省时间也能保证功能的稳定，但是这些开发的惯性无形中阻碍了我对技术的探索。我一直想改造详情页，解放重复功能开发的劳动力，但是详情页一眼望都是内容平铺，好像并没有什么可做的代码设计。后来我拨开繁花，发现详情页的组件化不必想的过于复杂，后台系统风格统一即可。因为大部分的详情页面是内容的展示，偶尔会出现少量的操作功能。将风格统一的部分进行组件化处理，操作功能使用回调函数放回当前页面，避免组件里做过多的业务逻辑。看，这不就成了。项目基于React框架开发的，所以代码写法是JSX语法，组件开发使用的hooks函数式组件，UI框

  7. ruby-on-rails - 知道@vendor.name 后如何使 Ruby on Rails 中的 URL 对 SEO 友好？ - 2

    我的应用程序在RoR中我有一个名为showsummary的操作/View，其中ID已传递到URL，并且Controller使用它来实例化@vendor，其中@vendor.name是公司的名称。我希望URL是showsummary/1/而不是在URL中包含/vendor-name。我该怎么做？ 最佳答案 所有这些解决方案都使用find_by_name，这肯定需要在该列上有一个索引并且要求它们是唯一的。我们使用的一个更好的解决方案是在供应商名称前加上其ID，但牺牲了一点美观。这意味着您不必在名称列上有索引和/或要求唯一性。供应商.rb

  8. 《EDA前端软件开发工程师面试指南》 - 2

    2023届EDA领域校招总结，完结撒花！！！目录前言一、EDA公司介绍二、项目面试1.自我介绍2.项目深入3.专业经验4.成果和技能5.对面试官有什么问题三、C++面试1、高频考点2、其他知识点3、算法题四、逻辑综合面试1.逻辑综合知识详解2.开源逻辑综合ABC五、简历制作总结前言2022/08/26：本人2023年6月毕业，于2022年7-10月参加秋招，面试总结纯属个人经验，仅供参考面试的是EDA前端软件开发岗位，也会掺杂一些EDA其他流程的面试在面试过程中发现自己准备的很乱，没有一个清晰的思路，现在把自己面试的所有经历和题型整理出来，在这里做一个小的总结，不仅帮助自己整理思路，也给大家做

  9. 一文吃透前端低代码的 “神仙生活” - 2

    今天来说说前端低代码有多幸福？低代码是啥？顾名思义少写代码……这种情况下带来的幸福有：代码写得少，bug也就越少（所谓“少做少错”），因此开发环节的两大支柱性工作“赶需求”和“修bug”就都少了；要测的代码少了，那么测试用例也可以少写了。所以，总结低代码带来的幸福感有这三大点：开发效率提高开发成本减少维护性更高针对上述三点，我们展开说说。01、开发效率提高对于低代码的理解，个人认为可以通过配置化的低成本交互方式（主流是拖拽）加上少量的胶水代码，去满足一类应用的需求。这就说明，基于低代码，开发人员无需代码或说只需少量代码就可以开发出各类应用管理系统，如：OA协同办公、KM知识管理、CRM客户关系

  10. javascript node module.exports/require() 前端代码 - 2

    我一直在研究使用像SVGO这样的库能够在前端清理用户提交的SVG代码。SVGO是一个基于node.js的库，通常在后端运行，所以我一直在努力思考如何将SVG代码从前端发送到后端，然后将清理过的代码反刍到前端。正是在我试图弄清楚这一点的时候，我检查了他们的webappexample,经检查，在链接脚本中运行代码，我通常会在前端的后端看到这些代码。特别是，它们的许多函数都具有签名(fullscript):1:[function(require,module,exports){"usestrict";varloadScripts=require("./load-scripts"),...mo

随机推荐