SEO Part2: Improve User Experience & SEO
Tags: seo
Published: 2020-08-13 10:13:50

<blockquote>
This is the final article for the SEO series, in this article, I will provide a few technics about how to improve our website's UX.
</blockquote>

As I mentioned in the [first article](https://dev.to/oahehc/seo-part0-the-correct-mindset-1l30) of this SEO series, the ultimate goal for the search engine is to figure out which website is best for its users. Therefore, improving the UX not only increase our users' satisfaction but also improve SEO at the same time.

To improve the UX of our application, I need to do our own research and try our best to understand the users. But we can also reference other's suggestions to fix some common problems which might harm our user experience.
Google spent lots of effort to study what's the most important metrics for a good website. Therefore, let's check what Google has given us and how we can use those metrics and tools to improve the UX.

## Agenda
  * [Search Signals for Page Experience](#agenda-1)
  * [Core Web Vitals](#agenda-2)
  * [Mobile Friendly](#agenda-3)
  * [Safe Browsing](#agenda-4)
  * [HTTPS](#agenda-5)
  * [No Intrusive Interstitials](#agenda-6)
  * [Links](#agenda-7)
  * [More Ranking Factors](#agenda-8)


### Search Signals for Page Experience <a name="agenda-1"></a>
There is so much information about how the search engine ranking the websites. To make this article more concise, I will focus on the metrics call `Search Signals for Page Experience` which is provided by Google.

![Evaluating page experience for a better web](https://i.imgur.com/0n92Alz.png)


### Core Web Vitals <a name="agenda-2"></a>
We all know that performance can affect the UX, but it's not easy to measure the website's performance. This year(2020), Google provides a metric call `Core Web Vitals`, which includes three different facets:   
![Core Web Vitals](https://i.imgur.com/YAdUndC.png)
- LCP: How fast we provide the content to our users?
- FID: How fast our users can start interacting with the website?
- CLS: Would the content on the screen reflow when users are using the website?

`Core Web Vitals` doesn't cover all the aspects of UX. But it gives us a very clear standard to follow. Moreover, there are tons of tools we can use.

1. [chrome extension](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma)
If we want to check a single page's metrics, we can install the chrome extension.
![core web vitals extension](https://i.imgur.com/Zomjn4Q.png)

2. Chrome DevTool - lighthouse
If we want more detail, `lighthouse` can provide more information that allow us to tackle the problem.
_ps. when using `lighthouse` to measure the performance, make sure you are testing the production version and using incognito window_
![lighthouse-performance](https://i.imgur.com/GgPfr4P.png)

3. [Google search console](https://search.google.com/u/1/search-console/index)
If we don't want to check our pages one by one, we can reference the Google search console to see the result for all our pages.
![google search console - web vitals](https://i.imgur.com/msDOe5V.png)

If you want to know more about how to optimize `Core Web Vitals`, highly recommend watching this video - [Optimize for Core Web Vitals](https://www.youtube.com/watch?v=AQqFZ5t8uNc)


### Mobile Friendly <a name="agenda-3"></a>
From 2020/09, Google will apply all mobile-first indexing on all websites, so even your majority users are using desktop or laptop, you might still have to make sure the website is easy to use on mobile devices.

We can use this [tool](https://search.google.com/test/mobile-friendly) provide by Google to check the website's mobile-friendly or not.
![mobile friendly](https://i.imgur.com/ZCcnAdp.png)

Again, [Google search console](https://search.google.com/u/1/search-console/index) will keep checking our websites is mobile-friendly or not.
![google search console - mobile friendly](https://i.imgur.com/4nKiZaY.png)

To know more about how to optimize the user experience on mobile, check this article for more information - 
[Mobile-first indexing best practices](https://developers.google.com/search/mobile-sites/mobile-first-indexing)


### Safe Browsing <a name="agenda-4"></a>
Obviously, security problems will cause huge damage to our users' experience. And the search engine also avoids providing malicious content to their users. Therefore, we need to fix all the security issues on our website.  

One thing we need to be extra careful is the content generated by the users. We need to take extra effort to manage those content and make sure there is no malware or deceptive information.  

If we use the 3rd-party libraries on our website, use [npm](https://docs.npmjs.com/cli/audit) or [yarn](https://classic.yarnpkg.com/en/docs/cli/audit/) audit to address the critical security issues and fix them is also very important.

Google search console also warms us when they found security issues on our website, but we should try our best to avoid that happen.
![google search console - security](https://i.imgur.com/IsSNnul.png)


### HTTPS <a name="agenda-5"></a>
There are lots of services that can help us host our website through `HTTPS`, so I see no reason why not implement this. 

We will see a lock icon on the browser is our website is service by `HTTPS` with legit certification.
![https](https://i.imgur.com/vinj0hq.png)

Otherwise, it should warm us the site is not secure.
![https-not secure](https://i.imgur.com/aiDZRjd.png)

And we can check the Chrome DevTool security tab for more information.
![chrome-security](https://i.imgur.com/h12APaG.png)


### No Intrusive Interstitials <a name="agenda-6"></a>
`Interstitials` are web pages displayed before or after an expected content page, which might make content less accessible to the users.  
Ideally, we should prevent using `Interstitials` on our website.  
![No Intrusive Interstitials - bad](https://i.imgur.com/Om7QAnL.png)

But there are a few scenarios which are ok to use `Interstitials`.
![No Intrusive Interstitials - good](https://i.imgur.com/IiBD85v.png)


### Links <a name="agenda-7"></a>
We already go through all the metrics on the `Search Signals for Page Experience`. There is one more factor I want to raise - `Links`.
To measure a website is worth sharing with others, Except testing the website on our own, we can also reference how many people have recommended this website.

There are two types of links.
1. inner links: the links are put on our own website. 
Although we can easily create more links, we should definitely create useful links for our users and prevent harm to the user experience.

2. backlink: the links display on other websites.
There are a few methods that can help us increase the `backlink` number. For example, we can make our website easier to share on social media.  
Be aware that the quality of the `backlink` matter. If the link is from the `BAD website` (paid links or link exchanges..), it might cause a negative impact on our SEO. 
If you think someone intentionally put the link of your website on the `BAD website`. You can follow this article to [disavow backlinks](https://support.google.com/webmasters/answer/2648487)


### More Ranking Factors <a name="agenda-8"></a>
If you think the above metrics are not enough, here is a great article points out many important factors that Google use on their ranking algorithm - [google-ranking-factors-2019](https://sparktoro.com/blog/resources/google-ranking-factors-2019/).  
![google-ranking](https://i.imgur.com/ZGyrlLl.png)


---


## Conclusion
Thanks for reading this article, I hope this SEO series can help you understand the SEO better and know how to start improving it. If you have any questions or a different idea, please feel free to leave a comment.


## Reference
  * [Evaluating page experience for a better web](https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html)
  * [web-vitals](https://web.dev/vitals/)
  * [Finding more mobile-friendly search results](https://webmasters.googleblog.com/2015/02/finding-more-mobile-friendly-search.html)
  * [Mobile-first indexing best practices](https://developers.google.com/search/mobile-sites/mobile-first-indexing)
  * [More Safe Browsing Help for Webmasters](https://webmasters.googleblog.com/2016/09/more-safe-browsing-help-for-webmasters.html)
  * [Helping users easily access content on mobile](https://webmasters.googleblog.com/2016/08/helping-users-easily-access-content-on.html)
  * [google-ranking-factors-2019](https://sparktoro.com/blog/resources/google-ranking-factors-2019/)
  * Cover Image by <a href="https://pixabay.com/users/madartzgraphics-3575871/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=1906465">Darwin Laganzon</a> from <a href="https://pixabay.com/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=1906465">Pixabay</a>