腾讯云

文章/答案/技术大牛

发布

社区首页 >专栏 >网站SEO优化：Meta标签如何书写？Vue项目怎么优化Meta标签？

网站SEO优化：Meta标签如何书写？Vue项目怎么优化Meta标签？

原创

Mintimate

修改于 2022-01-21 02:47:52

4.1K5

文章被收录于专栏：Mintimate's BlogMintimate's Blog

作者：Mintimate

博客：https://www.mintimate.cn
Mintimate’s Blog，只为与你分享

Meta标签

什么是Meta标签呢？这可不是最近很火的“元宇宙”或是FB。Meta标签，或者说Meta元素，是HTML内head标签的一部分。通常用于指定页面描述、关键字以及未在其他head元素、属性中提供的其他元数据。间接参与浏览器页面渲染，或者为搜索引擎的爬虫提供引导（进而让搜索引擎更好收录网站）。

对于包含HTML 4.01和XHTML的HTML，有四个有效的属性：content、http-equiv、name和scheme。在HTML 5下，现在有五个有效的属性，添加了charset。http-equiv用于模拟HTTP标题，并用name来嵌入元数据。

而我们SEO优化，就是针对SEO的有效属性，衍生出的keywords、description和viewport。

SEO优化

SEO优化是为了什么呢？总的来说，有两大作用：

让搜索引擎收录，用户可以使用搜索引擎搜索到你的网站。
让自己网站的搜索排名提高，用户使用搜索引擎可以更快找到你的网站。

有些人可能会说，直接把sitemap.xml丢到各大搜索引擎的站点之家不就好了？这样……一般只有收录的目的，排名和展示效果就看运气了。

SEO主要影响因素：网站内的外链、网站的友情链接、网站的定位和内容、网站的存在时间、网站的关键词、网站的描述。其中，前几项取决于你body标签内具体写了什么，而后几项就是我们head标签内Meta来描述，也可以提升展示效果和排名。

viewport

viewport标签，如果写响应式布局的小伙伴应该很熟悉，格式为：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">

当然，content内参数你可以自定义，但是一般模版是这样。用途：

移动端放大并宽度自适应

部分搜索引擎爬虫（e.g.Google）判断网站的适配性，会根据viewport，对页面进行判断；所以，这个标签最好添加上。

description

description标签，用一句话或一段话来描述页面的内容和信息；比如：腾讯云社区。

<meta name="description" content="云+社区是腾讯云官网开发者社区，致力于打造开发者的技术分享型社区。提供专栏,问答，沙龙等产品和服务，汇聚海量精品云计算使用和开发经验，致力于帮助开发者快速成长与发展，营造开放的云计算技术生态圈。">

有利于搜索引擎的爬取：

个人认为，一句话能言简意赅地描述主要内容最好，最好能设计关键信息，比如：云+社区，就是开发者、云计算和社区。让爬虫知道你网站页面是做什么的，进而大数据统计提升你的网站排名。

keywords

keywords标签，顾名思义就是关键词，网站页面设计的关键词，方便搜索引擎进行关键词录入。每次腾讯云社区，写完文章，也会让我们自定义关键词：

这个和Wordpress文章相识，在文章保存后，渲染为keywords标签，比如：腾讯云社区

这里的格式注意：词与词之间，使用半角逗号隔开（爬虫使用split分割？）。

你也可以看看搜索引擎后台的统计，看看用户一般用什么关键词搜索到你的页面，进而进行更改：

og标签

还有一个很重要的meta类别属性：The Open Graph protocol，就是平时meta内，name为og开头的属性，比如我博客的og标签：

<meta property="”og:title”" content="Mintimate's Blog">
<meta property="og:description" content="Mintimate's Blog为你我贡献经验，主要分享Linux的使用教程，同时也分享分享代码设计；偶尔荒腔走板聊聊Android、服务器以及程序员生活～～～">
<meta property="”og:image”" content="https://imagehost.mintimate.cn/index_img/od_banner.jpg">
<meta property="og:url" content="https://www.mintimate.cn/">

腾讯云官网也有og标签：

<meta property="og:title" content="腾讯云 - 产业智变 云启未来">
<meta property="og:description" content="腾讯云为数百万的企业和开发者提供安全稳定的云计算服务，涵盖云服务器、云数据库、云存储、视频与CDN、域名注册等全方位云服务和各行业解决方案。">
<meta property="og:image" content="https://cloudcache.tencent-cloud.com/open_proj/proj_qcloud_v2/gateway/shareicons/cloud.png">
<meta property="og:url" content="https://cloud.tencent.com">

