seo友好html标签_SEO友好的无限滚动

seo友好html标签

As a developer, at some point you may have to decide between the old fashioned pagination and the trendy new infinite scroll, using the latest technologies, inspired by internet giants like Facebook and Pinterest. It depends on your requirements, but it also may come down to your (or your client’s) personal choice.

作为开发人员，在某些时候，您可能必须使用受Facebook和Pinterest等互联网巨头启发的最新技术，在老式的分页和新的无限滚动之间做出选择。 这取决于您的要求，但也可能取决于您(或客户)的个人选择。

Infinite can be an efficient way for users to browse content, but it has a lot of disadvantages and can be the wrong choice on certain types of websites.

无限是用户浏览内容的有效方法，但它有很多缺点，并且在某些类型的网站上可能是错误的选择 。

One of the primary problems with infinite scroll is the fact that it is, in its barest form, not SEO friendly. When you implement infinite scroll, new content is loaded via Ajax. Unless you take specific measures, this renders the content invisible to search engines. So how then do we make infinite scroll SEO friendly? Let’s discuss a few ways we can do this, including one discussed by Google on the Webmaster Central blog.

无限滚动的主要问题之一是，它以最原始的形式而不是SEO友好。 当您实现无限滚动时，新内容将通过Ajax加载。 除非您采取特定措施 ，否则这将使内容对于搜索引擎不可见。 那么如何使无限滚动SEO友好呢？ 让我们讨论一些实现此目的的方法，包括Google在网站站长中心博客上讨论的一种方法。

包括站点地图 (Include a Sitemap)

If the content you’re loading via infinite scroll is separated into various distinct pages, or units, that have their own URLs, search crawlers like Googlebot may not be able to find that content unless it’s linked somewhere in an accessible spot on one of your already-indexed pages.

如果您通过无限滚动加载的内容分为具有自己的URL的各个不同页面或单元，则除非Googlebot这类搜索爬网程序链接到您其中一个可访问位置的某处，否则可能找不到该内容已编制索引的页面。

A sitemap is one way you can ensure a search crawler can find every page, including the content loaded via infinite scroll functionality. A sitemap is a list of pages in a website, usually in XML format. If a part of your website is inaccessible to web crawlers, you can provide a sitemap to inform the crawler of the full list of pages. For more info about sitemaps and how to create one, you can refer to this tutorial on Tuts+.

站点地图是确保搜索爬网程序可以找到每个页面(包括通过无限滚动功能加载的内容)的一种方法。 站点地图是网站中的页面列表，通常为XML格式。 如果Web爬网程序无法访问您网站的一部分，则可以提供站点地图，以通知爬网程序完整的页面列表。 有关站点地图以及如何创建站点地图的更多信息，您可以在Tuts +上参考本教程 。

If you have an account on Google Webmaster Tools, you can use the service to test and submit your sitemap to ensure that a crawler doesn’t miss your site due to errors in your sitemap or other factors.

如果您在Google网站站长工具上拥有一个帐户，则可以使用该服务来测试并提交站点地图，以确保抓取程序不会由于站点地图错误或其他因素而错过您的网站。

使用分页+无限滚动 (Using Pagination + Infinite Scroll)

This is the method, as mentioned earlier, that Google discusses in a recent blog post. Interestingly, it involves providing the pagination alternative to infinite scroll within the same page! Let’s look into the details.

如前所述，这是Google在最近的博客文章中讨论的方法。 有趣的是，它涉及在同一页面内提供分页替代无限滚动！ 让我们来看看细节。

使用HTML5的History API (Using HTML5’s History API)

When you load new content, Google recommends that you use HTML5’s History API to change the URL of the page to accommodate the page number when the user scrolls to initiate the loading of new new content. For instance, on loading page 3, the current URL would change to http://myexample.com/?page=3. Similarly, on scrolling up to view the previous content, the URL would change to http://myexample.com/?page=2.

