資訊專欄INFORMATION COLUMN
簡介
SEO、Meta、搜索引擎優化、簡單教程
細心的同學可能發現了開頭出現了關鍵字，這是為什么呢？閱讀完本文后大家就會明白了。
同學們有沒有想過互聯網上用戶、網站 有多少呢？這里提供一個網站 internet live stats 里面實時的給出了一些關于互聯網實時狀態的統計，這里給出一張 2019年4月4日7點左右時的狀態截圖：
可能圖上的數據不夠準確，但是作為參考可以發現 網站總數 大概在 16億 左右，當查找一個網站并對其訪問，相當于在人海茫茫的世界里找到你的另一半。這個概率還是相當低的，為了解決這個問題 搜索引擎 便誕生了，我們最常用的搜索引擎 有百度、必應、谷歌等。
SEO搜索引擎 是根據什么來記錄網站和自然排名？
搜索引擎 在記錄網站和自然排名上有一套規則，對這套規則作出相應的優化便稱之為 SEO 即 Search Engine Optimization（搜索引擎優化）。搜索引擎優化里面門道挺多也產生了相關的職業，在京東相關書籍排名第一的 《SEO實戰密碼：60天網站流量提高20倍》 足足有 640 頁。
HTML網站最終都會被輸出為 html 頁面，這也是搜索引擎能夠觸及的最小單元之一。當然在傳統后端 MVC 直接輸出 html 的方法，優化起來相對容易。不過現在前端開發多為單頁應用，輸出的 html 需要經過 JavaScript 渲染后才能真正的被顯示。在單頁面應用解決 SEO 上有兩種比較常見的方法：
利用后端渲染，直接輸出 html。
利用 head 中的 meta 相關屬性。
文章范圍在本文章中將講解 SEO 中 meta 相關內容，在 meta 標簽主要有 title、description、keywords 三個地方對 SEO 有幫助，Heading 標簽 相關可以查看 H1 の 小秘密。
titletitle 標題標簽告訴用戶和搜索引擎一個特定網頁的主題是什么，所以 title 應該該準確描述網頁的內容，并且 title 在 搜索引擎 顯示結果時會直接顯示輸出，如果太長的話 搜索引擎 只會顯示一部分內容。
最好帶上幾個關鍵詞用 -、|、空格 等方式進行分隔，例如掘金主頁的title就包含了 掘金、juejin.im、一個幫助開發者成長的社區 三個關鍵詞，同學可以再搜索引擎中分別搜索試試應該都會排在第一個結果。
description掘金 - juejin.im - 一個幫助開發者成長的社區
description 描述標簽提供了關于這個網頁的總括性描述，如果網頁摘要里的某個詞語恰好出現在用戶的查詢里，那么這個詞語將被高亮顯示。
description 應該準確概括頁面上的內容，并且不同的頁面最好有不同的 description如果描述標簽寫的好，可以提升頁面的點擊率。例如掘金在主頁是對整個掘金的整體描述，而在文章中的 description 則截取文章中開頭的部分內容。
keywordskeywords 關鍵詞標簽 對于頁面優化來說重要性已經大不如前，不過對于 SEO 還是有一定的幫助，不要在 keywords 中堆砌太多關鍵詞大概在 5-6 最佳并用 , 分隔開內容，這里以掘金的主頁 keywords 為例子：
實例這里的實例為 掘金 這個站點，掘金 是使用 vue 來作為單頁面開發的。也就會遇到 html 不能被直接搜索引擎檢索的問題，從頁面標簽的 data-vue-meta 來看應該是使用了 vue-meta 來解決 SEO 的問題。
通過這個例子大家可以明白的看到 title、description、keywords 三劍客的魔力。當然也可以利用這個規則，來提升文章在 搜索引擎 的自然排行。
主頁這里的小列表叫做 網站鏈接 感興趣的同學可以搜索看看。title
在 搜索引擎 搜索掘金便會看到 掘金- juejin.im - 一個幫助開發者成長的社區 被優先放大顯示，這也是掘金主頁上的標題。
description而 掘金是一個幫助開發者成長的社區，是給開發者用的 Hacker News，給設計師用的 Designer News，和給產品經理用的 Medium。掘金的技術文章由稀土上聚集的技術... 則為掘金主頁中 description 中的部分內容截取。
keywords關鍵字在這次搜索中起到的幫助作用并不大，雖然主頁的 keywords 中也提到了 掘金。
個人文章 title標題為 文章名稱 和 掘金 組成 ，所以在取文章名字的時候盡量帶上文章的關鍵詞，這樣會比較容易被用戶檢索到。像小二的 該不該優雅 這個關鍵詞就是一個標準的錯誤示范，正常用戶會喜歡搜索的是 性能、可讀性。
description描述為文章正文中截取的部分開頭，這也是小二在文章頭部加上了 SEO、Meta、搜索引擎優化、簡單教程 的原因，通過使用關鍵詞可以方便大家搜索到這篇文章。
ps: 大家在寫文章時，也可以像小二這樣在開頭拋出關鍵詞哦。keywords
關鍵詞為創建文章時選擇的關鍵詞。
個人詳情 title標題為兩個關鍵字組成 zhangxiangliang、掘金。
description描述為用戶職業、用戶公司、用戶個人簽名 組成，所以在寫個人信息的時候一定要好好寫，用戶在搜索時可以很容易的搜索到你。不信你可以搜索 全棧魔法師 試試，你會發現小二就排列在搜索結果的第二個。
keywords關鍵詞為用戶名稱 zhangxiangliang 并未做出更多的相關關鍵詞。
SEO 相關內容H1 の 小秘密
SEO 初體驗
img の 小九九
千里姻緣一線牽
一起成長在困惑的城市里總少不了并肩同行的 伙伴 讓我們一起成長。
如果您想讓更多人看到文章可以點個 點贊。
如果您想激勵小二可以到 Github 給個 小星星。
如果您想與小二更多交流添加微信 m353839115。
本文原稿來自 PushMeTop
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103205.html
showImg(https://segmentfault.com/img/remote/1460000018760855?w=900&h=500); 簡介 SEO、Meta、搜索引擎優化、簡單教程 細心的同學可能發現了開頭出現了關鍵字，這是為什么呢？閱讀完本文后大家就會明白了。 同學們有沒有想過互聯網上用戶、網站 有多少呢？這里提供一個網站 internet live stats 里面實時的給出了...
showImg(https://segmentfault.com/img/remote/1460000018808058?w=900&h=500); 簡介 SEO、sitemap、搜索引擎優化、簡單教程 在曖昧期和暗戀期時心里總是懸掛著： ta 為什么還不和我表白？ ta 是不是對我沒感覺？ ta 是不是只是把我當備胎？ ta 是不是對誰都這樣？ 解決問題最簡單的方式就是直接 問問對方...
showImg(https://segmentfault.com/img/remote/1460000018825131); 簡介 SEO、robot.txt、搜索引擎優化 在浩海的互聯網世界中： 互聯網 宛如 宇宙 站點 宛如 星系 網頁 宛如 星球 網頁內容 宛如 生靈萬物 而在互聯網世界漫游的搜索引擎爬蟲小蜘蛛，就好比一搜穿梭在宇宙里的星際漫游器，想想是不是還挺浪漫的。對于不同的星系有著...
showImg(https://segmentfault.com/img/remote/1460000018747727?w=900&h=500); 簡介 heading 標簽、SEO、無障礙閱讀 ps: 內容有點多，本來只想講一個點，但是關聯性太強了，所以辛苦大家了。 在學習 HTML 標簽的時候，很多教程只告訴你 怎么用 而沒有講清楚 是什么，讓我們一起從 h1 到 h6 開始重新認識 HTM...
showImg(https://segmentfault.com/img/remote/1460000018836440); 簡介 無障礙、DOM 小細節、前端開發、a11y、Accessibility 無障礙的英文為 Accessibility 由于單詞拼寫過長往往被縮寫為 a11y 其中 11 指的是中間有11個字母。 無障礙指的是在使用過程中，不管什么類型的用戶都可以正常使用。生活中最常見的...
閱讀 1155·2021-10-15 09:39
閱讀 3052·2021-09-10 10:50
閱讀 3454·2019-08-30 15:53
閱讀 1877·2019-08-30 15:52
閱讀 2565·2019-08-29 15:31
閱讀 1978·2019-08-26 13:43
閱讀 2594·2019-08-26 13:37
閱讀 1444·2019-08-23 18:31
