前端seo优化详细方案

郝艳峰Vip

已于 2023-05-06 08:38:32 修改

阅读量2.6k

点赞数 2

分类专栏： vue.js 性能优化以及seo 文章标签： seo

于 2021-06-02 12:10:36 首次发布

本文链接：https://blog.csdn.net/ww_5211314/article/details/117464628

版权

vue.js 同时被 2 个专栏收录

83 篇文章 4 订阅

订阅专栏

性能优化以及seo

6 篇文章 2 订阅

订阅专栏

前言：

在好久之前就总结过一个版本的搜索引擎优化，但是那时只是很肤浅的做一些meta中的,description,keywords,以及一些简单的语义化标签，并没有在谷歌搜索引擎中心搜索到自己的网站，这次更新才是真正的做到优化，并且做到了google,facebook收录和埋点事件，百度统计等的一下事件。
之前总结的有关seo优化前端小白浅谈seo优化以及web性能优化方案

本次迭代更新的我们的项目用的技术架构是vue+ssr+nuxt.js服务端渲染。再一个电商网站中需要做seo的页面（也就是需要被收录的网站）总结下来大概就是首页，商品详情页，分类页面，店铺页面，搜索页面保证商品被搜索引擎收录就可以在google中搜索到自己网站的产品了。

我们的项目主要是跨境电商，所以这里主要是针对google,facebook,twitter做了收录

如何让您的网站出现在谷歌的搜索引擎中(seo)

网址：谷歌搜索引擎中心

网页性能分析—谷歌

网页性能分析

接下来说说这次是如何做到seo优化的。

第一步：首先是网站`title`的描述

-1 ，如果是网站首页则描述该网站的内容，
-2 ，如果是商品详情页面则是针对该商品的描述，
-3，如果是分类页则是对所有分类的描述

<title>Buydo.com: Adjustable USB Rechargeable Dual Fiber Shiny LED Pet Collar Cat Dog Neck Band Buy on Buydo</title>

第二步：首先谈谈具体的`meta标签的`问题,其实`meta`标签是很重要的一部分，在seo中。

下面的代码中我会详细介绍每个meta标签的来源以及作用

    <meta data-n-head="ssr" property="description" name="description"  content="有关网站的描述">
    <meta data-n-head="ssr" property="keywords" name="keywords"  content="有关网站的关键词">

og是一种新的HTTP头部标记，就是Open Graph Proocol即这种协议可以让网页成为一个富媒体对象，使用了该标签就意味着你同意了你的网站被其他社会化网站引用，目前这种协议在facebook,twitter上被广泛应用。

如果想要自己的网站被这些社会化网站收录，就要去这些网站注册账号，查看如何被收录，按照网站内的提示去做需要收录的事件和内容

下面写一下在我的网站内按照facebook以及google提示做的收录的内容，这里是Catalog Fields - Commerce Platform (facebook.com)
的官方解答,这里会告诉每一个标签的作用。

     <!-- 产品的品牌 -->
    <meta data-n-head="ssr" property="product:brand" content="buydo">
      <!-- 商品是否可以正常购买，是否有货  -->
    <meta data-n-head="ssr" property="product:availability" content="in stock">
     <!-- 店铺里商品的状态 有几个参考答案：新的，旧的，翻新的 -->
    <meta data-n-head="ssr" property="product:condition" content="new">
      <!-- 网站商品的完整链接，用户可以购买指定商品的链接  -->
    <meta data-n-head="ssr" property="og:url" 
      content="buydo.com/item/a18f4cf96bc041d4979ddca4c2fd1d78.html">
     <!-- 商品的类型和主图  -->
    <meta data-n-head="ssr" property="og:type" content="product">
    <meta data-n-head="ssr" property="og:image"
        content="https://buydo.oss-accelerate.aliyuncs.com/2831821b8f6d4e0bb4dab54cb3021977.jpg">
     <!-- 商品的主键id -->
    <meta data-n-head="ssr" property="og:id" content="a18f4cf96bc041d4979ddca4c2fd1d78">
    <meta data-n-head="ssr" property="og:image_link"
        content="https://buydo.oss-accelerate.aliyuncs.com/2831821b8f6d4e0bb4dab54cb3021977.jpg">
    <meta data-n-head="ssr" property="og:title"
        content="Buydo.com: Adjustable USB Rechargeable Dual Fiber Shiny LED Pet Collar Cat Dog Neck Band Buy on Buydo">
    <meta data-n-head="ssr" property="og:price" content="815">
    <meta data-n-head="ssr" property="g:link"
        content="https://buydo.ccmore.cn/item/a18f4cf96bc041d4979ddca4c2fd1d78.html">
    <meta data-n-head="ssr" property="og:description" content="Best Toys products possible. Buy now - free shipping!">
    <meta data-n-head="ssr" property="og:availability" content="in stock">
<!-- facebook 收录统计信息的id -->
<meta data-n-head="ssr" data-hid="fb:app_id" name="fb:app_id" content="210305637352242">
  <!-- 关于本网站的站点名称 -->
  <meta data-n-head="ssr" data-hid="og:site_name" name="og:site_name" content="www.buydo.com">
 <!-- 关于本网站的app端的下载链接 -->
    <meta data-n-head="ssr" data-hid="al:android:url" name="al:android:url"
        content="https://play.google.com/store/apps/details?id=com.szkskwl.sarge_app">
    <meta data-n-head="ssr" data-hid="al:android:package" name="al:android:package" content="om.szkskwl.sarge_app">
    <meta data-n-head="ssr" data-hid="al:android:app_name" name="al:android:app_name" content="buydo">
    <meta data-n-head="ssr" data-hid="al:iphone:url" name="al:iphone:url"
        content="https://apps.apple.com/us/app/buydo-io/id1532869344">
    <meta data-n-head="ssr" data-hid="al:iphone:app_store_id" name="al:iphone:app_store_id" content="1532869344">
    <meta data-n-head="ssr" data-hid="al:iphone:app_name" name="al:iphone:app_name" content="buydo">
    <!--  这个是谷歌收录要求的。站点主图的宽高  -->
    <meta data-n-head="ssr" data-hid="og:image:width" name="og:image:width" content="600">
    <meta data-n-head="ssr" data-hid="og:image:height" name="og:image:height" content="600">

第三步：代码层面需要优化的事项

1，所有的img标签要加alt属性，产品列表要加产品列表索引
2，所有跳转到商品详情，店铺页面，分类页面，搜索页面都要是用a标签跳转，这样爬虫才能沿着链接爬取下一个链式页面
3，所有a标签要写完整的路径:例如： <a href="https://buydo.com/item/a18f4cf96bc041d4979ddca4c2fd1d78.html"></a>
4，当在网站中输入错误的链接以及产品id，网站必须有正确的404,500页面以用来引导爬虫走完整个流程，而不是弹出错误的选项卡来告诉用户没有该商品之类的

第四步：网站收录事件(google,facebook)以及埋点

1，去google和facebook开发者网站申请账号申请埋点事件，在自己的网站中做埋点，方便google和facebook收录自己网站内的商品和顾客购买某件商品的概率。
2，nuxt+vue-ssr项目中如何做facebook和google统计以及埋点。详情请移步vue-nuxt-ssr 做谷歌，百度统计以及google,facebook埋点总结