最近在實習，剛來沒幾天，老大沒安排什麼大事給我，昨天下午說給我一個小任務，要求如下：

• 1.收集幾個流量大的網站(必須是vue做的)頁面互動和邏輯儘可能複雜多樣
• 2.對比一下各個頁面的seo是如何做的
• 3.網站中出現率做多的公共元件或者公共方法是什麼

於是我就開始收集了，在這期間也瞭解到了很多東西。

1 .首先怎麼判斷網站是用vue做的，我的方法當然是先搜一搜，當讓搜出來的並不一定是，接下來可以用vue-develop這個外掛，只要你安裝了這個外掛，是vue的網站該外掛的圖示就會點亮
2 .如何判斷該網站是否是高流量網站，我的方法是去站長之家 看看他的alexa排名，一般情況下排名越靠前流量越高，也可以看看他的seo綜合查詢的情況，這樣我就找出了相對高流量的網站。
3 .如何分析一個頁面的SEO技術，我之前也是一頭霧水，後來看了好多資料，找到了一片感覺比較可靠

診斷網站seo 一共有三篇文章，比較詳細。
4 .看了老大給的要求我就想到了由於專案使用的vue,會存在SEO的問題，讓我分析頁面的SEO最好不要漏掉最近流行的適用於vue的SEO優化方案，我查了一下，大概有以下幾種：
（1）ssr,即單頁面後臺渲染
（2）vue-meta-info 與prerender-spa-plugin 預渲染
（3）nuxt
（4）phantomjs

最終我有了下面的輸出

Vue網站及分析

1. 高流量vue網站

2. Vue網站SEO分析

1） bilibili做了基本的seo優化，比如
（1）TDK描敘詳細。
（2）提升網頁載入速度：對外聯css,以及js使用了延遲載入以及dns-prefetch，preload。
（3）外聯較多，關鍵詞排名高。
2） 掘金網站使用了vue-meta-info 管理網站的meta，應該配合使用了prerender-spa-plugin 對SEO進行了優化。
3） Element在logo上加了首頁的地址，並且只有logo是放在h1標籤中。
4） 有一些流量不太高的網站比如

http://www.marshall.edu （Marshall University）做了seo社會化分享優化，在meta資訊中出現了property=”og:title”這種新東西；https://we.dji.com/zh-CN/campus （大疆招聘）使用了Nuxt

3. 網站中出現率最高的公共元件或公共方法

1） 麵包屑導航
2） Icon
3） 搜尋框
4） Button元件