vue.js怎么优化seo问题

一个构建和预发布一个seo友好网站的例子

受我最近的经验启发,我花了一些时间来制作一个Vue。我们社区的js教程。现在,我将主要介绍两个主题:

如何使用Vue.js构建一个瘦的web应用程序

如何处理vue.js SEO &与预注册- spa插件

更具体地说,我将带您通过创建一个具有seo友好产品页面的小商店。现场演示和代码回购也将提供。如果你想用Vue来寻找更深入的SEO知识。我们还制作了一个视频教程,你会在这篇文章的最后找到。

我在最新的无头CMS系统中略微提到了Vue,但这次会更深入,所以我很兴奋。

更新:我们正在逐步将Snipcart的前端从主干迁移到Vue。你们可以在这里读到。这里还介绍了Vue转换,并在这里建立了一个Vue博客。

让我们先对那些不熟悉渐进框架的人有所了解。

什么是vue.js到底是什么?

what-is-vuejs-definition

Vue是一个轻量级的、渐进的JavaScript框架,它可以帮助您创建web界面。

不要被定义的“JS框架”所迷惑。对于Vue来说,它与它时髦的对抗式反应截然不同。js & Angular.js。首先,它不是像谷歌和Facebook这样的商业科技巨头的开源副产品。

Evan是在2014年首次发布的,目的是创建一个“增量可接受”的现代JS库。这是Vue最强大的特性之一:创建可插入组件,您可以添加到任何项目,而不需要进行重大的重构。任何开发人员都可以在项目中尝试Vue,而不会破坏或加重其现有代码库。

除了模式术语之外,我觉得Vue的前提是:

1。你不可能从一开始就知道整个应用程序的状态结构

2。您的数据肯定会在运行时发生变化

它围绕着库本身的这些约束:它是递增的、基于组件的、并且是被动的。组件的粒度结构使您可以轻松地将逻辑关注点分离,同时保持对它们的可重用性。最重要的是,它会将你的数据绑定到视图上,这样当需要的时候(通过观察者)就可以神奇地更新数据。尽管可以用许多具有反应性的前端框架来定义相同的定义,但我发现Vue的实现更优雅,而且对于大多数用例来说,这是一个更好的方法。

Vue的学习曲线比它的反应更柔和,这需要JSX模板知识。

一个人甚至可以说Vue是反应减去尴尬的部分!,)

与其他JS框架进行更深入的比较——反应,角度,余烬,敲除,聚合物,暴乱-检查官方文档的主题。

最后但同样重要的是,性能和见解深刻的开发工具Vue提供了一个很棒的编码体验。毫无疑问,它的普及正在飞速发展。

vuejs-popularity

从像Laravel & PageKit这样的开源项目到像Gitlab & Codeship这样的企业(更不用说阿里巴巴和百度巨头),很多组织都在使用Vue。

然而,现在是时候看看我们该如何使用它了。

我们的vue.js示例:一个快速、友好的电子商务应用程序

在本节中,我将向您展示如何使用Vue 2.0 & Snipcart,我们的devs HTML/JS cart平台构建一个小型电子商务应用程序。我们还将看到如何确保产品页面正确地“爬行”用于搜索引擎机器人。

的必备条件

最小的Vue知识。js-start这里。

基本了解vuex和vue路由器。

一个Snipcart帐户(永远免费的测试模式)。

如果你想更深入地了解所有的东西Vue 2.0,laracast ‘让你覆盖了这个系列。

1。设置环境

首先,我们将使用Vue – cli来搭建一个基本的Vue应用程序。在您最喜欢的终端,输入:

npm安装- g vue-cli

vue init webpack-simple vue-snipcart

这将创建一个新的vue – snipcart文件夹,其中包含一个使用vue – loader的基本配置。它还将使我们能够编写一个单一的文件组件(模板/ js/ css)。vue文件)。

我们希望这个演示尽可能真实,所以我们将在Vue SPA中添加另外两个模块,用于大型应用程序:vuex和Vue – router。

vuex是一种类似flux的状态管理器——非常轻,但非常强大。它受到Redux的强烈影响,在这里你可以学到更多。

vue- router允许你定义动态处理应用程序组件的路由。

要安装这些,请进入新的vue – snipcart项目文件夹并运行以下命令:

npm安装,节省vue-router

npm安装,节省vuex

另一件要安装的东西是预插- sp – plugin,它将使我们能够完成可爬行的路由:

npm安装,节省prerender-spa-plugin

我们快到了,最后四个包是:

对于模板,我更喜欢HTML。

vuex- rouc – sync可以直接在我们的vuex状态中注入我们的路由器信息。

copy- webpackin – plugin可以让我们更容易地在dist文件夹中包含我们的静态文件。

babel- polyfillo在PhantomJS中运行Vue(在我们的预发布插件中使用)。

运行这些:

npm安装,节省vuex-router-sync

npm安装,节省copy-webpack-plugin

npm安装,节省babel-polyfill

2。组装体系结构

安装:检查。是时候设置一切了,这样它就能处理我们商店的数据了。

让我们从vuex商店开始。我们将用这个来存储/访问我们的产品信息。

在这个演示中,我们将使用静态数据,不过如果我们想要获取它,它仍然会工作。

注意:使用Snipcart,我们使用一个基本的JS片段插入购物车,并使用简单的HTML属性在标记中定义产品。

2.1构建存储

在src文件中创建一个存储文件夹,以及3个文件:

状态。js定义我们的静态产品

getter。通过ID定义一个get函数来检索产品

索引。js把前两个捆绑在一起

2.2建筑路由器

我们将保持我们的商店基本:首页列出产品+每个产品的详细信息页面。我们需要在路由器上注册两条线路来处理这些:

2.3将这些链接到一起

现在我们有了我们的商店和路由器,我们需要在我们的应用程序中注册它们

3所示。制作Vue组件

拥有数据感觉很棒,但显示它更好。

4所示。创建应用程序

让我们使用我们的新组件,是吗?

打开App.vue文件。其中的内容仍然是由vue init webpack-simple scaffolding生成的默认值。

5.Vue处理。js SEO与预发布插件

我们的应用程序的所有内容都是动态呈现的,而JS并不是超级搜索引擎优化:我们页面的异步内容不能被搜索引擎机器人最优地抓取。如果有一个电子商务网站错过了所有有机的交通机会,那将是不明智的。

考虑为你的应用程序页面添加适当的元标签&一个站点地图。您可以在这里学习更多关于元标签的“postProcessHtml”功能。

伟大的内容在现代SEO中起着巨大的作用。我们建议在你的应用程序中确保内容的创建、编辑和优化。为了增强内容编辑能力,可以考虑将无头CMS放入混合结构中,并构建一个真正的JAMstack。

HTTPS connexion现在正式成为谷歌的排名因素。我们在Netlify上托管这个演示,它提供所有计划的免费SSL证书。

移动先行索引和移动友好度排名是真实的。确保你的移动体验和桌面体验一样快和完整!

GitHub repo,live Vue演示和视频教程

声明:本文由 宁波SEO原创或整理发布,已提交版权信息!请勿采集,违者必究! 更多优化知识请查看 SEO教程

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注