Improve Your SEO

Rate this content
Bookmark

Google announced that they will fully switch over to crawling and indexing sites using mobile-first indexing March 2021. Now for some companies their mobile site is dynamically rendered which has a high risk of decreased ranking on google once mobile-first indexing is fully implemented.


This presentation will share how to assess what changes needs to be made, best practices to increase SEO for Mobile First Indexing, how to increase performance, and how to turn parts of your site from dynamic rendering to mobile responsive in less than two months.

8 min
17 Jun, 2021

AI Generated Video Summary

We're introducing our new release and livestream, explaining mobile-first indexing and its impact on SEO. Teachers Pay Teachers faced challenges with Google's move to mobile-first indexing, prompting them to optimize their mobile pages. They combined teams, tested performance, increased page speed, fixed structured data issues, and showed hidden content to improve search ranking. To optimize mobile pages for Googlebot, it is important to update mobile content, increase page speed, and test performance and SEO.

1. Introduction to New Release and Livestream

Short description:

We're introducing our new release and livestream. Visit our website to learn more and enjoy our livestream and YouTube experiences. I'll explain what mobile-first indexing is and share what we did to improve our SEO. Teachers Pay Teachers is a platform where teachers can share and sell resources. Google's move to mobile-first indexing posed challenges for us. Let me explain how search ranking works and how mobile-first indexing fits in.

We're now introducing you to our new release and livestream. Visit our website at livestream.com to find out more and enjoy our livester and YouTube experiences, and learn more about the latest and greatest on the React team. We're also doing a live stream live, so if you want to subscribe to a live stream, please do so. We're also delivering live content that you want to see, so if you have more questions, let us know in the comments section below. We really hope to see you there. Thanks for watching.

Hi, I'm Ruth Mespin from Teachers Pay Teachers, and I'm going to show you how my team improved our SEO for mobile first indexing. Just so you know, here's my information if you'd like to connect with me after the session and geek out on React and mobile first indexing. In this talk, I'll first give you a quick background on Teachers Pay Teachers, explain what mobile first indexing is and then share with you what we did to improve our SEO.

So for anyone who hasn't heard of Teachers Pay Teachers, it's a platform where teachers can share and sell resources to each other. And the resource page is where a teacher can see if a resource is the right fit and then purchase it. It's also ranked on Google. So when Google announced that they were moving towards 100% mobile first indexing, this was our expression. We didn't really know what that meant and how it affect us. So let me tell you how search ranking works and how mobile first indexing fits into it. This is Googlebot. He's a web crawler. And what he does currently is desktop-first indexing, which is getting your information from your content of your desktop pages. And he'll also check, you know, bounce rates, et cetera. But essentially, check the relevancy of the page itself. And based on the user query, he will rank the search. And you can celebrate, because you're on page one.

With mobile-first indexing, though, it's doing the same thing, except crawling your mobile pages. And if your mobile is different from your desktop page, it can rank you very differently. Which was a big problem for us. With our mobile page, which is this, there isn't a lot of information shown at first. You need to click the button to get through the information which is a different page entirely. And then, it also has a different user experience from our desktop page. Mainly because our desktop page is in React, which is awesome. But our mobile page is in PHP.

2. Mobile-First Initiative and Optimization

Short description:

The majority of our users obtained resources on our desktop page. Mobile was not a priority until Google announced their switch to mobile-first indexing. We combined teams to create a mobile-first initiative and updated the resource page. We tested performance, increased page speed, and updated mobile content. We also fixed structured data issues and showed hidden content.

To be fair, the majority of our users obtained resources on our desktop page. And since mobile was completely separate and harder to maintain, it wasn't really a priority. But it's now mainly a priority because Google shared that they were switching to mobile for indexing to 100% by September. Don't worry. They actually pushed it back to March of next year. So you have time to optimize.

So, with that said, we combined two amazing teams, Web Platform and Quality, to create the mobile-first initiative team to update the resource page. We converted from a PHP mobile page to a mobile-responsive React page, keeping the UI the same as the desktop view. So it went from this to this. Which made us very happy, especially since I love React. It also made the company very happy because it increased our purchases on mobile by 3%. So, we had a really good user experience here.

So what did we do? First, we tested our performance using these resources like House Screen Curve and Google Search Console. Using these tools, we were able to make benchmarks to see if our changes are improving performance in SEO. Also, we utilized Lighthouse, especially because it gave us recommendations on things that we needed to fix. Second thing was that we increased our page speed based on Lighthouse recommendation. We realized that we were inundating our resource page with a lot of third-party packages that were unnecessary. So we reduced them by half so we could increase the page load or we could increase the speed of our page load on our resource page. What we did was we actually swapped to smaller packages. So for instance, moment.js, we realized was a really large package and we actually chose a smaller package that had the functionalities we needed. We also replaced packages with React components. So we created our own chart components so we could remove our Chartist package. We also natively loaded images and removed unnecessary CSS and feature flags that were cluttering our resource page.

Next, we updated our mobile content. The mobile version didn't have all the content that the desktop version had. So we updated this so there wasn't any discrepancies of the content between mobile and desktop. We also fixed any structured data issues. Finally, we showed hidden content. We first checked robots.txt, which is a file. If you don't know where the file is, if you have a web platform team, check with them.

3. Optimizing Mobile Pages for Googlebot

Short description:

To increase your search ranking, show hidden content, update mobile content, increase page speed, and test performance and SEO. Connect with me to share your results and ask questions.

We want to make sure that Googlebot was allowed to crawl from the mobile pages. It would have been awful if he didn't, and we did all this work. So just double check that there isn't a disallow on there.

Next, we stacked each of the sections. In our original mobile view, you could see that it's hidden behind buttons. You need to click the button, and then the data will load. The issue with that is that if it isn't initially loaded, Googlebot can't crawl the information. Think about it. Googlebot can't click a button and then wait for the data to come through.

So we stacked the sections, and so users now can easily see the content without needing to take any additional actions. I do also want to state that Google is mindful of the limited space on mobile screen, so you can load the data initially upon page load, and then hide it behind a button or an accordion and get it revealed based on the user action. Since if that's the case, if it's initially loaded, Googlebot can still crawl through the data information.

So, to recap, to increase your search ranking, you should show hidden content, update mobile content, increase page speed, and then finally test performance and SEO. Or just suit up and you'll be just fine. Please make sure to connect with me and share the stuff that you did that are based on the recommendations and share your results. I would love to see them, and if you have any questions, again, connect.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Advanced Conference 2021React Advanced Conference 2021
47 min
Design Systems: Walking the Line Between Flexibility and Consistency
Design systems aim to bring consistency to a brand's design and make the UI development productive. Component libraries with well-thought API can make this a breeze. But, sometimes an API choice can accidentally overstep and slow the team down! There's a balance there... somewhere. Let's explore some of the problems and possible creative solutions.
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar
React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Featured WorkshopFree
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions