C M PandeyHi there!
The reason why you're here is probably because you wanna know what I did to achieve a SEO score of 100 on lighthouse.
Link to my portfolio website is at the bottom.
I will lay out all my tips and tricks over here, which I implemented to achieve this! Let's get this thing started! 🤘
Tip #1
Don't use plugins
Most of the search engines don't index browser plugins relying content (Java/ Flash). Plugin-based content doesn't show up in search results, so it's better to avoid it!
Plus, plugins aren't supported by most of the mobile devices, which creates a not-so-good experience for a mobile user.
Here's an article which will help you to convert a Flash video to HTML5 video
Tip #2
Use lang attribute
Using lang attribute tells the search engine what version of a page they should list in search results for a given language or region. You should always include the lang attribute inside the tag, to declare the language of the webpage.
<html lang="en">
Tip #3
Use alt attribute for images
While having an alt attribute for every image might not seem to be an important thing to do, but let me tell you, IT IS.
If due to some reason, an image doesn't loads, the alt text will tell the user what the image was about.
Make sure that it is short and descriptive.
<img src="image.png" alt="logo">
If the image is used just for decoration and does not provide any useful content, then give it an empty alt="" attribute and it will be removed from the accessibility tree.
<img src="image.png" alt="">
Tip #4
Don't block it from indexing
Search engines can only show those pages in their search results which haven't been explicitly blocked for indexing. Some HTTP headers and meta tags can be used to tell the crawlers that this page shouldn't be indexed.
Make sure that your code doesn't contain any of the following code lines:
<meta name="robots" content="noindex"/>
X-Robots-Tag: noindex
<meta name="AdsBot-Google" content="noindex"/>
Tip #5
Write descriptive text for your links
Link text is a word or phrase in a hyperlink which can be clicked. When link text clearly conveys a hyperlink's target, both users and search engines can understand the content and its realtion to the linked page.
Don't
<p> To view my projects <a href="projects.html"> click here! </a> </p>
Do
<p> View <a href="projects.html"> my projects </a> </p>
Tip #6
Include description in your <meta> tag
this is the most important thing to do for SEO. The name and content attribute tells the summary of the content of a page that is included in the search results. A well-written, unique meta description makes your page appear more relevant and can increase your search traffic.
<meta name="keyword" content="cmcodes, portfolio, react, react native, javascript, developer">
<meta name="description" content="Here's the portfolio of cmcodes (react & react-native javascript developer).">
<meta name="author" content="cmcodes">
Tip #7
Include the <title> tag
This is the first thing which a user reads when he searches for a specific term. Make sure that it is relevant and eye-catchy!
<title>cmcodes - React Developer</title>
Tip #8
Include viewport in <meta> tag
Many search engines rank pages on the basis of mobile-responsiveness. Without a viewport meta tag, mobile devices render the webpage with the width of a desktop and then scale the pages down, which makes them difficult to read.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
Thank you for reading so far! 😄
Hope you learned something new from this! 😃
Here's the link to my portfolio website 👉 cmcodes
Here's the link to my portfolio source code 👇
cmcodes1
/
cmcodes1.github.io
😊 Here's my portfolio where you can see all my projects, blogs, and achievements.
Check it out and do let me know your views! Eager to hear your opinion. 😁
Feel free to share your portfolio link in the comments below. I would be very happy to have a look at them. 😊
Happy Coding! 👨💻
