前端页面SEO优化前端seo优化

SEO 是 Search Engine Optimization的首字母缩写，其含义是利用搜索引擎规则对网站进行内外部调整优化，提高网页或网站在搜索引擎中关键词的自然排名，以此获得更多展现量和免费点击流量，进而达成互联网营销与品牌建设目标。### SEO 的方法1. Title 标签Title 标签对页面点击率有直接影响，它是用户对网站页面的第一印象，也是爬虫重点爬取对象。所填文字需准确简洁地描述网页内容，吸引用户点击，且长度要适中。2. Meta 标签Meta 标签有 http - equiv 属性和 name 属性，不同属性有不同参数值，此外还有主要用于社交平台的 OG 标签。 - name 属性： - meta name="keywords" content="这是keywords的内容"，用于表明关键词。 - meta name="description" content="这是description的内容"，告诉搜索引擎网站主要内容。 - meta name="robots" content="none"，告知搜索机器人哪些页面需要索引，哪些不需要。 - meta name="author" content="广白,掘金"。 - http - equiv 属性： - Expires可设定网页到期时间，网页过期需重新从服务器传输。 - Pragma禁止浏览器从本地缓存访问页面内容，如meta http - equiv="Pragma" content="no - cache"。 - Set - Cookie，网页过期时存盘的 cookie 将被删除。 - Window - target强制页面在当前窗口以独立页面显示，如meta http - equiv="Window - target" content="_top"，meta http - equiv="content - Type" content="text/html;charset=gb2312"。 - OG 标签：它是 Facebook 在 2010 年 F8 开发者大会公布的网页元信息标记协议，属于 Meta Tag 范畴，为社交分享而生。目前几乎主流社交媒体网站都支持 OG 协议，包括 Twitter、Pinterest、LinkedIn、Google + 等，国内的百度、360 搜索、微博、微信、人人网等也支持。在社交媒体上，OG 标签可使分享的网址链接显示缩略图、标题和描述等，增加访客点击概率。3. 语义化标签 - H 系列标签：从 H1 到 H6共 6 个，在页面中作用性高，不能乱用，要根据内容重要性排列，最好不要有断层，如不能从 H1 直接到 H3 跳过 H2，且 H1 标签最好只有一个。 - img 标签：img 的 alt 属性为搜索引擎提供替代文本，对图片使用 alt 标签优化可对搜索引擎排名产生积极影响，当网速不佳无法加载图片时，会在图片位置显示 alt 里的文字。 - 其他：HTML5 新出的 Header、Nav、Aside、Article、Footer 等语义化标签能帮助爬虫更好地获取页面内容。4. sitemap (站点地图)站点地图一般是 xml 格式文件，放在网站根目录下，有些网站可通过网址 /sitemap.xml 访问。文件包含每个网页的链接、更新时间、权重等信息，权重从 0 到 1 递增，一般主页设为 1，其他按重要性递减。搜索引擎可通过查看站点地图快速了解网站整体结构，将精力集中在重要页面索引上，有助于提高爬行效率和索引速度。5. robots 文件6. 内链和外链 - 内链：在自己网站内通过链接在各内容页面相互连接，可提高爬虫和搜索引擎的爬行索引效率。网站更新时要定期清理死链和断链，方便爬虫收录爬行。 - 外链：在其他高流量网站放置自己的链接，可实现网络间信息分享，增加网站浏览量，提升搜索排名。新站建立时，外链数量对提升流量关键，后期优化则要以质量为主、数量为辅。 - nofollow：超链接 a 标签的一个属性，意为不向此页面导出权重，告诉搜索引擎不要跟踪此链接，不传递链接权重，不在搜索算法中计算此链接。可控制网站权重流动，避免链接指向垃圾页面，使主要页面更快获得关键词排名，如公司导航中的在线留言、广告链接等无意义页面可加此标签。7. 数据结构化标记结构化数据标记虽不能直接提高搜索排名，但有诸多好处。 - 丰富搜索结果：如搜索某些网站时，可通过结构化标记更好地了解内容，吸引用户注意。 - 拥有知识面板：在搜索结果右侧有知识面板，可提高品牌知名度和权威性。 - 支持语义搜索：不再是简单的关键词匹配搜索，而是通过关键词找答案。 - 体现 E - A - T。结构化数据有 JSON - LD、Microdata 和 RDFa 三种形式，个人常用 JSON - LD，如：{],

