Making friends with expert SEO recommendations is a milestone for building a successful online product. Whether your goal is to create a robust company website, a SaaS web app, or a complex e-commerce site, you need to embrace search engine optimization. Before you team-up with a software house to discuss your project, it’s best to take a deep dive into designing and developing guidelines in terms of SEO, paying some significant attention to mobile-oriented Google changes.
Implementing SEO strategy is more than just a digital mantra. It also reaches beyond creating compelling content to rank high in search engines.
To stay in the game and to keep on getting valuable traffic to your website, you need to embrace SEO-focused development, smart UX tactics, and most importantly – mobile-friendly technology.
Yes, Google’s Mobile-First Index has totally changed the rules, and you need to adapt fast to keep playing at all.
How to achieve it? Well, if you get professionals to, either take care of your online product, and build your app from scratch, or to optimize your website, you need to know the answers to the below questions.
Let’s pull back the curtain:
How to work with developers to implement SEO recommendations?
In other words, what are the most common requirements for developers and designers? What are the SEO techniques they need to get on board?
First and foremost, the unique, differentiated, and valuable content is a must. Why? Because Google will verify your website, and that process will mainly rely on the content you will embed on each page.
For instance, if two (or more) pages with different URLs within your site’s architecture, will share the same content, search engine robots will classify them as duplicate ones.
As soon as that happens:
You will have to face unpleasant consequences that can affect your digital business. The most important one – the website will drop down in SERPs because robots will decrease its value.
Although some developers have tried tricks to outsmart the algorithms, you can’t take them seriously. Search engines have become more intelligent and resistant to hiding content gimmicks.
“Sometimes decision-makers want to pack a page with loads of information, but not necessarily make it visible for the users” – admits Sandra Ptaszek, Frontend Developer at DeSmart. “In that scenario, developers try some old tricks with hiding content inside the code and mask it at the same time with the help of code styles. Unfortunately, it won’t do the trick – you can’t fool search engine robot just like that.” – says Sandra.
Luckily, there’s a solution:
On-Page SEO: What is rel=canonical and why should you use it?
For many website owners, content duplication restrictions are more than annoying. It’s doubtful to skip the problem, especially when it comes to e-commerce sites. To improve the findability of their products, online shops have to sort and filter them.
How to cope with duplication? “This is when the rel=canonical tag comes in handy” – says Wojciech Władziński, Head of SEO at SEO Group company. “This SEO technique is significant because the meta tag tells the search engine that a certain URL is an original, canonical link. Thanks to rel=canonical, Google robots will be able to go through the duplicated pages and to highlight the original one. As a result, a relevant page will be displayed in search results.” – Wojciech Władziński convinces.
In other words:
Google will be able to determine which page to display in search. Thanks to the rel=canonical tag, we make it crystal clear to which URL we will assign all our SEO activities.
Moreover, Google won’t be indexing additional and unnecessary resources on our page. If we decide not to use rel=canonical, however, the additional resources might harm our search ranks.
How to design an SEO-friendly website structure?
Meaning – how do web development and app building look from the SEO perspective? What do you need to bear in mind in terms of search engine friendly designing and developing?
Here it goes:
The fundamentals of building web applications are about using appropriate HTML tags. With the help of those, we can provide essential information about how to display our page, and which section of our page is the most important.
Year after year, we have been reinforcing our dev arsenal with different weapons for dealing with search engine robots. For instance, thanks to the microdata available in Schema web vocabulary, robots can learn more about the page content. In practice, we can enrich a page’s content with additional information, without presenting it on-site.
But it doesn’t end here:
Another crucial aspect of SEO-friendly web development is making sure the content to be correctly rendered, indexed, and ranked in search results. To deliver that, we need to embrace the SSR approach. Server-Side Rendering is a traditional rendering solution that enables us to boost the process of reading our pages by search engines.
“This method is in opposition to CSR, which stands for Client-Side Rendering” – says Sandra Ptaszek. – “Using the SSR approach means that we generate our website on a server, which immediately returns the filled HTML code, without having to wait for loading JavaScript. The main benefit: search engine robots will read our website without any problems and delays.”
The last element that will be a milestone for your SEO strategy is creating a sitemap. Basically, it’s an XML or HTML file consisting of all the links available within your web app. This file forms an actual map of your website.
Why do you need a sitemap? Again, it’s about seizing the search engine beasts. Having a sitemap will help them to index our pages more efficiently. To achieve the best results, you need to power up the file with additional information about the links. This trick will let robots analyze your web app easily.
Why dedicated software has to bow in front of search engines?
We cannot separate the process of building a dedicated software from working with search engines. Why? Because the Internet is literally bombing us with tons of incentives. The human brain needs to defend itself by filtering valuable information from rubbish.
So do search engines. They need to select the most relevant websites and match them to searched keywords and phrases.
How does it affect building software products?
“There was a time when web applications’ content was interpreted as a sequence of characters, and that was a basis to sort them in SERPs.” – admits Sandra Ptaszek. – “Whereas today, we are armed with more tools to influence search engines and make them interpret our web apps the way we want to. More precisely we describe, tag, and index our website, the higher search results it will generate.”
Businesswise, you need to take a lot of effort to cut through the clutter. With loads of apps and websites in the Internet stratosphere, standing out from the crowd is not easy. Especially with a brand-new software.
The way to achieve success with launching an online product is to gain traffic to your website. It’s a starting point to convert prospects into leads, and then – leads into customers. One of the most decisive sources of traffic is search engines and Google in particular.
“According to reports, search engine marketing (SEM) has one of the biggest ROI (Return on Investment), which proofs the significance of SEO strategy and investing in paid campaigns” – says Wojciech Władziński from SEO Group. – “Moreover, it’s a wise move to allocate money and efforts to produce content which will precisely answer the questions asked by your future clients.”
Here’s the bottom line:
When we talk about working with search engines, it’s impossible to skip the page load time aspect. It has an immense influence on, both, how your page will be displayed in search, and how users will react to it.
With the crazy pace, we all have to deal with, Internet users are running short of time. Meaning – they also lose their patience in seconds. If your page is loading slowly, they will abandon the process before anything comes up on the site. If you lose them there, you will lose them for good.
“In the recent Google’s survey, nearly half of the respondents have agreed about the most annoying thing about Internet surfing on mobile devices. What drives them crazy is the long page load time. 60% of users expect a mobile site to load during the first 3 seconds. If that time is longer than 5 seconds, 75% of users declare to bounce from the site” – says Wojciech Władziński.
This is the moment where we need to take you on a journey to the mobile-oriented world and learn how to conquer it with the right tactics and technology:
Welcome to the golden age of Mobile SEO
There’s no exaggeration in that statement. The fact is, mobile is taking it all, and handling over SEO equals taking care of mobile SEO.
To get a better perspective, let’s highlight some statistics:
- 58% of all searches in Google come from mobile devices,
- There are 27,8 billion more queries performed on mobile than on desktop,
- Mobile internet has grown 504% in daily media consumption since 2011.
- In 2019, we’re talking about 3,986 million unique mobile internet users.
- In the U.S. alone, the amount of daily time spent on mobile devices went up to 3 hours 23 minutes!
There is much more intel describing more extensively the dominance of mobile, but the above facts are overwhelming enough.
The (undisputable) point is – mobile devices and the internet have revolutionized the way we work, entertain, travel, organize our health, professional, and intimate life. And that also strongly influenced how we consume web content, and how we make our buying decisions.
That’s why:
Google introduced the Mobile-First Index
This mobile explosion couldn’t have gone unnoticed to the tech giant. Google had to redefine their approach and restructure their entire algorithm to prioritize mobile search results.
As Brian Dean, an SEO guru puts it:
“Google’s Mobile-first Index ranks the search results based only on the mobile version of the page. And yes, this occurs even if you’re searching from a desktop. (…) Today, no matter what device you use, Google shows you results from their mobile index.
This shift opens up a new era. Following after Google’s official announcement:
“Since the majority of users now access Google Search with a mobile device, Googlebot primarily crawls and indexes pages with the smartphone agent going forward. (…) Starting July 1, 2019, mobile-first indexing is enabled by default for all new websites (new to the web or previously unknown to Google Search).”
What does it in real-life for your website?
First off, one of the main ideas hiding behind the changes is to deliver your end-user the same content on mobile as it is on the desktop version of your website. If you don’t take care of it, Google robots won’t bother entering your site, which will drag down the indexing of your subpages.
There are three options on how to approach your mobile pages:
- Separate URLs – also known as traditional “M” configurationThis scenario operates on an old-school dualism when website owners used to have their main, desktop version of the site, and an m-dot version of it, existing under a different domain (m.websitename.com).Depending on the device you visited a particular site, you would be seeing a desktop or an m-dot page.A couple of years back, this solution seemed to be somehow natural, but today it is a bit off.Brian Dean discourages from following that path:“First, they’re a huge pain to manage. Also, “M.” sites have a host of SEO issues (like the fact that you need multiple URLs for every piece of content on your site AND that it requires complicated “rel=canonical” and “rel=alternate” tags).”
- Dynamic ServingServing content dynamically is a step up compared to the previous one, but still far from flawless. But before we get into that, let’s see how it works. Basically, it’s no longer about multiplying URLs because your website would be operating under one domain.How it handles mobile users? Dynamic serving means that each visitor will see a predefined (with relevant HMTL / CSS) version of the website depending on the type of device.However, this option is infamous for displaying a desktop version for mobile users. Moreover, you would have to be constantly prepared for each newly-released mobile device, to code another pre-made version of your site to match the new smartphone shipped to the market. If you don’t keep the pace, you will risk the appalling appearance of your website on fresh devices.
- Responsive Web DesignYes, commonly known as the RWD, this solution is a definite winner, not only because Google itself pushes it forward. With Responsive Web Design, you can forget about separate URLs, or rewriting your HTML for the sake of every single type of phone. Instead, your website will automatically adjust the layout and the content for each user.If you go for this one, you can thankfully leave some problems behind, such as duplicate content issues, or slowing down your site because of redirects.On top of that, RWD strikes as a user-friendly layout and helps in getting higher results in SERPs.
How to optimize your website for mobile?
If for some reason, you’re still using separate URLs or dynamic serving, you should implement a set of tactics recommended in Google’s documentation:
- The same content as on the regular site. Your mobile version can’t be a poor version of your desktop site. It involves powering it up with the same visual (pictures and video) and written content as you would normally upload.
- The same meta date on both versions. Make sure that your desktop and mobile have the same title tags and meta descriptions.
- Correct hreflang links for separate URLs. If you communicate your offer or product in different languages, the rel=”hreflang” element is a way to go. You need to ensure, however, that connections between mobile and desktop URLs work properly. Hreflang from the standard website’s URL has to correspond with … the standard website URL, and vice – versa: hreflang from the mobile site’s URL have to indicate the mobile URL.
- The capabilities of your server. Has your server enough resources to enable indexing of your mobile website? Go to Google Search Console and check how your server performs with the Index Statistics Report tool.
- Correct instructions in the robots.txt file. Those instructions have to be well-written and be the same for both versions of your website.
- Correct rel=”canonical” and rel=”alternate”elements. The same dynamics should apply here – those elements need to be identical for desktop and for mobile.
Let Googlebots and mobile users see all you have
There are a couple of aspects falling into this category. As we mentioned earlier, your mobile site is now treated by Google algorithms as a fundamental one.
Therefore, you need to forget about blocking Googlebots from crawling your site, because if you disallow them to access some parts of your site’s code, like Javascript or CSS, Google won’t be able to judge whether your site is mobile-friendly or not. As a result, you will be facing trouble trying to rank in SERPs.
The same rule goes for hiding your content behind intrusive pop-ups. People get easily annoyed by them while surfing the interwebs on the desktop, and the level of irritation skyrockets when pop-ups cover the entire screen on mobile devices. Although there are some pop-ups that won’t get your page penalized, in general – it’s best to avoid using them.
Last, it has been popular to decrease the page load time by hiding some resources on the page. For instance, under a “read more” button linking to another site. Although people have been using this hack a lot, according to Brian Dean Google may have a problem with it now:
“…if your content is hidden to mobile users, they may not index or crawl that content. Or they may weigh it differently.”
Conquer your mobile SiteSpeed
How fast will your content show up on users’ smartphone screens is a critical factor. It’s not a secret that Google favors mobile sites that load fast. The brutal reality is the criteria of one second your site needs to render.
The good news is, however, that there are tools that come in handy to optimize your SiteSpeed, and the first one is delivered by Google itself.
PageSpeed Insights not only allows you to check out your website’s load time but also highlights the issues that are slowing you down:
Here’s a sneak peek on how to interpret the Lighthouse Scoring Guide: the red color (0-49 score) stands for “slow”, the orange color (50 to 89 score) stands for “average”, and the green color (90 to 100 score) stands for “fast”.
Also, take a quick look at the possible opportunities you can cope with when it comes to fixing your SiteSpeed:
The last factor on that list takes us to write a bit about:
Time To First Byte – TTFB
By now, you know for a fact, that it’s essential to keep your mobile site load time faster than a cheetah. Coping with TTFB is one of the ways to make that happen.
How to define Time To First Byte factor? Quoting after Search Engine People:
“When someone selects your website on Google, their web browser requests information – or bytes – from a server. TTFB is the number of milliseconds it takes for a browser to receive the first byte of the response from your web server.”
Needless to say, the higher TTFB (also called the “waiting time”) the bigger frustration of your visitors. That leads to earlier abandonment, and at the end of the day, the dropdown in the rankings.
PRO tip: Test your TTFB with the WebPageTest tool.
Remember when we discussed three options to handle your mobile sites? One of them was called Dynamic Serving, and we discouraged you from using that for a good reason. Search Engine People points out:
“Dynamic content (which is commonly used by WordPress) is one of the biggest causes of slower TTFB. Most pages on the web as we know it are dynamically served.”
What is causing the delays? The process of getting together content stored in a database, template files, images, and other CSS and JavaScript resources. And that happens each time the user requests a page. Now, multiply it by the numbers of visitors that storm your website like a bloody legion.
How to sort it out? Since the problem is mostly related to WordPress, you can use a plugin to cache your dynamic content, such as WP Super Cache.
More metrics to pay attention to
That’s not all. When you audit your mobile website, you need to also take those metrics into consideration:
- TTI: Time to Interactive. As the name suggests, this metric is designed to measure how long does it take a website to become interactive. The TTI factor combines the time of initially displayed content with the time the website interacts with the user. The content itself isn’t good enough, as long as the visitor tries to do something on a page and nothing happens!As Google developers suggest:“To improve your TTI score, defer or remove unnecessary JavaScript work that occurs during page load.”
- FMP: First Meaningful Paint. The very first thing you see after landing on a mobile site is a blank page. It doesn’t last for long, because after a second or two you notice first elements appear on the screen.What we refer to as paint would be a headline, a search field, a text, an image, a canvas, depending on the website. Your goal here would be to deliver first meaningful paints after a second. Anything up from that will make your visitor feel itchy. That’s both crazy and difficult to control.What you can do to improve your FMP? Chris on Code from Scotch.io suggests loading images progressively, either as blurred images, or thumbnails and placeholders which will give your users the impression that something relevant is about to arrive there.What’s more – you can make the most of tactics like using service workers and caching, to make your content visible from a cache, while a page is loading.Plus – you can:
- Minimize the number of critical resources, as CSS and JS loaded in the head of your document.
- Minimize the number of critical bytes by, for instance, compressing the images,
- Minimize the critical length path by downloading all the critical resources.
To AMP or not to AMP?
Last aspect before we wrap up this extensive chapter about mobile optimization. The common practice to take care of mobile sites and minimizing the pagespeed is to inject AMP pages into your SEO strategy.
In general, Accelerated Mobile Pages are a solution made to render static pages fast. Helen Pollitt from Oncrawl describes it well:
“The idea of AMP is to produce a lightning-quick experience for internet browsers on a mobile device. The free, open-source framework allows you to build pages that work like a stripped-down version of your main pages, that function without the speed-taxing elements that impact load time.”
Google is backing up AMP technology, despite it is not their product. There are several benefits you can discover in:
- Boosting speed,
- Improving servers’ performance,
- A chance to get your articles in the carousel of news stories (AMP-oriented feature delivered by Google),
- The AMP lighting icon in SERPs,
- Increased conversion rates on e-commerce websites.
However, not all SEO experts are into the hype for AMPs. Let’s get back to Brian Dean. According to the Backlinko owner, it’s not only the AMP sites look generic, with no chances to take control of your advertising features, like pop-ups or lightboxes. Running an AMP site can cost you precious backlinks because instead of linking to the website, the backlink will go to… Google.com domain.
But that’s not all.
“Finally, AMP may not last. LTE is already SUPER fast. And 5G is just around the corner. So the idea of jumping through a thousand hoops for a tiny increase in mobile loading speed makes little sense today… and will make even less sense moving forward. Bottom line? Unless you have a compelling reason to do so, I don’t recommend AMP for most publishers.” – says Brian.
Wrapping up the mobile-friendly chapter
Optimizing your website for mobile is an SEO and business must. It would be best to implement the RWD version of your site, but in case of dynamic content – there is a variety of hacks you can use to make it easier for users and Googlebots.
Here are the top-notch tools you will need to have under your fingertips:
Okay, after we walked you through the corridors of mobile optimization, it’s time to switch to the relationship between SEO and UX:
How is the marriage of SEO and UX for mutual reinforcement?
From drawing a mock-up up to a detailed project, UX design is hard to overestimate with regards to search engine optimization. How can website design affect SEO?
As we highlighted before, optimized page load time is paramount. When it loads quickly, the user will see it immediately, and so will the search engine. Remember to test the mobile version as well.
What also affects how much traffic you’ll get from search, is top navigation and footer navigation. A wrong structure of internal links can hurt your SEO.
Also, being cheesy with naming those links is also the thing you need to avoid – how many “products,” “features,” “solutions” have you seen? And how about “read more”? Are they persuasive? Hardly.
Good UX practice is to:
- Name the internal links intuitively, with the correct description. Users need to understand them in seconds, and robots have to interpret them correctly.
- Create striking headlines. This is where UX meets SEO and copywriting. Good H1, H2, H3 has a searchable keyword injected in the copy. It’s also best to match a headline with a specific question your future client type into a search field.
- Design a website structure, so that a user won’t have any problems with finding specific information he was looking for. A well-designed structure will help in building a hierarchy, from the most to the least important information. As a result, robots will navigate on our pages in a logical order, and that will enable them to index our website correctly.
- Do your best with designing sign up forms. Making your prospects gravitate to your website is a good start, but it takes more work to convert them into leads and eventually into customers. UX design and e-commerce copywriting play a huge role in creating on-site lead formulas. At the end of the day, it’s a meaningful part of search engine optimization.
What’s more?
“You need to bear in mind, that to be regarded as a reliable brand, you need to secure your website with an SSL certificate, and to format your content according to the latest UX standards.” – says Wojciech Władziński. – “Remember also to run A/B tests to check which element on the page will bring better results. Take your time to set goals and configure events in Google Analytics.”
What are the biggest challenges regarding SEO for e-commerce and marketplaces?
How to start the SEO for an e-commerce website? The potential for e-commerce is still massive, but you need to be aware of what kind of competitors you will have a challenge in the field of search engine results.
Some industries are overloaded with the number of business players trying to rank high on certain phrases. It takes a heck of time and resources to achieve satisfying results when a particular sector is packed with strong competitors.
How can you prepare yourself to combat?
Your SEO strategy should start with serious keyword analysis. There are plenty of services like Answer the Public, BuzzSumo, or Soovle, where you can check your target keywords and most popular questions about them.
However, when it comes to e-commerce web development itself, you need to pay attention to:
- Structure. Online shop categories are very likely to become autonomic pages or landing pages during PPC campaigns. Hence, it is decisive to match them with the actual phrases your future clients use in search to find the product they need.
- Well-designed faceted navigation. As customers, we are usually in a hurry. We expect to find our dream product fast, and most likely – on the move, tapping on our smartphones. If we don’t come across what we’re looking for, we are likely to bounce. To do this right and to make your customer hit the buy button, you need to let him filter and sort products on your online shop.
- Descriptions. Categories, subcategories, and product pages can’t live without unique descriptive content. It’s an utterly bad idea to copy/paste the content from the producers’ websites (or any other websites already indexed in search engines). It takes a lot of time and creativity to create unique descriptions, especially when you have hundreds of products in your offer, but it’s definitely worth it.
- Structured data. It is a type of code that tells search engines what your content is about. These semantic markups enable robots to crawl on your page and display additional information in search results. In terms of an e-commerce site, it can be the price or a customer rating.
Although implementing these markups is rather complicated, we encourage you to use this structured data testing tool.
- URL parameters. OK, so if you took our advice, and tried filtering products on faceted navigation, you will see that the URL has changed. Different parameters have been added to the address, and they basically tell us what kind of filters you have used.
Here’s an example:
To avoid generating tons of URLs with duplicated content, you need to use the canonical tags.
When you seriously think of optimizing your e-commerce business, you definitely need to embrace the mobile-friendly approach. Take a look at those latest, jaw-dropping trends:
- “33.5% of Black Friday revenue in 2018 came from mobile orders.
- 44.7% of all e-commerce retail in the US for 2018 came from mobile purchases.
- 2017 marked the beginning of mass mobile online shopping with 34.5% of the total e-commerce market. The forecast for 2021 is 53.9%.”
Ready to put ALL this into action?
Well, that was quite a trip! To wrap things up, here’s a handy SEO checklist. When you build a website or a web application, you need to remember:
- Unique and valuable content
- The rel=canonical tag to determine the original URL
- SEO-friendly website structure (appropriate HTML tags, Server-Side Rendering approach, and creating a sitemap)
- Mobile-first optimization
- Search engine-friendly UX design (proper internal linking, compelling headlines, correct website structure)
We hope that our complete SEO guidelines will help you to start building an SEO-friendly web application. And most importantly, if you decide to hire a software house to do that on your behalf, you will know what to require from developers and UX designers.
If you have any questions, we will be more than happy to answer them.
