Improve Your SEO

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

Comments

Sign in or register to post your comment.

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
24 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 Remote Edition 2020React Summit Remote Edition 2020
32 min
AHA Programming
Are you the kind of programmer who prefers to never see the same code in two places, or do you make liberal use of copy/paste? Many developers swear the Don't Repeat Yourself (DRY) philosophy while others prefer to Write Everything Twice (WET). But which of these produces more maintainable codebases? I've seen both of these approaches lay waste to codebases and I have a new ideology I would like to propose to you: Avoid Hasty Abstractions (AHA). In this keynote, we'll talk about abstraction and how you can improve a codebase applying and creating abstractions more thoughtfully as well as how to get yourself out of a mess of over or under-abstraction.

Workshops on related topic

React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
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
Workshop Free
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 Summit 2023React Summit 2023
171 min
React Performance Debugging Masterclass
Workshop Free
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 Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Workshop Free
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.


Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Workshop Free
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.
Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.
Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem
Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM


React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Workshop Free
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