【HTML/CSS】SEO的概念和实现

1 SEO的概念

SEO就是使用特定的技术使得网站的各种关键词排名提升到搜索引擎的理想位置，从搜索引擎中获得更多的免费流量，以及更好地展现网站形象。

2 SEO优化

设置合理的title、description、keywords
重要的关键词不要超过2次，而且要靠前，不同页面的title要不同
使用语义化的html代码，符合w3c规范，语义化代码让搜索引擎容易理解网页
重要的内容放在html代码最前，搜索引擎抓取页面是自上而下的，有的搜索引擎对抓取的长度有限制
重要的内容不要通过JS输出，搜索引擎不会执行JS获取内容
少用iframe，搜索引擎不会抓取iframe
非装饰性图片必须加上alt
提高网站速度

3 前后端分离的项目怎么SEO

使用预渲染，prerender需要由nodejs的支持，而且需要路由使用history模式，hash模式会失效。预渲染的本质就是在打包的时候通过插件将js提前执行，将由内容的html放到服务器上，这样就能被爬虫抓到。


var PrerenderSpaPlugin = require('prerender-spa-plugin')var webpackConfig = merge(baseWebpackConfig, {plugins: [//这段代码意思是拷贝static文件至根目录使得渲染的文件可以找到js、cssnew CopyWebpackPlugin([{from: 'static'}]),new PrerenderSpaPlugin(//将渲染的文件放到dist目录下path.join(__dirname, '../dist'),   //需要预渲染的路由信息[ '/','/introduct','/culture','/Chairman','/president','/fund','/news','/honor' ],{//在一定时间后再捕获页面信息，使得页面数据信息加载完成captureAfterTime: 50000,//忽略打包错误ignoreJSErrors: true,phantomOptions: '--web-security=false',maxAttempts: 10,}),

服务端渲染SSR，前端耗时少，有利于SEO，网络传输量大，占用服务端运算资源

【HTML/CSS】SEO的概念和实现相关推荐

CSS的基本概念———每天一遍小知识
前言这是我学习了这个网站整理的笔记,接下来还会持续更新. 这是我的博客首页:https://blog.csdn.net/weixin_46654114?t=1 博客名:RodmaChen 如果写的不 ...
CSS的基本概念及文字属性、段落属性、背景属性、列表案例符号的样式
一. CSS的基本概念 1.CSS是层叠样式表(Cascading Style Sheet) ,用于控制网页的外观.指颜色背景大小元素定位. Css选择器:css选择器,也称为选择符,用于选择需要 ...
CSS的基础概念、行内样式（内嵌样式）、内部样式（内联样式）、外部样式（外联样式）、字体相关属性及相关练习的案例
CSS学习笔记 CSS的基本概念 Cascading Style Sheet层叠样式表标签:<p> <div>-之类的标签使用方式:直接输入标签名类(class):cla ...
CSS：基本概念、选择器、伪类伪元素
基本概念 HTML使用结构化标记的理由:易于建立内容索引.增加文档可用性.增加可访问性.易于维护. 元素(element):文档结构的基础,每个元素生成一个框(box)其中包含元素的内容, 元素的两 ...
使用div和css重构网站,DIV+CSS网页重构概念详解
本文和大家重点讨论一下DIV+CSS网页重构的概念,常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方 ...
Web前端开发笔记——第三章 CSS语言第一节 CSS的基本概念和样式表
目录一.CSS和HTML 二.CSS的基本语法格式三.CSS样式设置 (一)行内样式 (二)内嵌样式 (三)引用外部CSS文件四.多重样式优先级结语一.CSS和HTML CSS,又称为层叠样 ...
CSS的基本概念和语法规则
1.什么是css: CSS (Cascading Style Sheets) 层叠样式表,是一个用于修饰文档(可以是标记语言HTML,也可以是XML或者SVN)的语言,可以将文档以更优雅的形式呈现给用 ...
CSS Hack的概念
一.什么是CSS hack 由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持.解析不一样,导致在不同浏览器的环境 ...
web day03 CSS基本概念选择器
一. CSS的基本概念 (使用CSS让单调的HEML网页更富表现力:文档体积小,便于搜索,可读性好分层思想HTML+CSS 结构和表现分离 ,易于维护和管理) CSS的基本概念:CSS是层叠样式表( ...

【HTML/CSS】SEO的概念和实现

1 SEO的概念

2 SEO优化

3 前后端分离的项目怎么SEO

【HTML/CSS】SEO的概念和实现相关推荐

最新文章

热门文章