View
308
Download
2
Category
Preview:
DESCRIPTION
From the SMX East 2014 Conference in New York City, NY. SESSION: Conquering Today's Technical SEO Challenges. PRESENTATION: 9 Tips for Infinite Scroll & AJAX SEO issueS - Given by Matt Storms, @Matt_Storms, Independent Consultant. #SMX #23A
Citation preview
You can never have enough scrolling on your site.
¡ google.me/+MattStormsSEO
¡ @matt_storms
¡ linkedin.com/in/mattstorms/
¡ Google Top Contributor
MattStorms.com HelpDeskHangouts.com
¡ Because I am a consultant I just can brag about past clients. That’s just the way I work, I do not divulge clients.
¡ I have worked on many big clients.
¡ What is Infinite Scroll § It is where you can scroll and never reach the bottom of the page.
¡ Twitter ¡ Facebook ¡ LinkedIn ¡ LA Times ¡ Chicago Tribune ¡ FindNSave ¡ Pinterest ¡ Google Images
▪ What is truly an infinite scroll site?
¡ The infinite scroll is exactly what the term describes — a function that allows a user to keep scrolling a page without reaching its end. When you scroll downward, toward the “bottom” of the page, it simply loads more content, providing an ever-‐growing and seemingly never-‐ending amount of material.
¡ We are getting to them.
¡ Take stock of all the content that you want to infinite-‐scroll, and break it up into chunks.
¡ There’s no magic length for these chunks. You simply want to ensure that users can find what they’re looking for with a reasonable amount of scrolling. § If the user has to scroll for a long time without actually clicking on anything, you failed the user.
¡ Google recommends a good method ¡ I have another
¡ But lets go to step #2
¡ JavaScript ¡ AJAX
Create a URL structure that accommodates infinite scroll
¡ There are two things to avoid as you structure your URLs.
§ Do not use relative-‐time-‐based URL parameters. § Do not use code-‐based language in your URL.
¡ In keeping with best practices, you also want to make sure that these pages have optimal load times and do not duplicate the content of other pages. § What is an ideal load page time?
¡ Each page should contain rel=”next” and rel=”prev” within the <head> tag
¡ PushState is an HTML5 method that dictates the load process. PushState will draw from the state object (anything serialized) and the URL to load the new content in the sequence defined by the pagination.
¡ Basically, pushState tells the browser what to load and display. This is how Twitter implements its infinite scroll.
¡ Alternatively, you can use the replaceState method for modifying the history entry or responding to user-‐scrolling behavior. ReplaceState would respond to scroll actions or allow the user to scroll backwards and view the pages that were loaded in the pagination history.
¡ You’ll want to test your infinite scrolling page, of course, and ensure that every page loads accurately and in the right time frame. Then, going forward, simply use your SEO knowledge to create the best and cleanest content possible.
¡ And I recommend doing all of that as well…
¡ Taking it to the next level
¡ How many pages to a sitemap?
¡ Show of hands – who has used New Relic
§ Custom Attributes to track bots ▪ Googlebot ▪ Bingbot ▪ Others
Use this to see how the search engines are crawling and what you need to do to change.
¡ Google, Adobe, Others
§ You can fire a Page View Event for the next page.
▪ Get long get dirty
¡ Watch your parameters
§ What’s a parameter? § “When Google detects duplicate content, such as variations caused by URL parameters, we group the duplicate URLs into one cluster and select what we think is the "best" URL to represent the cluster in search results. We then consolidate properties of the URLs in the cluster, such as link popularity, to the representative URL. Consolidating properties from duplicates into one representative URL often provides users with more accurate search results.”
¡ Advanced feature, play with them on your own site before playing on a client site or enterprise level site.
¡ Issue – Googlebot ¡ Indexing
¡ Here is what I did
¡ Show as many pages that make sense. § Example Prev, 1, 2, 3, 4, 5, (up to as many as make sense) & Next. We would do this so that the spiders will see the next page with javasscript turned off.
¡ We change the canonical of page #2, #3 and so on : § <link rel="canonical" href="https://www.domain.com/?page=2"/>
§ <link rel="canonical" href="https://www.domain.com/?page=3"/>
§ <link rel="canonical" href="https://www.domain.com/?page=4"/>
¡ Now you might say well we don’t want to index the Infinite Scroll pages with JavaScript
¡ Doing so will send a signal that the page is different to the spiders and they will crawl the page.
¡ To prevent many spammy looking duplicate pages from rendering in the indexes we will want to incorporate the noindex, follow tag on each of the /?page=2/ pages so we do not have to worry about the page but more about the items on the page.
¡ <meta name="robots" content="noindex, follow" />
¡ Canonical ¡ Prev & Next ¡ Noindex, Follow
¡ In keeping with best practices, you also want to make sure that these pages have optimal load times and do not duplicate the content of other pages. § What is an ideal load page time?
¡ How many of you have an Infinite Scroll site? ¡ Do you like sites that use it? ¡ Do you feel this is the future of sites?
¡ Bonus tip -‐ 301, 404 or 410, which is better for product sites?
¡ 301 old page to new page ¡ 302, should never be used ¡ 404 means the page is not found but Search engines will keep coming back to find it
¡ 410 will kill the page within a week and you never have to worry about it.
¡ If you have links to the product page 301, if no links or you do not care because you churn products then 410.
¡ 2.2 billion pages indexed in less than 4 months.
¡ Infinite scroll sites are the future. We will only see more and more sites go to this method.
¡ LA Times – read an article and when you get to the bottom – there is another article that is similar to what you just read. Keeping you on the site longer.
¡ Matt@MattStorms.com
¡ If your ever in the Bay Area let’s do lunch.
Recommended