MARKETING
4 Common Mistakes E-commerce Websites Make Using JavaScript
The author’s views are entirely his or her own (excluding the unlikely event of hypnosis) and may not always reflect the views of Moz.
Despite the resources they can invest in web development, large e-commerce websites still struggle with SEO-friendly ways of using JavaScript.
And, even when 98% of all websites use JavaScript, it’s still common that Google has problems indexing pages using JavaScript. While it’s okay to use it on your website in general, remember that JavaScript requires extra computing resources to be processed into HTML code understandable by bots.
At the same time, new JavaScript frameworks and technologies are constantly arising. To give your JavaScript pages the best chance of indexing, you’ll need to learn how to optimize it for the sake of your website’s visibility in the SERPs.
Why is unoptimized JavaScript dangerous for your e-commerce?
By leaving JavaScript unoptimized, you risk your content not getting crawled and indexed by Google. And in the e-commerce industry, that translates to losing significant revenue, because products are impossible to find via search engines.
It’s likely that your e-commerce website uses dynamic elements that are pleasant for users, such as product carousels or tabbed product descriptions. This JavaScript-generated content very often is not accessible to bots. Googlebot cannot click or scroll, so it may not access all those dynamic elements.
Consider how many of your e-commerce website users visit the site via mobile devices. JavaScript is slower to load so, the longer it takes to load, the worse your website’s performance and user experience becomes. If Google realizes that it takes too long to load JavaScript resources, it may skip them when rendering your website in the future.
Top 4 JavaScript SEO mistakes on e-commerce websites
Now, let’s look at some top mistakes when using JavaScript for e-commerce, and examples of websites that avoid them.
1. Page navigation relying on JavaScript
Crawlers don’t act the same way users do on a website ‒ they can’t scroll or click to see your products. Bots must follow links throughout your website structure to understand and access all your important pages fully. Otherwise, using only JavaScript-based navigation may make bots see products just on the first page of pagination.
Guilty: Nike.com
Nike.com uses infinite scrolling to load more products on its category pages. And because of that, Nike risks its loaded content not getting indexed.
For the sake of testing, I entered one of their category pages and scrolled down to choose a product triggered by scrolling. Then, I used the “site:” command to check if the URL is indexed in Google. And as you can see on a screenshot below, this URL is impossible to find on Google:
Of course, Google can still reach your products through sitemaps. However, finding your content in any other way than through links makes it harder for Googlebot to understand your site structure and dependencies between the pages.
To make it even more apparent to you, think about all the products that are visible only when you scroll for them on Nike.com. If there’s no link for bots to follow, they will see only 24 products on a given category page. Of course, for the sake of users, Nike can’t serve all of its products on one viewport. But still, there are better ways of optimizing infinite scrolling to be both comfortable for users and accessible for bots.
Winner: Douglas.de
Unlike Nike, Douglas.de uses a more SEO-friendly way of serving its content on category pages.
They provide bots with page navigation based on <a href> links to enable crawling and indexing of the next paginated pages. As you can see in the source code below, there’s a link to the second page of pagination included:
Moreover, the paginated navigation may be even more user-friendly than infinite scrolling. The numbered list of category pages may be easier to follow and navigate, especially on large e-commerce websites. Just think how long the viewport would be on Douglas.de if they used infinite scrolling on the page below:
2. Generating links to product carousels with JavaScript
Product carousels with related items are one of the essential e-commerce website features, and they are equally important from both the user and business perspectives. Using them can help businesses increase their revenue as they serve related products that users may be potentially interested in. But if those sections over-rely on JavaScript, they may lead to crawling and indexing issues.
Guilty: Otto.de
I analyzed one of Otto.de’s product pages to identify if it includes JavaScript-generated elements. I used the What Would JavaScript Do (WWJD) tool that shows screenshots of what a page looks like with JavaScript enabled and disabled.
Test results clearly show that Otto.de relies on JavaScript to serve related and recommended product carousels on its website. And from the screenshot below, it’s clear that those sections are invisible with JavaScript disabled:
How may it affect the website’s indexing? When Googlebot lacks resources to render JavaScript-injected links, the product carousels can’t be found and then indexed.
Let’s check if that’s the case here. Again, I used the “site:” command and typed the title of one of Otto.de’s product carousels:
As you can see, Google couldn’t find that product carousel in its index. And the fact that Google can’t see that element means that accessing additional products will be more complex. Also, if you prevent crawlers from reaching your product carousels, you’ll make it more difficult for them to understand the relationship between your pages.
Winner: Target.com
In the case of Target.com’s product page, I used the Quick JavaScript Switcher extension to disable all JavaScript-generated elements. I paid particular attention to the “More to consider” and “Similar items” carousels and how they look with JavaScript enabled and disabled.
As shown below, disabling JavaScript changed the way the product carousels look for users. But has anything changed from the bots’ perspective?
To find out, check what the HTML version of the page looks like for bots by analyzing the cache version.
To check the cache version of Target.com’s page above, I typed “cache:https://www.target.com/p/9-39-…”, which is the URL address of the analyzed page. Also, I took a look at the text-only version of the page.
When scrolling, you’ll see that the links to related products can also be found in its cache. If you see them here, it means bots don’t struggle to find them, either.
However, keep in mind that the links to the exact products you can see in the cache may differ from the ones on the live version of the page. It’s normal for the products in the carousels to rotate, so you don’t need to worry about discrepancies in specific links.
But what exactly does Target.com do differently? They take advantage of dynamic rendering. They serve the initial HTML, and the links to products in the carousels as the static HTML bots can process.
However, you must remember that dynamic rendering adds an extra layer of complexity that may quickly get out of hand with a large website. I recently wrote an article about dynamic rendering that’s a must-read if you are considering this solution.
Also, the fact that crawlers can access the product carousels doesn’t guarantee these products will get indexed. However, it will significantly help them flow through the site structure and understand the dependencies between your pages.
3. Blocking important JavaScript files in robots.txt
Blocking JavaScript for crawlers in robots.txt by mistake may lead to severe indexing issues. If Google can’t access and process your important resources, how is it supposed to index your content?
Guilty: Jdl-brakes.com
It’s impossible to fully evaluate a website without a proper site crawl. But looking at its robots.txt file can already allow you to identify any critical content that’s blocked.
This is the case with the robots.txt file of Jdl-brakes.com. As you can see below, they block the /js/ path with the Disallow directive. It makes all internally hosted JavaScript files (or at least the important ones) invisible to all search engine bots.
This disallow directive misuse may result in rendering problems on your entire website.
To check if it applies in this case, I used Google’s Mobile-Friendly Test. This tool can help you navigate rendering issues by giving you insight into the rendered source code and the screenshot of a rendered page on mobile.
I headed to the “More info” section to check if any page resources couldn’t be loaded. Using the example of one of the product pages on Jdl-brakes.com, you may see it needs a specific JavaScript file to get fully rendered. Unfortunately, it can’t happen because the whole /js/ folder is blocked in its robots.txt.
But let’s find out if those rendering problems affected the website’s indexing. I used the “site:” command to check if the main content (product description) of the analyzed page is indexed on Google. As you can see, no results were found:
This is an interesting case where Google could reach the website’s main content but didn’t index it. Why? Because Jdl-brakes.com blocks its JavaScript, Google can’t properly see the layout of the page. And even though crawlers can access the main content, it’s impossible for them to understand where that content belongs in the page’s layout.
Let’s take a look at the Screenshot tab in the Mobile-Friendly Test. This is how crawlers see the page’s layout when Jdl-brakes.com blocks their access to CSS and JavaScript resources. It looks pretty different from what you can see in your browser, right?
The layout is essential for Google to understand the context of your page. If you’d like to know more about this crossroads of web technology and layout, I highly recommend looking into a new field of technical SEO called rendering SEO.
Winner: Lidl.de
Lidl.de proves that a well-organized robots.txt file can help you control your website’s crawling. The crucial thing is to use the disallow directive consciously.
Although Lidl.de blocks a single JavaScript file with the Disallow directive /cc.js*, it seems it doesn’t affect the website’s rendering process. The important thing to note here is that they block only a single JavaScript file that doesn’t influence other URL paths on a website. As a result, all other JavaScript and CSS resources they use should remain accessible to crawlers.
Having a large e-commerce website, you may easily lose track of all the added directives. Always include as many path fragments of a URL you want to block from crawling as possible. It will help you avoid blocking some crucial pages by mistake.
4. JavaScript removing main content from a website
If you use unoptimized JavaScript to serve the main content on your website, such as product descriptions, you block crawlers from seeing the most important information on your pages. As a result, your potential customers looking for specific details about your products may not find such content on Google.
Guilty: Walmart.com
Using the Quick JavaScript Switcher extension, you can easily disable all JavaScript-generated elements on a page. That’s what I did in the case of one of Walmart.com’s product pages:
As you can see above, the product description section disappeared with JavaScript disabled. I decided to use the “site:” command to check if Google could index this content. I copied the fragment of the product description I saw on the page with JavaScript enabled. However, Google didn’t show the exact product page I was looking for.
Will users get obsessed with finding that particular product via Walmart.com? They may, but they can also head to any other store selling this item instead.
The example of Walmart.com proves that main content depending on JavaScript to load makes it more difficult for crawlers to find and display your valuable information. However, it doesn’t necessarily mean they should eliminate all JavaScript-generated elements on their website.
To fix this problem, Walmart has two solutions:
-
Implementing dynamic rendering (prerendering) which is, in most cases, the easiest from an implementation standpoint.
-
Implementing server-side rendering. This is the solution that will solve the problems we are observing at Walmart.com without serving different content to Google and users (as in the case of dynamic rendering). In most cases, server-side rendering also helps with web performance issues on lower-end devices, as all of your JavaScript is being rendered by your servers before it reaches the client’s device.
Let’s have a look at the JavaScript implementation that’s done right.
Winner: IKEA.com
IKEA proves that you can present your main content in a way that is accessible for bots and interactive for users.
When browsing IKEA.com’s product pages, their product descriptions are served behind clickable panels. When you click on them, they dynamically appear on the right-hand side of the viewport.
Although users need to click to see product details, Ikea also serves that crucial part of its pages even with JavaScript off:
This way of presenting crucial content should make both users and bots happy. From the crawlers’ perspective, serving product descriptions that don’t rely on JavaScript makes them easy to access. Consequently, the content can be found on Google.
Wrapping up
JavaScript doesn’t have to cause issues, if you know how to use it properly. As an absolute must-do, you need to follow the best practices of indexing. It may allow you to avoid basic JavaScript SEO mistakes that can significantly hinder your website’s visibility on Google.
Take care of your indexing pipeline and check if:
-
You allow Google access to your JavaScript resources,
-
Google can access and render your JavaScript-generated content. Focus on the crucial elements of your e-commerce site, such as product carousels or product descriptions,
-
Your content actually gets indexed on Google.
If my article got you interested in JS SEO, find more details in Tomek Rudzki’s article about the 6 steps to diagnose and solve JavaScript SEO issues.
MARKETING
3 Contextual Link-Building Strategies That Actually Work
Quality content can get your web pages ranking higher in Google search results. But contextual links can help, too.
Google says the inclusion of relevant, high-quality links signals the content that includes them may be quality content, too.
So, how can you earn contextual links to give your content an edge over the competition? Adopt one, two, or all three of the strategies detailed in this article.
But first, let’s understand what contextual links are.
What are contextual links?
A contextual link appears in the body of a web page’s content. A hyperlink is added to a relevant word or phrase. They:
- Link to other pages on the site.
- Cite the source of a claim or statistic.
- Indicate other relevant pages.
- Provide readers with more in-depth information on the topic.
- Guide readers to a product or service.
In this screenshot of an article with the header, Challenges of Productivity Tracking in Remote Workplaces, three phrases are hyperlinked — measure productivity, Microsoft, and research by Gartner.
Each contextual link serves a purpose:
- “Measure productivity” goes to a Slack article about how to measure employee productivity.
- “Microsoft” directs the reader to the original research for the cited statistic.
- “Research by Gartner” links to the native source for the research cited in that paragraph.
With a contextual link-building strategy, you not only boost your content in the eyes of Google but also encourage other sites to use your valuable content to provide their readers with additional information or context.
Now, let me show you three strategies to grow your contextual links and improve your content’s rankings.
1. Help sites fix their broken links
Broken link building involves contacting a website, pointing out a broken external link on a page, and suggesting your content as its replacement.
Broken links could result from a 404 error, a blank page, or a redirect to an irrelevant page — any alteration that ruins the original link’s purpose.
Since broken links negatively affect the visitor experience, removing them is in the site’s best interest. Your replacement offer gives them a quick solution to their problem. Plus, people are more willing to help you after you’ve helped them.
To find broken links, use a tool like Free Backlink Checker extension. I also like to inspect links manually since most tools only pick up 404 errors. Rely solely on them, and you will miss relevant broken-link opportunities.
Ahrefs also has tools for finding broken links. Its free broken link checker is helpful, but the paid version is more robust.
Paid subscribers can go to Site Explorer, go to the Outgoing Links report, and click on “Broken Links” from the dropdown menu.
The report identifies the total number of broken links (3,136 in the example below), the referring pages (the URL for the content including the broken link), the anchor (the words hyperlinked in the content), and the link (the URL that no longer directs to a viable page).
Ahrefs subscribers can also compile a Best by Links report under the Pages option in the Site Explorer tool.
In this example, the report lists pages with 404 page-not-found errors for TheMuse.com. It has 6,230 pages with broken external links. Each page URL listed is accompanied by the number of referring domains and a number of links to the page.
This research can identify the topics with the biggest potential to become the fixes for a broken link. You can create content to address them or identify content you already published. Just make sure the content closely matches the intent of the anchor text’s original link.
For example, the same research report, which is now a broken link, is cited in articles from Oyster and TINYpulse. On Oyster, the anchor text reads, “44% of companies did not allow remote work.” On TINYpulse, the anchor text says, “only 33% are very satisfied with the level of trust in their organization.”
For a single article link to replace the broken link on Oyster and TINYpulse, the content would need to cite both a statistic about remote work and another stat about trust in organizations.
2. Guest posting
Like the broken-link replacement strategy, guest posting benefits both your and the recipient’s sites. You reach out to sites and offer to write content about a topic relevant to their audience that relates to your content subjects and includes a link to your site. This technique works well because you typically control where and how to add your link to make it as relevant as possible.
You can take multiple approaches to win guest-posting opportunities. No matter which tactics you use, track the sites and verify the site’s quality using Ahrefs, another tool, or a direct visit to the site.
First, you can use Ahrefs (or a similar tool) to examine your competitors’ backlinks and identify any links that come from guest posts. The anchor or surrounding text might hint at its status with phrases such as “contributed by,” “guest post by,” or the name of the brand or author. You also can check links manually to see if they’re contributed content.
In this example from Collegiate Parent, the headline reads “EFC Too High? Tips for Successful Aid Appeals” and includes a byline for “Billie Jo Weis.” At this point, you don’t know if it is a contributed article.
But scroll down to the end, and you can see the author’s bio. It confirms the article is a guest post because her bio says she is a client services advisor for My College Planning Team, not the publisher (Collegiate Parent).
You can also use Google search operators to identify sites open to guest contributions. You’ll want to do several searches using variations of your target keywords and topic accompanied by phrases, such as “guest post,” “contributed by,” “guest post by,” and “guest posting guidelines.”
The example in the screenshot below works for a brand targeting college prep topics. The search is “’college prep’ ‘guest post by’ -site.pinterest.com.” The results reveal four articles from four sites that use the words “college prep” and “guest post by.” You can add those sites to your outreach tracker.
Finally, you can list sites relevant to your niche that didn’t appear in the earlier searches.
TIP: Not all sites that accept guest articles say so on their website.
3. Niche edits
A niche edit, sometimes referred to as a link insert, is a technique that adds a link to existing content. The key to success is finding relevant articles on high-quality sites and pitching your content as a valuable addition to those articles.
You can use a similar process to the Google guest post search. Input a broad keyword for your targeted keyword, then tell it you don’t want the targeted keyword in the title. If the entire article is about your targeted keyword, your chances of getting the publisher to include a link to a similar article are low.
Here’s an example from one of our client’s that sought to make niche edits for the keyword “soft skills.”
The Google search included these phrases:
- “Organizational development” soft skills -intitle:”soft skills”
- “Organizational development” soft skills employee training -intitle:”soft skills”
- Soft skills employee training -intitle:”soft skills” organizations
It led to an added link for “soft skills” in this article — “Employee Development,” which includes the header, “What are the benefits of employee development for an organization?”
You can do several searches, modifying your search operators each time to see what sites and content appears. Think of multiple angles to broaden the potential sites that publish content with your targeted or a related keyword.
After you’ve crafted a list of high-quality prospects, it’s time for outreach.
Niche edits might be the hardest of the three strategies to achieve because they’re not as clear of a win-win situation as the other two (repairing broken links and publishing new content).
Your email pitch can make or break your niche-edit campaign. It must convince the publisher that your content provides so much value that they will want to take an extra step with content they’ve already completed.
Here are some tips to craft a link-earning email pitch:
- Start by mentioning something about them. It could be something you like about their website or the article you’re targeting. You want them to know you’ve explored their site and read the article. But don’t overdo it. A simple compliment or sentence about how you found the article helpful should suffice.
- Introduce your content and mention how it can help their audience. Be concise and convincing, but don’t oversell it.
- Go one step further and point to a section or sentence where you think your content might be a good fit. This will help them see where your content can add value and link to it.
Get linking
Though contextual link building may seem challenging to execute, it can bring great rewards. Follow these tips and strategies, and your valuable content will get more attention from external sites and eventually Google rankings where it deserves to be.
All tools mentioned in this article are identified by the author. If you have a tool to suggest, please tag CMI on social.
HANDPICKED RELATED CONTENT:
Cover image by Joseph Kalinowski/Content Marketing Institute
MARKETING
Google’s Surgical Strike on Reputation Abuse
These aren’t easy questions. On the one hand, many of these sites do clearly fit Google’s warning and were using their authority and reputation to rank content that is low-relevance to the main site and its visitors. With any punitive action, though, the problem is that the sites ranking below the penalized sites may not be of any higher quality. Is USA Today’s coupon section less useful than the dedicated coupon sites that will take its place from the perspective of searchers? Probably not, especially since the data comes from similar sources.
There is a legitimate question of trust here — searchers are more likely to trust this content if it’s attached to a major brand. If a site is hosting third-party content, such as a coupon marketplace, then they’re essentially lending their brand and credibility to content that they haven’t vetted. This could be seen as an abuse of trust.
In Google’s eyes, I suspect the problem is that this tactic has just spread too far, and they couldn’t continue to ignore it. Unfortunately for the sites that were hit, the penalties were severe and wiped out impacted content. Regardless of how we feel about the outcome, this was not an empty threat, and SEOs need to take Google’s new guidelines seriously.
MARKETING
18 Events and Conferences for Black Entrepreneurs in 2024
Welcome to Breaking the Blueprint — a blog series that dives into the unique business challenges and opportunities of underrepresented business owners and entrepreneurs. Learn how they’ve grown or scaled their businesses, explored entrepreneurial ventures within their companies, or created side hustles, and how their stories can inspire and inform your own success.
It can feel isolating if you’re the only one in the room who looks like you.
How to Use Keywords for SEO: The Complete Beginner’s Guide
Advertising on Hulu: Ad Formats, Examples & Tips
18 Events and Conferences for Black Entrepreneurs in 2024
Best WordPress Plugins of All Time: Updated List for 2024
Updates to data build service for better developer experiences
Shopify Could Be Undervalued Based On A Long-Term Horizon
The Ultimate Guide to Email Marketing
Low Risk, High Reward YouTube Ads alexking
5 Must See Telegram Plugins for WooCommerce
The 9 Best eCommerce Hosting Providers in 2024
-
SEO7 days agoHow to Use Keywords for SEO: The Complete Beginner’s Guide
-
MARKETING5 days agoAdvertising on Hulu: Ad Formats, Examples & Tips
-
MARKETING2 days ago18 Events and Conferences for Black Entrepreneurs in 2024
-
WORDPRESS5 days agoBest WordPress Plugins of All Time: Updated List for 2024
-
MARKETING6 days agoUpdates to data build service for better developer experiences
-
WORDPRESS6 days agoShopify Could Be Undervalued Based On A Long-Term Horizon
-
MARKETING7 days agoThe Ultimate Guide to Email Marketing
-
PPC6 days agoLow Risk, High Reward YouTube Ads alexking
You must be logged in to post a comment Login