通過JS延遲加載圖像<noscript>回退

我正在使用jQuery滑塊來顯示一系列圖像，並且它們都不顯示在Google圖像搜索中，即使我們排在正常搜索結果頂部相關關鍵字。我懷疑Google不會將圖像編入索引，因爲它們正在通過data-image屬性（惰性）通過JavaScript加載到滑塊中。對於性能來說，延遲加載映像並不使用一組標準<img>標記是非常關鍵的，因此我試圖找出以更容易被搜索引擎編入索引的方式提供資源的最佳方式。通過JS延遲加載圖像<noscript>回退

<li class="slide" data-image="img/image.jpg"> 
    <div class="caption">IMAGE INFO</div> 
    <noscript><img src="img/image.jpg" alt="Image info" width="x" height="x"></noscript> 
</li>

我，如果有這種方法的任何潛在問題好奇，或者完全不同的東西將是可取的：我使用的幻燈片標記內<noscript>標籤如下考慮？如果搜索引擎包含在<noscript>標籤中，那麼搜索引擎是否仍會考慮與SEO有關的標記？

感謝您的任何見解。

來源

2014-04-02 nickpish

這個問題似乎是題外話，因爲它是關於SEO –

儘管這個問題肯定是涉及到搜索引擎優化的最佳體驗，我的問題是綱領性所以我想它將與這個論壇有關。 – nickpish

noindex標籤是一個解決方案，但不是最好的。我有同樣的問題，首先我嘗試了圖像站點地圖，然後noindex標記，最後我找到了最佳解決方案。我寫了這一篇博客文章有充分的工作例如： Lazy loading and the SEO problem, solved!

最好的解決方案是使用由谷歌提供的索引AJAX內容的方法。但它不限於AJAX，實際上你可以在任何動態生成的內容上使用它。

在我的示例中，我使用此方法爲動態加載圖像的圖像庫。用幾句話說，你必須使用轉義片段。片段是URL的最後一部分，前綴爲＃。碎片不會傳播到服務器，它們僅在客戶端使用，以告訴瀏覽器顯示某些內容，通常是移動到頁內書籤。如果不使用＃作爲前綴，則使用＃!,這會指示Google使用醜陋的URL向服務器請求特殊版本的頁面。當服務器收到這個醜陋的請求時，您有責任發回呈現HTML快照的頁面的靜態版本（在我們的例子中未編入索引的圖像）。

我使用ASP.NET在服務器端生成HTML快照（但您可以使用任何技術生成它們）。

var fragment = Page.Request.QueryString["_escaped_fragment_"]; 
if (!String.IsNullOrEmpty(fragment)) 
{ 
    var escapedParams = fragment.Split(new[] { '=' }); 
    if (escapedParams.Length == 2) 
    { 
     var imageID = escapedParams[1]; 
     // Render the page with the gallery showing the requested image (statically!) 
     ... 
    } 
}

腳本標記方法的缺點是，你提供一個不好的用戶體驗，其實用戶不能夠書籤顯示特定圖像的頁面。使用片段和JavaScript給你的用戶

if (window.location.hash) 
{ 
    // NOTE: remove initial # 
    var fragmentParams = window.location.hash.substring(1).split('='); 
    var imageToDisplay = fragmentParams[1] 
    // Render the page with the gallery showing the requested image (dynamically!) 
    ... 
}

來源

2014-05-19 11:35:08 Igor

+1：但缺點是，在高速緩存的環境中，您無法從緩存中提供此網頁，該緩存還有其他一些draback（=> google與緩存相比收到較慢的頁面...） – Markus

通過JS延遲加載圖像<noscript>回退

回答

相關問題