当您加载新内容时，Google建议您使用HTML5的History API来更改页面的URL，以在用户滚动启动新的新内容加载时容纳页面编号。 例如，在加载页面3时，当前URL将更改为http://myexample.com/?page=3 。 同样，向上滚动以查看先前的内容时，URL将更改为http://myexample.com/?page=2 。

包括分页和无限滚动 (Including Pagination Along with Infinite Scroll)

In addition to changing the URL as content is scrolled through, Google suggests that you provide your list of pages at the bottom, which are links to the same pages with page numbers in the URL (e.g. http://myexample.com/?page=3). Just like in traditional pagination, when someone clicks on a page, the page refreshes, and the contents of page 3 are shown. At this point, the infinite scroll functionality will still work, along with the HTML5 History API changes outlined above. So if the user scrolls up or down, new content is shown and the page number is changed on the URL.

除了在滚动浏览内容时更改URL之外，Google还建议您在页面底部提供页面列表，这些页面是指向具有URL的页面编号的相同页面的链接(例如http://myexample.com/?page = 3 )。 就像传统的分页一样，当有人单击页面时，页面会刷新，并显示第3页的内容。 此时，无限滚动功能将仍然有效，并且上面概述了HTML5 History API的更改。 因此，如果用户向上或向下滚动，则会显示新内容，并且URL上的页码也会更改。

好处 (The Benefits)

So what does this mean for search crawlers? Well, when a crawler visits your site, the content of the first page is shown with page numbers at the bottom. Since the crawler cannot trigger infinite scroll, no new content is going to be loaded. However, because the pagination section is still included on the page, the crawler is able to access all the content. This also ensures that while searching, when someone searches for a particular item on page 3, they land directly on the content and not somewhere else.

那么，这对于搜索搜寻器意味着什么？ 好吧，当某个爬网程序访问您的网站时，第一页的内容会在底部显示页码。 由于搜寻器无法触发无限滚动，因此不会加载任何新内容。 但是，由于分页部分仍包含在页面上，因此搜寻器可以访问所有内容。 这也可以确保在搜索时，当有人在第3页上搜索特定项目时，他们直接落在内容上，而不是其他地方。

This method has the added bonus of making deep linking to infinite scroll content easy. So if I want to share a particular item on the 4th page with someone, I can simply copy the URL (which would be on page 4 at the time) and when someone goes to that URL, they would be able to see exactly what I want them to see.

此方法具有使轻松链接到无限滚动内容的附加好处。 因此，如果我想与某人共享第4页上的特定项目，我可以简单地复制URL(当时将在第4页上)，并且当有人访问该URL时，他们将能够准确地看到我希望他们看到。

约翰·穆勒(John Mueller)的演示 (John Mueller’s Demo)

A live demo of the implementation of this idea of infinite scroll with pagination is provided by Webmaster Trends Analyst John Mueller.

网站站长趋势分析师约翰·穆勒(John Mueller)提供了使用分页进行无限滚动的想法的实时演示 。

And as mentioned, you can read a full description of John’s demo on the Google Webmaster Central Blog.

如前所述，您可以在Google Webmaster Central Blog上阅读John演示的完整说明。

结论 (Conclusion)

On one of my recent articles discussing implementing infinite scroll with jQuery, someone commented that as more sites start using this technique, the better it will be for those that don’t. This may very well be true.

在我最近的一篇讨论使用jQuery实现无限滚动的文章中， 有人评论说 ，随着越来越多的网站开始使用这种技术，对于那些不使用这种技术的网站来说会更好。 这很可能是对的。

Google’s own suggestions, along with what I’ve discussed here should provide more incentive for those who want to use the technique but not suffer from SEO limitations.

Google的建议以及我在这里讨论的内容应该为那些想使用该技术但又不遭受SEO限制的人提供更多的激励。

If you’ve looked at Google’s suggestions or have had to deal with this on one of your own websites or applications, let us know in the comments.

如果您查看了Google的建议或不得不在自己的网站或应用程序中处理此建议，请在评论中告知我们。

翻译自: https://www.sitepoint.com/seo-friendly-infinite-scroll/

seo友好html标签