🔍 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 }

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

Keep Current with Michael Ketzer 🚀

Michael Ketzer 🚀 Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!


Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @michaelketzer

9 Sep
⚡ 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!

{ 2 / 7 } HTML picture tag with webp image
Read 9 tweets
6 Sep
⚡ 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.
▶️ What are performance budgets metrics?

Performance budgets can be categorized into:

🔹 Quantity metrics
🔹 Timing metrics
🔹 Rule-based metrics

👇 Let's have a look at what each of them means
Read 15 tweets
2 Sep
⚡ Every Web Developer should know how to serve properly sized images

Serving images in the correct image dimensions is crucial for web performance. Loading incorrect sizes can increase the network payload.

👇 Learn how to serve the correct mage sizes in seconds
▶️ Why is this important to web performance?

Incorrectly sized images either increase your network payload, or the other way around, causes to have blurry images.

For example, a stock photo is usually 11MB. Proper size/compress can reduce it down to 400kb.
▶️ How can you determine the correct image size?

To identify the correct image sizes, we need to take care of the defined CSS units first.

🔸 Absolute units: px, rem, mm, in, cm
🔹 Relative units: %, vw, em

Relative units are responsive. The picture has no fixed size.
Read 13 tweets
16 Aug
⚡ Every Web Developer should know what the Largest Contentful Paint is

The Largest Contentful Paint is one of the metrics to measure user's page experience on your website. It is a Core Web Vital and crucial for SEO.

👇 Learn more about the LCP and how to improve it
▶️ What is the Largest Contentful Paint (LCP)?

The LCP is a Core Web Vital focusing on the loading experience.

It measures the time until the largest element above the fold is rendered for your users. This is typical:

- an image
- a video
- a background image
- a headline Illustrations representing what above the fold means
▶️ Why is the LCP important?

The LCP is a Core Web Vital and has become crucial for modern SEO.

The user page experience on your website has become a factor in the googles algorithm to determine your website page rank.

The LCP is one of the metrics for the page experience.
Read 23 tweets
9 Aug
⚡ Every Web Developer should know how to serve scaled images

Serving your images scaled is crucial to ensure your performance is fantastic and your website loads fast for any of your users.

👇 Learn how to create and serve scaled images in seconds
1️⃣ What are scaled images?

A scaled image is an image that is created in different size variants to match the displayed size for your user.

It does allow you to serve drastically smaller images when there is no need for huge images.

For example, having a full-screen image on a desktop device may serve with 1920px, a tablet with 1024px, and a mobile with only 460px.

There is no need to load a 1920px image on a mobile device.

Using scaled images will automatically load the appropriate size for your users.
Read 17 tweets
4 Aug
⚡ 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
- JPEG 2000

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.

And WebP supports transparency! ⚡

Read 15 tweets

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!