当前位置: 首页 > Web前端 > vue.js

VuePress博客SEO优化(三)标题和链接优化

时间:2023-04-01 12:56:13 vue.js

前言在《一篇带你用 VuePress + Github Pages 搭建博客》中,我们使用VuePress搭建了一个博客,最终效果查看:TypeScript中文文档。这篇文章讲的是SEO优化的一些细节。1.设置全局的title,description,keywords//config.jsmodule.exports={title:"title",description:'description',head:[['meta',{name:'keywords',content:'keywords'}]]}关于标题怎么写,参考老《百度搜索引擎优化指南2.0》:我们建议网页的标题可以这样描述:首页:网站名或网站名_提供服务介绍或产品介绍频道页:频道名_网站文章页面名称:文章标题_频道名称_网站名称也可以参考本中的规范。关于描述:元描述是对网页内容的简明概括。如果描述与网页内容相匹配,百度会将描述作为摘要的选择目标之一。一个好的描述会帮助用户更容易地从搜索结果中判断你的网页内容是否符合他们的需求。元描述不是权重计算的参考因素。该标签的有无不影响网页的权重,仅作为搜索结果汇总的选择目标。关于关键词,注意关键词之间用英文逗号隔开,中文逗号会被认为是长句。直接看一个百度百科词条的设置:2.通过FrontMatter自定义页面标题、描述、关键词:---title:titledescription:descriptionmeta:-name:keywordscontent:superduperSEO---3.Addingaltattributestoimages根据Google的初学者SEO指南:UsingAltAttributesforImagesGiveDescriptiveFilenamesandAltAttributeDescriptions。alt属性使您能够为图像指定替代文本,如果由于某种原因无法显示图像,它可以用作救援。为什么要使用这个属性?如果用户使用屏幕阅读器等辅助技术查看您的站点,则alt属性的内容会提供有关照片的信息。另一个原因是,如果您使用图像作为链接,图像的替代文本将等同于文本链接的锚文本。但是,如果文本链接可以达到相同的目的,我们建议不要在站点导航中使用过多的图像作为链接。最后,优化图像文件名和替代文本可以帮助图像搜索程序(例如GoogleImages)更好地理解您的图像。4.简化网址参考《百度搜索引擎优化指南2.0》:网址尽量短。长URL不仅不美观,而且用户也很难从中获取额外的有用信息。另一方面,短网址也有助于缩小页面大小,加快网页打开速度,提升用户体验。参考《SEO 新手指南》forGoogleSearchCentral:干净的URL轻松地传达内容为您网站上的文档创建描述性类别和文件名不仅可以帮助您更好地组织您的网站,还可以为想要链接到您的内容的用户提供服务创建更简单、更容易-使用URL。如果URL非常长、模棱两可并且几乎没有可识别的词,访问者可能会被拒之门外。以下URL可能会造成混淆且不易使用:https://www.brandonsbaseballcards.com/folder1/22447478/x2/14032015.html如果您的URL具有明确的含义,它可能在不同的上下文中起作用更实用且更易于使用理解。https://www.brandonsbaseballcards.com/article/ten-rarest-baseball-cards.html像我文档的地址是:https://ts.yayujs.com/learn-typescript/handbook/TheBasics.html其实,不需要learn-typescript。之所以会这样,是因为我之前用过GitHubPages。这是我对应的GitHub仓库的名字。但是如果你自己建网站,就没有必要写这个了。我们直接修改配置。js中的base配置:module.exports={base:''}但是如果你的地址已经发送出去了怎么办?或者它已经包含在内。这时候可以通过Nginx的301重定向来实现:server{listen443ssl;server_namets.yayujs.com;//...位置^~/learn-typescript/{重写^/learn-typescript/(.*)$https://yayujs.com/$1永久;别名/home/www/website/ts/;}//...}现在你访问https://ts.yayujs.com/learn-typescript/handbook/EverydayType.html,它会跳转到https://yayujs.com/handbook/EverydayType.html5。链接加上nofollow搜索引擎的基本PageRank算法,其基本假设是:越重要的页面往往越被其他页面引用。所以我们可以使用nofollow告诉Google不要关注我们链接的页面,这样就不会带走我们页面的权重。那么为什么nofollow会存在呢?这也很好理解,比如你在自己的博客上发表了对垃圾网站的评论,为了提醒别人而添加了这个网站的链接,你当然不希望这个网站从你的名声中获利。这时候就很适合用nofollow了。要使用nofollow,我们只需要给链接添加nofollow属性:Anchortexthere根据官方文档VuePress,我们知道:VuePress博客默认的链接属性是noopenernoreferrer,我们修改config.js,添加nofollow:module.exports={markdown:{externalLinks:{target:'_blank',rel:'nofollownoopenernoreferrer'}我们再查看一下DOM元素,会发现它有nofollow属性:6.多页文章,参考谷歌搜索中心的《FollowingCrawlingandIndexingBestPractices》:Multi-pagearticles:如果你的文章分为几个页面,确保有用户可以点击的下一个和上一个链接,并且这些链接是可抓取的。您需要做的就是允许Google抓取该网页集合。我们不需要在这里做任何特别的事情。不要以为有了侧边栏,就干掉下一篇文章的链接。7.robots.txtrobots.txt文件指定您网站上的哪些URL可以被搜索引擎爬虫访问。这个文件主要是用来防止网站收到过多的请求。但要注意:robots.txt并不是防止搜索引擎抓取某个网页的好机制。如果robots.txt规定了某个文件不应该被访问,但是是否执行完全取决于搜索引擎是否遵循robots.txt,当然Google等搜索引擎会按照规范进行抓取,其他搜索引擎可能会不是。又例如,如果一个网页被其他公共网页引用,则该网页仍然可以被找到并被收录。要正确防止URL出现在Google搜索结果中,您应该使用密码保护服务器上的文件,使用noindex元标记或响应标头,或者完全删除该页面。对于像我这样允许完全访问的站点,告诉搜索引擎我的站点地图地址更有用。由于robots.txt文件应该位于网站的根目录下,我们可以直接在.vupress/public下新建一个robots.txt文件,写入文件内容:站点地图:https://ts.yayujs.com/站点地图。xmlUser-agent:*robots.txt中具体可以设置的字段,请参考“创建robots.txt文件”。除了直接创建,还可以使用[vuepress-plugin-robots]()插件,这里不再赘述。8.404页面参考“搜索引擎优化(SEO)新手指南”:显示有用的404页面网址。使用自定义404页面可以有效地将用户引导回您网站上的正常页面,从而大大改善用户体验。考虑添加一个返回根页面的链接,并提供指向您网站上流行或相关内容的链接。您可以使用GoogleSearchConsole找出导致“未找到”错误的URL的来源。vuepress-theme-reco的404页面默认使用腾讯公益:如果要关闭:module.exports={theme:'reco',themeConfig:{noFoundPageByTencent:false}}样式会变成这样:如果你要这里要修改copy,可以直接在源码里修改,目录是node_modules/vuepress-theme-reco/layouts/404.vue:9.setmodule.exports={head:[['meta',{name:'viewport',content:'width=device-width,initial-scale=1'}],]}这个标签告诉浏览器如何在移动设备上呈现页面。此标记的存在向Google表明该页面适合移动设备。10.测试和优化工具10.1LighthouseGoogleLighthouse是一个用于测量网页质量的开源自动化工具。它可以针对任何公共或需要身份验证的网页运行。GoogleLighthouse审核网页的性能、可访问性和SEO。它还包括测试ProgressiveWebApps是否符合标准和最佳实践的能力。我们安装Lighthouse扩展,然后在需要审核的网站点击Lighthouse插件,然后点击“生成报告”:稍等片刻,会生成一个报告:我们可以查看Performance,Accessibility,BestPractices,SEO,PWA5Scores和每个方面的修改建议,根据这个建议调整,尽可能优化。10.2web.dev官网地址:https://web.dev/measure/,你可以理解为网页版Lighthouse,在网页输出你的地址即可,后面是Lighthouse10.3PageSpeedInsights由Google提供的Pagespeed测试工具,地址:https://pagespeed.web.dev/输入地址后可以分析,会有分数和优化建议:系列文章博客建设系列是唯一的系列目前为止写的实用教程,预计20篇左右,讲解如何使用VuePress搭建和优化博客,部署到GitHub、Gitee、私服等平台。本文为第29篇,全系列文章地址:https://github.com/mqyqingfeng/博客微信:“mqyqingfeng”,加我到SaeYu的唯一读者群。如有错误或不准确的地方,请务必指正,万分感谢。如果你喜欢或者有启发,欢迎star,这也是对作者的鼓励。