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.

Ruth Mesfun
Ruth Mesfun
8 min
17 Jun, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

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.

Available in Español

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.

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

Don't Solve Problems, Eliminate Them
React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
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.
Using useEffect Effectively
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
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.
Design Systems: Walking the Line Between Flexibility and Consistency
React Advanced Conference 2021React Advanced Conference 2021
47 min
Design Systems: Walking the Line Between Flexibility and Consistency
Top Content
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 Concurrency, Explained
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
Top Content
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
TypeScript and React: Secrets of a Happy Marriage
React Advanced Conference 2022React Advanced Conference 2022
21 min
TypeScript and React: Secrets of a Happy Marriage
Top Content
TypeScript and React are inseparable. What's the secret to their successful union? Quite a lot of surprisingly strange code. Learn why useRef always feels weird, how to wrangle generics in custom hooks, and how union types can transform your components.
Jotai Atoms Are Just Functions
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
Jotai is a state management library. We have been developing it primarily for React, but it's conceptually not tied to React. It this talk, we will see how Jotai atoms work and learn about the mental model we should have. Atoms are framework-agnostic abstraction to represent states, and they are basically just functions. Understanding the atom abstraction will help designing and implementing states in your applications with Jotai

Workshops on related topic

React Performance Debugging Masterclass
React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
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 Hooks Tips Only the Pros Know
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
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, TypeScript, and TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
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.
Web3 Workshop - Building Your First Dapp
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
Nader Dabit
Nader Dabit
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.
Designing Effective Tests With React Testing Library
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Top Content
Featured Workshop
Josh Justice
Josh Justice
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
Remix Fundamentals
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Kent C. Dodds
Kent C. Dodds
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