13686895750

网站建设、网站优化、平面、空间设计、影视后期!

知识

>「spa无法seo」这类的网站是否无法做seospa无法seo:这类的网站是否无法做seo我觉得你应该把中心放在站内优化上面,网站的布局设计和站内的文章,多考虑下用户体验,至于外链方面吗

您当前位置>主页 > 知识 > 网站优化 >

-「spa无法seo」 这类的网站是否无法做seo

发表时间:2020-04-30 03:27

文章来源:佚名

浏览次数:

>「spa无法seo」 这类的网站是否无法做seo

spa无法seo: 这类的网站是否无法做seo

我觉得你应该把中心放在站内优化上面,网站的布局设计和站内的文章,多考虑下用户体验,至于外链方面吗,可以少发些。

其他答案:这类网站本来就是违法的,国内搜索引擎肯定不好做的。。。。

其他答案:这类站确实不好做 对于办证方面各个论坛管的比较严 建议放弃或者从站内出发

spa无法seo: 我今天去做了一个spa是正规的店,但是我让技师帮我打飞机来着,没...

一般的接触并不能传染艾滋病,所以艾滋病患者在生活当中不应受到歧视,如共同进餐、握手等都不会传染艾滋病。艾滋病病人吃过的菜,喝过的汤是不会传染艾滋病病毒的。艾滋病病毒非常脆弱,在离开人体,

spa无法seo: Spa主要是干什么的? 爱问知识人

SPA一词源于拉丁文,意思是用水来达到健康,健康之水。SPA是指利用水资源结合沐浴、按摩、涂抹保养品和香熏来促进新陈代谢,满足人体视觉、味觉、触觉、嗅觉和思考达到一种身心畅快的享受。SPA是由专业美疗师、水、光线、芳香精油、音乐等多个元素...

其他答案:spa也分很多钟的,有都会型,美容型,俱乐部型,饭店度假型,温泉型等方式,是一种都市缓解压力放松自我并且养生的非常好的一种方式,具体的你可以自己去试一下

spa无法seo: 是不是有些人不能做SPA按摩?昨天去做了SPA按摩,这两天感觉全?...

这是你第一次做不太适应,很正常的,我第一次做的时候也是这样,后来多做几次就好了。之后开始了解SPA按摩精油产品,近期在用一款DONNA CHANG坤尚莉的迷迭香香熏精油,且按照他们的香熏SPA按摩教程学习。自己都可以在都可以在家做香熏SPA按摩。

spa无法seo:前端SPA(单页面应用)性能优化,交互体验加成!

单页Web应用(single page web application,SPA): SPA 是一种特殊的 Web 应用,是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的。它将所有的活动局限于一个 Web 页面中,仅在该 Web 页面初始化时加载相应的 HTML 、 JavaScript 、 CSS 。一旦页面加载完成, SPA 不会因为用户的操作而进行页面的重新加载或跳转,而是利用 JavaScript 动态的变换 HTML(采用的是 div 切换显示和隐藏),从而实现UI与用户的交互。在 SPA 应用中,应用加载之后就不会再有整页刷新。相反,展示逻辑预先加载,并有赖于内容Region(区域)中的视图切换来展示内容。

要实现单页面应用,现在已经有很多现成的框架了,它们都是很全面的开发平台,为单页面应用开发提供了必需的页面模板、路径解析和处理、后台服务 api 访问、 DOM 操作等功能。

1. 优点

1) 有良好的交互体验能提升页面切换体验,用户在访问应用页面是不会频繁的去切换浏览页面,从而避免了页面的重新加载;2) 前后端分离开发单页Web应用可以和 RESTful 规约一起使用,通过 REST API 提供接口数据,并使用 Ajax 异步获取,这样有助于分离客户端和服务器端工作。更进一步,可以在客户端也可以分解为静态页面和页面交互两个部分;3) 减轻服务器压力服务器只用出数据就可以,不用管展示逻辑和页面合成,吞吐能力会提高几倍;4) 共用一套后端程序代码不用修改后端程序代码就可以同时用于 Web 界面、手机、平板等多种客户端;

2. 缺点:

