Improve Your SEO

♪ Hi, I'm Ruth Mesfin 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, you know, geek out on React and mobile-first indexing. So, 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 would 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, 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. 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-first 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, Lighthouse, Screencurve, 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 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. 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 it 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. But we wanted to make sure that Googlebot was allowed to crawl from the mobile pages. It would have been helpful 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 can see that it's hidden behind buttons. You'd need to click the button, and then the data would 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. Thank you. ♪♪♪