专栏首页Mintimate's Blog网站SEO优化:Meta标签如何书写?Vue项目怎么优化Meta标签?
原创

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

作者:Mintimate

博客:https://www.mintimate.cn

Mintimate’s Blog,只为与你分享

那句话怎么说来着的?头图不能少!

Meta标签

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

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

而我们SEO优化,就是针对SEO的有效属性,衍生出的keywordsdescriptionviewport

云+社区的Meta标签

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,对页面进行判断;所以,这个标签最好添加上。

网站的适配性(Google)

description

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

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

有利于搜索引擎的爬取:

百度搜索引擎的效果

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

keywords

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

自定义关键词

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

云+社区

这里的格式注意:词与词之间,使用半角逗号隔开(爬虫使用split分割?)。

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

我网站的统计(Google)

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属性设置的图片

QQ的分享外链

现在越来越多的搜索引擎,也支持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设置每个页面的descriptionkeywords,之后作用于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: {}
})
VueX内配置

之后在脚手架内引入:

脚手架内引入

为了能在页面内,丝滑地更改meta内的descriptionkeywords,我们重写一下函数:

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就使用完成,在路由内添加即可:

Demo

效果验收:

最终效果

至于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: {}
})
VueX

我们在脚手架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
  },
路由内配置

最终效果

最终效果

当然,设置og标签也一样,Vue2.x演示,这里就不演示了哦。

END

到此,网站SEO优化就讲到这里哦。Meta标签书写,还有挺多其他内容的,受限于篇幅,这次就讲这么多哦。如果文章大家喜欢,下次继续~

另外,Vue项目,提交sitemap.xml,也就是站点地图到搜索引擎也很重要哦。


最后,如果你也是开发者,而且使用或者希望使用腾讯云的产品,或者对腾讯云产品有什么意见或建议。欢迎各位开发者加入腾讯TDP哦,当然也可以进来交流交流代码技术(比如:交流交流怎么网站SEO优化……哈哈?):

TDP链接

原创声明,本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

登录 后参与评论
0 条评论

相关文章

  • META标签优化SEO

    meta标签,位于HTML文档的< head >与< title >之间,它提供的信息虽然用户不可见,但却是文档最基本的元信息。meta标签除了提供文档字符集、...

    白菜博客
  • SEO运用meta标签进行网站优化

    隐藏状态栏/设置状态栏颜色:只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent...

    Java学习录
  • 禁止搜索引擎引用本页面和 seo 优化,都和 meta 标签有关?

    SEO 又称搜索引擎优化,是 Search Engine Optimization 的缩写。

    PHP开发工程师
  • 前端!来点 SEO 知识学学

    之前有同学在前端技术分享时提到了SEO,另一同学问我SEO是什么,我当时非常诧异,作为前端应该对SEO很了解才对,不过仔细想想,现在前后端分离的大趋势下,SPA...

    coder_koala
  • 【译】JavaScript对SEO的影响

    当为应用程序选择技术栈时,就需要慎重考虑几个方面:选择的编程语言和框架对开发周期的影响、应用程序的性能以及在网络中是否容易被人发现——在线可发现性。

    腾讯IVWEB团队
  • 从“一滴水”映射整个“搜索引擎机制”

    今天我们主要借这个机会说说搜索引擎的工作原理~ 小编2014年年底的时候,去三亚旅游,当时有一天,中午打算在住的旅店吃饭,于是打算叫KFC来吃。 打开百度,搜...

    HTML5学堂
  • Projects: 前端和 SEO

    西南_张家辉
  • [原创]Vuepress SEO优化教程(附完整方法)

    真不是沪小羊吹啊,Google给沪小羊的vuepress网站的SEO水平打97分。

    极客中心
  • WordPress SEO优化:添加OG协议标签

    翻看一些主流网址的网页源代码,在 HTTP 头部经常能看到一些 og:type、og:title、og:image 的 meta 标签。这些 OG 是什么东西?...

    Yangsh888
  • web前端入门

    8 = html + css +javascript(jQuery和vue就是js封装的函数而已)

    小闫同学啊
  • 网络推广seo 针对代码

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <ti...

    似水的流年
  • 现有vue项目seo优化

    主要的库:prerender-spa-plugin (注意必须要用history的路由模式)

    用户1757954
  • 网站页面优化:其它元标签

    ‍元标签,在网站页面优化:标题(TITLE)、网站页面优化:关键词(KEYWORDS)和网站页面优化:描述(DESCRIPTION)这三节课中分别介绍SEO标题...

    林雍岷
  • SEO学习记录

    出来对应的相关下拉框:枸杞的作用和功效、枸杞泡水的正确吃法、枸杞加什么最壮阳...

    用户1757954
  • OG标签是什么?

    网络从2000年到今天这20年间飞速的发展起来,能在网络上获取到的内容也越来越丰富,99年有了自己第一台个人电脑,那时候是一台有着“大屁股”显示器的TCL台式机...

    云点SEO
  • vue_SSR框架:搭好的Vue服务器渲染框架,用vue做网站开发、做seo的首选。

    最成熟的Vue ssr框架,一个命令就能启动和部署。零侵入开发,跟开发vue纯客户端一模一样。

    前端江太公

扫码关注腾讯云开发者

领取腾讯云代金券