1) SEO难度较高由于所有的内容都在一个页面中动态替换显示,所以在SEO上其有着天然的弱势,所以如果你的站点对SEO很看重,且要用单页应用,那么就做些静态页面给搜索引擎用吧;2) 前进、后退管理由于单页Web应用在一个页面中显示所有的内容,所以不能使用浏览器的前进后退功能,所有的页面切换需要自己建立堆栈管理,当然此问题也有解决方案,比如利用URI中的散列+iframe实现;3) 初次加载耗时多为实现单页Web应用功能及显示效果,需要在加载页面的时候将JavaScript、CSS统一加载,部分页面可以在需要的时候加载。所以必须对JavaScript及CSS代码进行合并压缩处理;

3. 性能优化

1) 加载优化在SPA中,通常一开始就会加载所有必需的代码(HTML,JavaScript和CSS),有时候考虑到首屏加载太慢会按需加载,按需加载就是按照当前呈现的不同页面加载不同的文件,而不是最开始就把所有文件都加载出来,从而避免首屏加载很慢。当首屏加载完毕后,设备&网络处于空闲状态,可以对其他路由组件进行预加载,以便提升页面切换性能。根据路由拆分减少初始加载体积,利用异步加载方式,在路由注册时提供异步拉取组件的方法,仅在需要进入对应路由时,对应组件才会被加载进来。

初次加载的速度

单页应用的第一页加载会比基于服务器的应用慢。这是因为首次加载必须先拿到框架和应用程序的代码,再在浏览器中呈现所需的视图。基于服务器的应用程序只需将所需的HTML推送到浏览器,从而减少了延迟和下载用时。

加快页面加载速度

有一些方法可以加快单页应用的初次加载速度,比如采用多项缓存措施、需要时再加载某些模块(懒加载)。

页面生命周期

单页应用在初始页面加载时被完全加载,然后页面区域被替换或更新为按需从服务器加载的新页面片段。为避免过度下载未使用的功能,单页应用通常会逐渐下载更多内容,如所需要的功能、页面的一小块,或者完整的一页。

2) SEO优化由于我们在处理单页应用的时候页面是不刷新的,所以会导致我们的网页记录和内容很难被搜索引擎抓取到。搜索引擎抓取页面首先要遵循http协议,可是#不是协议内的内容。而实际上也是这样,我们没有见过搜索引擎的搜索结果中,哪一条记录可以快速定位到网页内的某个位置的。解决的方法是用 #!号代替#号,因为谷歌会抓取带有#!的URL。(Google规定,如果你希望Ajax生成的内容被浏览引擎读取,那么URL中可以使用"#!"(这种URL在一般页面一般不会产生定位效果)),这样我们可以解决ajax的不被搜索引擎抓取的问题。在vueJs里面,我们可以看到作者就是这样做的。3) 前进后退功能优化配置好路由信息,通过记录浏览过的历史路由信息,可以很好的记录或历史查看过的界面,也可以独立写个足迹功能实现。

4. 体验优化

1) 构建骨架图SPA 首屏加载面临较长时间白屏,骨架图是一个完美的”缓兵之计”,相当于加载到下个界面时先把下个页面的雏形加载出来,再加载其余的组件,做到缓冲作用,骨架图对用户体验有极大的提升:

快速展示

配合 PWA 首屏缓存,骨架图可实现瞬间加载&展示,首屏视觉上有冲击性地提升;

稳定加载

消除页面初始加载因多次重绘&资源加载导致的”抖动”需要注意的是,骨架图应尽量保持足够小巧与简单,以确保不会严重影响页面后续加载;

2) 页面切换无论如何优化性能加载,在页面切换时候依旧需要获取页面数据,若处理不好,可能会在数据返回前有短暂的不友好”空白”。通过以下方式可以很好处理这个问题:

切换前:

在确保组件&数据加载完毕前,可保证页面可交互性,减少用户阻塞感;

转场动画:

在大多数原生应用,转场动画属于标配,即时组件&数据已经完全加载,在切换至新页面瞬间,依旧需要页面渲染时间,这段时间可能导致页面短暂空白或者”视觉阻塞”,通过转场动画时间,可以很好地缓解这个问题,大多数页面保证在转场动画完毕之后依然渲染完毕。

