搜索引擎优化,或SEO,是任何网站或Web应用程序的关键部分. 应用程序和网站不容易被搜索引擎索引或优化不良将最终隐藏在搜索结果的页面和页面后面。
标签: Meta tags
当大多数开发人员想到SEO时,第一件事是填充他们的<head>元素,充满了Meta标签,所以如何使用Vue?输入vue-meta。
首先,通过 Yarn 或 NPM 安装vue-meta。
然后,导入并在您的Vue入口点中使用它:
1import Vue from 'vue';
2...
3import Meta from 'vue-meta';
4
5Vue.use(Meta);
6...
现在在您的组件中,您可以添加一个包含您要注入到您的<head>中的各种比特的metaInfo属性:
1<template>
2 ...
3</template>
4
5<script>
6export default {
7 ...
8 metaInfo: {
9 // Children can override the title.
10 title: 'My Page Title',
11 // Result: My Page Title ← My Site
12 // If a child changes the title to "My Other Page Title",
13 // it will become: My Other Page Title ← My Site
14 titleTemplate: '%s ← My Site',
15 // Define meta tags here.
16 meta: [
17 {http-equiv: 'Content-Type', content: 'text/html; charset=utf-8'},
18 {name: 'viewport', content: 'width=device-width, initial-scale=1'},
19 {name: 'description', content: 'I have things here on my site.'}
20 ]
21 }
22}
23</script>
社会日
对于每个页面,包括相关的社交媒体标签也是一个好主意,特别是如果你希望它在社交媒体上共享。
1metaInfo: {
2 ...
3 meta: [
4 ...
5 // OpenGraph data (Most widely used)
6 {property: 'og:title', content: 'My Page Title ← My Site'},
7 {property: 'og:site_name', content: 'My Site'},
8 // The list of types is available here: http://ogp.me/#types
9 {property: 'og:type', content: 'website'},
10 // Should the the same as your canonical link, see below.
11 {property: 'og:url', content: 'https://www.my-site.com/my-special-page'},
12 {property: 'og:image', content: 'https://www.my-site.com/my-special-image.jpg'},
13 // Often the same as your meta description, but not always.
14 {property: 'og:description', content: 'I have things here on my site.'}
15
16 // Twitter card
17 {name: 'twitter:card', content: 'summary'},
18 {name: 'twitter:site', content: 'https://www.my-site.com/my-special-page'},
19 {name: 'twitter:title', content: 'My Page Title ← My Site'},
20 {name: 'twitter:description', content: 'I have things here on my site.'},
21 // Your twitter handle, if you have one.
22 {name: 'twitter:creator', content: '@alligatorio'}
23 {name: 'twitter:image:src', content: 'https://www.my-site.com/my-special-image.jpg'},
24
25 // Google / Schema.org markup:
26 {itemprop: 'name', content: 'My Page Title ← My Site'},
27 {itemprop: 'description', content: 'I have things here on my site.'},
28 {itemprop: 'image', content: 'https://www.my-site.com/my-special-image.jpg'}
29 ]
30}
加拿大链接
它是完全可能的,特别是对于SPA,用户最终的URL和代表该页面的URL在服务器上可能略有不同,或者有人可能会访问www.my-site.com而不是my-site.com或相反。
1metaInfo: {
2 ...
3 link: [
4 {rel: 'canonical', href: 'https://www.my-site.com/my-special-page'}
5 ]
6}
站点
至少对于小型网站来说,拥有网站地图并不重要,但网站地图可以帮助搜索引擎指出您认为哪些页面在您的网站上具有特别的相关性和重要性。
一个例子(简单的):
1[label sitemap.xml]
2<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
3 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
4 xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
5 <url>
6 <loc>https://www.my-site.com</loc>
7 </url>
8 <url>
9 <loc>https://www.my-site.com/my-special-page</loc>
10 </url>
11 <url>
12 <loc>https://www.my-site.com/my-other-special-page</loc>
13 </url>
14 <url>
15 <loc>https://www.my-site.com/okay-this-one-isnt-that-special-but-it-kinda-works</loc>
16 </url>
17</urlset>
您可以通过添加如下这样的行添加robots.txt中的网站地图:
1[label robots.txt]
2Sitemap: https://www.my-site.com/sitemap.xml
移动优化
至少谷歌更喜欢移动优化的网站。
以下是会给你移动优化警告的问题:
- 未设置「viewport」元标签(见上文)。
- 视图端口宽度是固定的
- 内容需要横向滚动
- 字体大小太小
- 触摸元素过近
Google 的指南可以为您提供一些关于如何纠正这些问题的指南。
如果您的网站是 PWA,您也可以获得额外的奖金点。
其他问题
如果您的网站没有通过 HTTPS 服务或您的 HTTPS 配置被打破,您将获得排名打击
- 页面速度是 SEO 中的重要因素,因为一些搜索引擎更喜欢在几秒钟内加载的网站,而具有潜在更好的内容的网站是令人难以置信的缓慢和膨胀
- 如果没有人链接到您的网站,可能需要一段时间才能提高搜索排名。
您可以使用 Lighthouse来测试可能影响您的搜索排名的各种问题。
主持人 / SSR
最后但并非最不重要的是,SPA是默认的SEO劣势,因为所有URL都通过单一路线处理,浏览器将需要能够运行JavaScript来渲染完整的页面(一个Iffy过程)。
通常使用的两种方法可以将一个SPA转化为一堆已经拥有的页面,在加载SPA之前呈现页面上的数据:
- Prerendering - 两种方法中最简单的方法. 基本上,你有一个浏览器在你的构建步骤中自动访问你想要在你的应用程序中预订的所有页面,它会喷出任何结果的HTML。 你可以大致将其放入你的现有构建步骤
- 服务器侧渲染 - SSR是一个更为复杂的过程。
对于绝大多数网站来说, Prerendering是最简单的解决方案,但对于高度动态的网站, SSR可能更受欢迎。
<$>[注]这就是它!如果还有其他东西你可以想到,这可能有助于搜索引擎排名你的Vue.js项目更高, 让我们知道! <$>