🔍 Every Front-End Developer should know the basics of how Google search works
Suppose you develop a Website you most likely want users to find your page. Optimize your page for Google ensures the correct audience will find your page.
↓ Learn how Google search works
The goal of a website is to be found in Google.
To show your website at Google, it goes through these 3 steps:
🔹 Crawling
🔹 Indexing
🔹 Serving
In this thread, we will take a closer look at all the steps.
{ 1 / 12 }
🔹 Crawling
Crawling is the first step. This is about finding your website in the first place.
Some pages are already known to Google through simple links. You can speed up this step with sitemaps.
Once Google has found your page, Google will crawl it.
{ 2 / 12 }
Google uses two different crawlers! One mobile and one desktop crawler. Both simulate the corresponding device for the user.
Google defines a "primary crawler" for your website. This is basically used to crawl your site. The other type is the "secondary crawler".
{ 3 / 12 }
During the crawl process, google will render your page and executes every script on your website. This also ensures dynamic content is rendered.
Google will then analyze text and non-text and the overall visual layout.
{ 4 / 12 }
To help google finding your page, there are several points you can ensure:
🔸 Submit a sitemap, on Google Search Console
🔸 Submit a crawl request, on Google Search Console
🔸 Have your page linked on external or internal pages that are already on Google.
{ 5 / 12 }
🔹 Indexing
If Google finds your page, it will be indexed next.
The page is generally analyzed during the indexing process, the text content, the content tags/attributes are read (such as the title tag), and media files are cataloged.
{ 6 / 12 }
This process also analyzes whether your page has duplicate content.
Pages with duplicate content are significantly less likely to be crawled by Google.
Pages can be prevented from indexing using a robots.txt or a noindex meta tag.
{ 7 / 12 }
To help google indexing your page, there are several points you can ensure:
🔸 Using structured data for rich cards as an example
🔸 Using keywords in your text content
🔸 Use descriptive title/description tags
🔸 Use descriptive and correct alt image tags
{ 8 / 12 }
🔹 Serving
After your page has been indexed, google can serve your website when a user uses google search.
When a user searches on google, google will return the results that appear most relevant for the user.
{ 9 / 12 }
Recently, google included the user experience into the ranking result, whether your page is loading fast or mobile-friendly.
So make sure you are ready for that! If you want to improve your loading time, check out my profile, I made many threads about it! ⚡
{ 10 / 12 }
To help google serving your website better, ensure you meet the following points:
🔸 Be sure your page loads fast and is mobile-friendly
🔸 Use rich card results, such as recipes
🔸 If you serve localized content, tell Google your preferences
{ 11 / 12 }
✅ That's it. Did you know how google indexes your website?
This is the first thread regarding SEO topics on my profile! I will create the upcoming weeks more detailed posts for on-site/on-page SEO optimizations!
{ 12 / 12 }
TL-DR:
Google has three basic steps:
🔹 Crawling/Finding your page
🔹 Indexing/Analyzing your page and content
🔹 Serving your page on google search results
If you found this thread useful, consider following me @michaelketzer and retweet the first tweet! 🙏
Did I miss something? Please let me know 🙏
• • •
Missing some Tweet in this thread? You can try to
force a refresh
⚡ Every Web Developer should know and use WebP images
The WebP image format is considered a next-gen image format and reduces the file size for images by 25-35%.
This is crucial for modern SEO and web performance.
👇 Read more about how to use WebP in seconds.
▶️ What is WebP?
WebP is an image format published by google in 2010.
It creates lossless images that are 26% smaller than PNG's and lossy images 25-34% smaller.
In reality, I have seen over 40% smaller sizes already.
And WebP supports transparency!
{ 1 / 7 }
▶️ What browsers are supporting WebP?
The current support includes all main browsers.
It supports Safari only for iOS or macOS Big Sur 11+.
Using the picture tag ensures compatibility for older browsers and fallback alternatives in other formats!
⚡ Every Web Developer should know performance budgets
A performance budget is a set of constraints that apply to metrics that affect a website's performance. Having budgets helps to ensure your website performs well.
👇 Learn about web performance and performance budgets
▶️ Why is performance important?
Performance is an important part of the user experience, and it can directly impact your business.
User experience has also become a factor in Google page ranking.
Setting a performance budget defines the boundaries for your website.
⚡ Every Web Developer should know how to create next-gen image formats
Serving your images in next-gen formats is crucial to ensure your performance is fantastic and loads fast for any of your users.
👇 Learn how to create images in the next-gen format in seconds
1️⃣ What are next-gen formats?
Next-gen formats are image formats such as
- WebP
- AVIF
- JPEG 2000
- JPEG XR
We will focus on WebP as this has the best support across all browsers and is most used!
2️⃣ What is WebP?
WebP is a next-gen image format published by google in 2010. It creates lossless images that are 26% smaller than PNG's and lossy images 25-34% smaller.
In reality, I have seen over 40% smaller sizes already.