小结

单页面应用不是一个新兴的技术,对于很多应用场景可以提供比传统网站更好的用户体验,同时对开发效率,服务器压力等,都有很好的表现,另外,前端的框架,包括比如AngularJS、vue.js、Backbone.js等。

JS Native:覆盖阿里几乎所有产品的全新开发模式,到底有何高明之处(一)?JS Native:覆盖阿里几乎所有产品的全新开发模式,到底有何高明之处(二)?如何高效操作Redis数据库?前端性能提升秘笈!

spa无法seo:为什么绝大部分桌面网站没有采用单页应用 (SPA) 模式?

前面SEO、性能什么的都说过了,抛砖引玉,说说我的观点:

因为用户习惯和业务场景不同,SPA在PC端不一定具有更好的用户体验。

SPA在移动端更多使用,而移动端和PC端具有不同的用户习惯。

先来看看移动端和PC端的差异点:

" data-caption="" data-size="normal" data-rawwidth="903" data-rawheight="193" class="origin_image zh-lightbox-thumb lazy" width="903" data-original="https://pic4.zhimg.com/v2-542a80ce2e115fff472e0d07e1793a37_r.jpg" data-actualsrc="https://pic4.zhimg.com/v2-542a80ce2e115fff472e0d07e1793a37_b.jpg"/>

SPA的主要优势是页面切换的优雅快捷,这个优势在机器、网速飞速发展的PC上不再显著,但有两个缺点是使用SPA后体验糟糕的部分:

    无法满足并行需求。SPA同一时间只有一个页面,是线性的,而工作通常是并行处理各项事务。(据我观察,像我一样需要在至少5个代码仓库和10+个chrome tab页里来切换工作的人不少)上下文自动销毁。试想一下这2个场景,假如使用SPA单页跳转的话:

第一个场景:

(1)一个长的table,里面放在一条条你要处理的数据;

(2)你根据4项指标搜索出某N条数据;

(3)然后你点进第1条数据的详情页查看并处理;

(4)然后……你就没有其他办法还原到第2步的上下文了。无论是后退还是面包屑导航。

(5)但如果是新开tab的多页应用,你就只需要在第4步关掉新开的tab就行。

第二个场景:

(1)打开知乎首页

(2)哇,有轮带逛点赞的小姐姐的照片和一个讨论前端的技术问题。虽然小姐姐很好看,但工作使我快乐,我还是先点开技术问题。

(3)看完技术问题。然后……feed流刷新,你就看不到小姐姐的问题了……

(4)但如果是新开tab的多页应用,你就只需要关掉新开的tab就行。

(貌似知乎最近解决了这个问题,但以前一直是痛点)

上面两个场景,本质上都是页面切换时spa自动销毁了上下文,上下文也不是不能保存,只是通常成本较高。

技术只使用在合适的场景,考虑收益和成本的情况下,PC端不一定非使用单页应用不可。

欢迎指正。

P. S. 天猫诚邀前端技术专家入伙共谋大事,欢迎联系yueyuan.cx@alibaba-inc.com

spa无法seo:零成本实现SPA(单页网页应用)seo优化

由于目前使用vue,react框架的项目越来越多,它们也逐渐体现出巨大优势,但它们的页面代码只有一个根节点和一个js,无法让爬虫抓取到页面内容,为了seo放弃spa就因噎废食了,ssr改动成本比较高,所以今天带大家实现零成本的spa seo优化。

原理:nginx拦截网络爬虫转发请求到node服务器,预渲染出请求页面,返回渲染好的html。如果你的spa路由使用的是hash路由,要改造成browser路由,(vue是history路由),因为hash无法传播,后端拿不到hash参数。

1.准备工作

nginx服务器(如果spa跑在node服务器上就不需要nginx服务器了)

node服务器

2.开始搭建

a.下载nginx,使用以下配置启动项目

