99在线精品免费视频,少妇无码av无码专区,久久久久青草线焦综合,国产午夜福利在线视频播放

行業資訊

當前位置:首頁>信息動態>行業資訊
西安單頁應用SEO優化
信息來源：銘贊網絡  |   發布于 2017/3/10 17:44:31

之前做SEO優化的項目都是多頁應用，從這個界面的某個鏈接打開一個新的頁面，該頁面的head或body中的友好信息即會自動被百度爬蟲捕獲，一切都是那么的順。當界面轉變為單頁應用后，標志性的錨點做法并不被百度和谷歌收錄，谷歌雖然不收錄以#為特性的錨點，但是收錄以#!為特性的錨點，因為這個緣固谷歌做SEO優化就簡易了很多。然而百度你懂得，那么做為一個前端開發人員，我們該做些什么。

當把一個單頁應用的代碼敲完，開心的看著快速的響應和無等待的數據刷新時，內心上對單頁應用是很喜愛的。如果這個應用只是做為一個管理平臺來說，那么工作已經完成，KPI已達成。那如果網站類型是面向用戶的信息展示或者是我等用于刷存在感的個人博客，看著site:**.com的收錄結果，那么這將只是開始。畢竟酒香不怕巷子深只是一個傳說，在這個互聯網時代，做著互聯網的行業，卻不能在互聯網的搜索引擎上展現，酒或許香溢，卻也難免無人問津。

我從14年開始，做了兩件事，一件事是開發基于jquery的表格插件，另一個是開發運維自已的個人博客。當博客上線后，并沒有感覺什么，便秘似的產出幾個博文后，發現在百度上無影無蹤，多少有些傷感，site:lovejavascript.com后僅有一個首頁的鏈接。

接下來，以個人博客的開發經驗來對單頁應用的SEO優化做一個總結。當然我們看一下所在的區域，谷歌暫時不去探討，以下都是針對于百度的處理方法。
做出來后，覺著其實很簡單。

SEO優化步驟：

首先，在首頁增加了一個隱藏的區域，將一些博文鏈接嵌入至這個區域。
<div class="seo-area">
    <h1 title="拭目以待的博客">拭目以待的博客</h1>
    <h2 title="博文列表">
        <a href="http://www.lovejavascript.com/seo/content.html?id=6" title="前端國際化">前端國際化</a>
    </h2>
</div>
經過一周左右的時候，通過site:lovejavascript.com，即可在百度上看到這些鏈接已被收錄。點擊查看效果

下一步，將這個區域更換為境像博文入口。
<div class="seo-area">
    <h1 title="拭目以待的博客">拭目以待的博客</h1>
    <h2 title="博文列表">
        <a href="/seo/index.html" title="博文列表">博文列表</a>
    </h2>
</div>

這個/seo/index.html指向的地址，是一個同步生成的博文列表，這個列表不需要樣式也不對外公開。
生成列表頁界面示例：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>拭目以待的博客</title>
</head>
<body>
    <h1>拭目以待的博客</h1>
    <ul>
        <li><a href="/seo/content.html?id=16">node亂碼解決方法</a></li>
        <li><a href="/seo/content.html?id=15">悅跑圈——屬于跑者的圈子</a></li>
        <li><a href="/seo/content.html?id=13">same-和而不同</a></li>
        <li><a href="/seo/content.html?id=11">querySelector</a></li>
        <li><a href="/seo/content.html?id=10">面試阿里失敗總結</a></li>
        <li><a href="/seo/content.html?id=9">listManager使用詳解</a></li>
        <li><a href="/seo/content.html?id=8">margin-top 外邊距合并</a></li>
        <li><a href="/seo/content.html?id=7">JSON.stringify()執行出錯</a></li>
        <li><a href="/seo/content.html?id=6">前端國際化</a></li>
        <li><a href="/seo/content.html?id=4">UEdit 使用總結</a></li>
        <li><a href="/seo/content.html?id=5">自定義表單、流程、菜單開發總結</a></li>
    </ul>
</body>
</html>
百度爬蟲會根據首頁中的博文列表鏈接對該頁面中的博文信息進行獲取，而我們要做的就是將這些生成的鏈接真實的指向一個詳情頁境像地址,這些詳情頁同樣也是不需要樣式支持，但是需要存在一些必要的SEO友好信息。如title,h1等。
生成詳情頁界面示例：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="{{seo-title}}" />
<meta name="description" content="{{seo-title}}">
<meta name="author" content="{{seo-author}}">
<title>前端國際化</title>
</head>
<body>
<div class="content-warp">
<header class="content-header">
    <h2 class="content-title">前端國際化</h2>
        <div class="top-bar">
        <span class="author">拭目以待</span>
            發布于
            <time class="createDate">2016-02-24</time>
        </div>
    </header>
    <div class="content-main">
    博文詳情
    </div>
</div>
</body>
</html>
當然，你并不會希望從搜索引擎導入到這個鏡像詳情頁，那么加上將url重定向就可以解決。

通過site:**.com查看結果一般都需要等待一周左右，當然大站可能會更快些。seo優化是一個測試的過程，每次代碼變更后都需要這么一個時間段，似乎太過于被動。
在這里提一個可以快速查看效果的方法，使用百度站長工具->網頁抓取->抓取診斷可以實時的查看優化效果。雖然會有差異，但是總體上與結果相符。
到這里似乎已經結束，但是優化永無止靜。再粘幾個博客首頁上需要注意的幾點。

1、在首頁body后緊根增加一個隱藏的H1標簽，用于填寫博客的簡介及logo。
<h1 class="seo-h1">
<img src="http://lovejavascript.com/images/logo121-75.png" alt="loveJavaScript">
歡迎來到拭目以待的空間。前端技術日新月異，有人曾說過:"技術不進則死";你是否感受到了來自這方面的壓力? 前端交流群：452781895
</h1>
2、在每個詳情頁增加百度主動推送代碼，具體的站點可以到百度站長工具中根據站點進行獲取。
(function(){
    var bp = document.createElement('script');
    bp.src = '//push.zhanzhang.baidu.com/push.js';
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
3、增加外鏈，到各大站點進行博文轉發，增加原文鏈接。

相關新聞
相關產品