SEO 是 Search Engine Optimization的首字母缩写，其含义是利用搜索引擎规则对网站进行内外部调整优化，提高网页或网站在搜索引擎中关键词的自然排名，以此获得更多展现量和免费点击流量，进而达成互联网营销与品牌建设目标。### SEO 的方法1. Title 标签Title 标签对页面点击率有直接影响，它是用户对网站页面的第一印象，也是爬虫重点爬取对象。所填文字需准确简洁地描述网页内容，吸引用户点击，且长度要适中。2. Meta 标签Meta 标签有 http - equiv 属性和 name 属性，不同属性有不同参数值，此外还有主要用于社交平台的 OG 标签。 - name 属性： - meta name="keywords" content="这是keywords的内容"，用于表明关键词。 - meta name="description" content="这是description的内容"，告诉搜索引擎网站主要内容。 - meta name="robots" content="none"，告知搜索机器人哪些页面需要索引，哪些不需要。 - meta name="author" content="广白,掘金"。 - http - equiv 属性： - Expires可设定网页到期时间，网页过期需重新从服务器传输。 - Pragma禁止浏览器从本地缓存访问页面内容，如meta http - equiv="Pragma" content="no - cache"。 - Set - Cookie，网页过期时存盘的 cookie 将被删除。 - Window - target强制页面在当前窗口以独立页面显示，如meta http - equiv="Window - target" content="_top"，meta http - equiv="content - Type" content="text/html;charset=gb2312"。 - OG 标签：它是 Facebook 在 2010 年 F8 开发者大会公布的网页元信息标记协议，属于 Meta Tag 范畴，为社交分享而生。目前几乎主流社交媒体网站都支持 OG 协议，包括 Twitter、Pinterest、LinkedIn、Google + 等，国内的百度、360 搜索、微博、微信、人人网等也支持。在社交媒体上，OG 标签可使分享的网址链接显示缩略图、标题和描述等，增加访客点击概率。3. 语义化标签 - H 系列标签：从 H1 到 H6共 6 个，在页面中作用性高，不能乱用，要根据内容重要性排列，最好不要有断层，如不能从 H1 直接到 H3 跳过 H2，且 H1 标签最好只有一个。 - img 标签：img 的 alt 属性为搜索引擎提供替代文本，对图片使用 alt 标签优化可对搜索引擎排名产生积极影响，当网速不佳无法加载图片时，会在图片位置显示 alt 里的文字。 - 其他：HTML5 新出的 Header、Nav、Aside、Article、Footer 等语义化标签能帮助爬虫更好地获取页面内容。4. sitemap (站点地图)站点地图一般是 xml 格式文件，放在网站根目录下，有些网站可通过网址 /sitemap.xml 访问。文件包含每个网页的链接、更新时间、权重等信息，权重从 0 到 1 递增，一般主页设为 1，其他按重要性递减。搜索引擎可通过查看站点地图快速了解网站整体结构，将精力集中在重要页面索引上，有助于提高爬行效率和索引速度。5. robots 文件6. 内链和外链 - 内链：在自己网站内通过链接在各内容页面相互连接，可提高爬虫和搜索引擎的爬行索引效率。网站更新时要定期清理死链和断链，方便爬虫收录爬行。 - 外链：在其他高流量网站放置自己的链接，可实现网络间信息分享，增加网站浏览量，提升搜索排名。新站建立时，外链数量对提升流量关键，后期优化则要以质量为主、数量为辅。 - nofollow：超链接 a 标签的一个属性，意为不向此页面导出权重，告诉搜索引擎不要跟踪此链接，不传递链接权重，不在搜索算法中计算此链接。可控制网站权重流动，避免链接指向垃圾页面，使主要页面更快获得关键词排名，如公司导航中的在线留言、广告链接等无意义页面可加此标签。7. 数据结构化标记结构化数据标记虽不能直接提高搜索排名，但有诸多好处。 - 丰富搜索结果：如搜索某些网站时，可通过结构化标记更好地了解内容，吸引用户注意。 - 拥有知识面板：在搜索结果右侧有知识面板，可提高品牌知名度和权威性。 - 支持语义搜索：不再是简单的关键词匹配搜索，而是通过关键词找答案。 - 体现 E - A - T。结构化数据有 JSON - LD、Microdata 和 RDFa 三种形式，个人常用 JSON - LD，如：{],