og标签的全称是：The Open Graph protocol。用处最多的就是当用户使用百度分享等分享类插件工具，将网页分享到微博或者 facebook、twitter 时候，SNS 网站中的内容就是按照我们 OG 协议属性规定的内容呈现，以此保证信息分享更准确更符合作者所想。

更简单的理解就是分享时候的外链卡片显示……

比如：QQ就是参考OG的og:image属性设置的图片

现在越来越多的搜索引擎，也支持og（e.g. 百度在2015年支持爬取og标签）。

Vue项目优化

现在我们看看Vue的项目优化，因为Vue项目使用单页进行开发。实际上，单页的网站（尤其是Vue路由的hash模式），搜索引擎很难爬取到（日后不知道会不会有优化了……）。相比于搜索引擎自动发现，还是手动暴露比较好。即：提交sitemap.xml和标记meta。

siemap.xml这个不在今天讨论范围，这次说说meta的生成，使用Vue-meta组件。

Vue2.x

Vue2.x使用Vue-meta十分简单，没什么坑（用Vue3.x时候……呜呜呜，全是坑）。

实现的方法很多，我这里讲解我的实现思路：

VueX设置每个页面的description和keywords，之后作用于Vue-meta并在路由内拦截赋值。

首先是使用npm或其他包管理器安装：

npm i vue-meta

因为使用了VueX，添加一个全局变量进行：

export default ({
  namespaced: true,
  state: {
    metaInfo: {
      title: "",
      keywords: "",
      description: ""
    }
  },
  mutations: {
    CHANGE_META_INFO(state, metaInfo) {
      state.metaInfo = metaInfo;
    }
  },
  actions: {},
  modules: {}
})

之后在脚手架内引入：

为了能在页面内，丝滑地更改meta内的description和keywords，我们重写一下函数：

metaInfo() {
    return {
      title: this.$store.state.metaModule.metaInfo.title,
      meta: [
        {
          name: "keywords",
          content: this.$store.state.metaModule.metaInfo.keywords
        }, {
          name: "description",
          content: this.$store.state.metaModule.metaInfo.description
        }
      ]
    }
  },

脚手架的配置文件：

最后是在路由内配置前置守卫：

// 全局前置守卫
router.beforeEach((to, from, next) => {
  if (to.meta.metaInfo) {
    store.commit("metaModule/CHANGE_META_INFO", to.meta.metaInfo)
  }
  next()
})

到此，我们的Vue-meta就使用完成，在路由内添加即可：

效果验收：

至于og属性，你可以参考官网进行自定义，比如这里自定义一个og的image：og:url，全局VueX内添加：

之后到修改脚手架内的内容：

Vue内直接操作DOM元素，确实不是一个好方法，大家可以试试其他方法优化～～

效果也显而易见：

Vue3.x

Vue3.x的Vue-meta还在Debug，不清楚是设计原因还是全面改制，用Vue2的方法基本不能操作。尤其是description标签，不清楚是否为官方bug，我一直以为是我的代码问题，后来在GitHub的issue内看到有大神提供的解决方案：Vue-meta issue#696

思路和刚刚一样。我们先用npm等包管理器安装：

npm install vue-meta@next --save

之后，我们VueX内设置：

export default ({
  namespaced: true,
  state: {
    metaInfo: {
      title: "",
      keywords: "",
      description: ""
    }
  },
  mutations: {
    CHANGE_META_INFO(state, metaInfo) {
      state.metaInfo = metaInfo;
    }
  },
  actions: {},
  modules: {}
})

我们在脚手架main.js内引用Vue-meta：

// Vue-meta
import {createMetaManager} from "vue-meta";

关键的来了，重写方法：

const metaManager = createMetaManager(false, {
    meta: { tag: 'meta', nameless: true },
});

这样description标签才能显示正常。

最后，和Vue2.x一样，配置前置路由守卫：

// 全局前置守卫
router.beforeEach((to, from, next) => {
  if (to.meta.metaInfo) {
    store.commit("metaModule/CHANGE_META_INFO", to.meta.metaInfo)
  }
  next()
})

在路由内添加meta标签即可：

  {
    path: '/',
    name: 'Home',
    meta: {
      metaInfo: {
        title: "在线工具箱-By Mintimate",
        description:"Mintimate的在线工具箱，致力于打造便民服务。为开发者、Minecraft游戏爱好者，创建方便的在线工具",
        keywords: "在线工具箱,便民根据,站点根据,开发者,开发者实用工具,IP查询,图片处理,Base64转码,字数统计,字符统计,MC服务器检测,Minecraft服务器检测",
      }
    },
    component: Home
  },