server{n    listen 80;n    server_name www.test.com;n    location / {n        root   D:/nginx-1.17.1/html/dist;n        index  index.html;n        try_files $uri /index.html;#brower或者history路由需要设置此项,功能是如果找不到目录文件,使用根目录的index.html文件n        proxy_set_header    X-Real-IP        $remote_addr;n        proxy_set_header    uri              $request_uri;#转发需要的路径参数n        proxy_set_header    server           $server_name;#转发服务器名n        if ($http_user_agent ~* "qihoobot|Baiduspider|Googlebot|Googlebot-Mobile|Googlebot-Image|Mediapartners-Google|Adsbot-Google|Feedfetcher-Google|Yahoo! Slurp|Yahoo! Slurp China|YoudaoBot|Sosospider|Sogou spider|Sogou web spider|MSNBot|ia_archiver|Tomato Bot|FeedDemon|JikeSpider|Indy Library|Alexa Toolbar|AskTbFXTV|AhrefsBot|CrawlDaddy|CoolpadWebkit|Java|Feedly|UniversalFeedParser|ApacheBench|Microsoft URL Control|Swiftbot|ZmEu|oBot|jaunty|Python-urllib|lightDeckReports Bot|YYSpider|DigExt|YisouSpider|HttpClient|MJ12bot|heritrix|EasouSpider|Ezooms|^$")n        {#判断如果是网络爬虫,转发到node服务器下n            proxy_pass http://www.test.com:3000;n            break;n        }n    }n}

start nginx 是启动项目,nginx -s reload 是重启项目

b.下载nodejs,创建你的目录,在目录里打开cmd,使用npm init初始化一个项目

安装以下包:

npm install hotnode -g (node服务热更新,改动代码不需要重启项目,如果使用node 启动项目则不需要安装)

npm install puppeteer --save (页面预渲染所需插件)

npm install koa --save (接口监听框架,也可以使用express)

最终得到类似这样的一个package.json

{n  "name": "spaseo",n  "version": "1.0.0",n  "description": "单页网页应用seo优化",n  "main": "index.js",n  "scripts": {n    "start": "hotnode index.js",n    "test": "echo "Error: no test specified" && exit 1"n  },n  "keywords": [n    "seo"n  ],n  "author": "dsmelon",n  "license": "ISC",n  "dependencies": {n    "koa": "^2.7.0",n    "puppeteer": "^1.18.1"n  }n}n

创建index.js文件,输入以下代码

const puppeteer = require('puppeteer');nconst koa = require('koa');nconst app = new koa();nnlet browser;nnapp.use(async ctx=>{n  const { request: { header: { uri, server } } } = ctx;n  if(!browser){n    browser = await puppeteer.launch({n      headless: true,//无头模式,即不显示浏览器n      ignoreHTTPSErrors: true,//忽略https错误n      devtools: false,//不自动打开控制台(浏览器显示时有效)n    });n  }n  const page = await browser.newPage();n  // await page.goto(`${server}${uri}`,{n  await page.goto('你的单页网页应用连接',{n    waitUntil: ['load', 'networkidle0']//页面加载完并且500ms内没有请求发出判断页面渲染完毕n  });n  const html = await page.content();n  page.close();n  n  ctx.response.body =

html;n})nnapp.listen(3000);nconsole.log('服务启动');n

然后运行,npm start 启动。

可以看到我注释掉了一句await page.goto(`${server}${uri}`,{,这句是上线时替换掉下面那句的,因为本地测试时会死循环,那么接下来我们怎么测试呢。

可以在nginx的配置里判断爬虫那里加上添加上一个|Chrome,这样打开http://www.test.com的时候就会转发到node服务器下处理,然后在nodejs服务器里输出html看一下,可以看到已经有dom结构了。页面上查看源代码也有内部信息了。

直接打开http://www.test.com是不行的,设置成localhost就可以,或者本地添加host映射。

好了,基本就是这样了,如果你的项目是使用nginx派发的,改动成本会很小,如果是node服务器派发的,修改一下判断即可,尽量把爬虫服务器独立出来专门服务爬虫,因为预渲染还是比较消耗性能的。

里面有很多细节都可以微调,比如页面加载完的判断,由于很多人的项目有loading状态,有的还有骨架结构,所以利用500ms内没有请求发出判断页面渲染完毕还是比较靠谱的。返回的html也可以再处理一下把css过滤掉减小尺寸,不过这些都是你们自己的风格。

好了,我完事儿了

文件分享

相关案例查看更多