Have you ever developed something cool, and revolutionary, and cannot wait to share it with the whole world?
You start ticking items off your checklist:
- [x] Optimize the build,
- [x] Purchase a domain,
- [x] Push it to production and
- [x] Send it to your friend.
As soon as you share it on any social media platform, it shows the ‘web link’ as the website carousel. Or worse of all, it reads ‘React App’!
(Your conversation with your friend)
Yeah, I am the kind of loner to talk to myself.
Moving on, let us understand what mistakes you made due to which you failed to impress your friends (or Boss, or Hiring Manager, or someone I don’t care to list).
Whoever you failed to impress, the answer is a three-letter abbreviation: SEO, that you failed to research and incorporate in your web app.
- S - Search
- E - Engine
- O - Optimization, is a website optimizing technique for search engines more important than ever. And, let us face it head-on, SEO is a critical part of any business's online presence.
When someone has a question and wants to look up the answer online, they use search engines. Search engine algorithms are computer programs that sift through data to provide users with the precise results they want.
To identify websites and choose which ones to rank for a particular keyword, search engines use algorithms. In order to find information, search engines go through three stages, and they are:
- Crawling - the discovery stage
- Indexing - the filing stage
- Ranking - the retrieval stage.
If you are interested to read more on this topic, I would suggest that you read this article on SEO.
The key takeaway for any developer from the above article is that every Search Engine (such as Google, DuckDuckGo, Bing, etc.) employ bots called ‘crawlers’ that analyze and rank your web pages according to the content inside them.
Though these crawlers sift through your website, they are not very smart at understanding what the content really is, and hence, we have something called
metadata to feed these bots the information that they need to rank your website on a search engine. In 21st Century, this ranking is done by using a protocol called 'The Open Graph protocol'. Feel free to read more about the 'OGP' at https://ogp.me/.
Let us not get ahead of ourselves, and understand what all components truly contribute to your SEO score.
Let us understand why React is not the wisest choice for creating an SEO-optimized website.
npm run build
The only downside to this React Build is that it is just a bunch of gibberish to humans and crawlers, and is only compiled on page load.
Sample React build:
For this section I would like to take direct reference from NextJS Documentation. Feel free to skip this technical section if you just want working solutions.
Static Site Generation is where your HTML is generated at build time. Each request then makes use of this HTML. Since all the HTML is pre-rendered and available on page load, static site generation is probably the greatest type of rendering method for SEO. It also improves page performance, which is now another ranking criterion for SEO.
Server-Side Rendering (SSR), like SSG, is pre-rendered, making it excellent for SEO. HTML in SSR is created at request time as opposed to build time like in SSG. When you haveextremely dynamic pages, this is fantastic.
Developers and content editors can employ static generation on a per-page basis with incremental static regeneration instead of having to completely rebuild the site. You may scale to millions of pages while maintaining the advantages of static using ISR.
As we mentioned previously, client-side rendering is generally not advised for the best SEO.
CSR is ideal for dashboards with lots of data, account pages, or any other page that you don't need to be indexed by any search engines.
One of the major strengths of Next.js is that each one of the above rendering methods can be done on a per-page basis. You might want your blog posts (like this one) statically generated, your customers, account dashboard client-side rendered and, then perhaps you have a news feed you want to server-side rendering.
we are on the interesting and functioning part of the blog. The implementation!
We would be looking at the NextJS web app for this section. In your
_app.ts, you can add the following metadata:
Titlemeta tag is important on your web page for 2 big reasons:
- It is what users see when they click to enter your website from search results
- It provides the crawler with your website name so that it can understand and index it on Search Engines.
<meta name="og:title" content="SEO Optimzation using NextJS" />
Descriptionis another meta tag that is important for your website. The keywords from the description will appear in bold if a user's search contains them.
<meta name="description" content="Blog on implmenting SEO optimization using NextJS." />
Viewportmeta tag tells a Search Engine that the website is mobile screen friendly. If your website is responsive, this is an important meta tag to include.
<meta name="viewport" content="width=device-width, initial-scale=1" />
Authormeta tag tells the crawler about the owner/author of the website. This way when the author is googled, his websites are also listed on the search engine.
<meta name="author" content="Kanit Mann" />
Robotsmeta tag tells what all robots and crawlers are allowed to sift through your website.
<meta name="robots" content="all" />
This is the
<Head> snippet from my Portfolio Website, which not only helps me optimize it for SEO but also brings out a pop up when shared through social media.
<Head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="Kanit Mann is a tech enthusiast with entry-level industrial experience in Database Management, Web Development, and Embedded Programming." /> <meta name="author" content="Kanit Mann" /> <meta name="author" content="kanitmann" /> <meta name="robots" content="all" /> <meta name="robots" content="max-image-preview:standard" /> <link rel="apple-touch-icon" href="apple-touch-icon.png" /> <link rel="shortcut icon" href="/apple-touch-icon.png" type="image/apple-touch-icon.png" /> <meta name="twitter:title" content="Kanit Mann" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@mannkanit" /> <meta name="twitter:creator" content="@mannkanit" /> <meta name="twitter:image" content="https://raw.githubusercontent.com/kanitmann/portfoliov2/master/public/card.png" /> <meta property="og:site_name" content="Kanit Mann" /> <meta name="og:title" content="Kanit Mann" /> <meta property="og:type" content="website" /> <meta property="og:image:url" content="https://raw.githubusercontent.com/kanitmann/portfoliov2/master/public/card.png" /> <meta property="og:image:type" content="image/png" /> <meta property="og:image:width" content="400" /> <meta property="og:image:height" content="300" /> <meta property="og:image:alt" content="A screenshot image of Kanit's homepage" /> <title>Kanit Mann - Homepage</title> </Head>
All your friends start trusting you blindly.
If you find this blog helpful, kindly add me as friend, I am very lonely 😭