In the exciting process of building an application, often a few important things get overlooked. These are small details that have a significant impact on your application's performance. Working as a web developer for the past few years, I've noted a few strategies that will significantly improve your application's branding, user experience, SEO performance, and visibility. Let's take a look at these strategies!
Add favicon
Favicon is a great way to add branding to your application and is required by today's standards. It allows users to identify your app easily in the crowd. For a step-by-step guide to generate and add favicon in a Next.js application, follow my article Add favicon in a Next.js application built with the pages router.
Create sitemap
A sitemap tells search engines which pages are important in your application. It also provides additional information to search engines, e.g., when a page was last updated. You provide this information to the search engines so that they can index and rank those pages.
If you need a fresher, I have an article on Generate sitemaps automatically in a Next.js application that provides a step-by-step guide to automatically generate and update the sitemap in your Next.js application.
Improve on-page SEO
You know why on-page SEO is important, right? It's the first step for your application to be found by your target users. For this advantage, your application must have a proper on-page SEO setup. In Next.js, it's quite easy to work on and improve the on-page SEO of an application. I have an article on Five ways to improve on-page SEO in a Next.js application that provides a step-by-step guide to improve on-page SEO in a Next.js app.
Perform a PageSpeed Insights analysis
PageSpeed Insights is another great tool to check your application's performance, accessibility, best practices, and SEO metrics. To use this tool, go to PageSpeed Insights, put your application URL, analyze, and fix any issues it recommends.
Setup Google Analytics
Google Analytics is a great tool that provides valuable insights into how users are interacting with your application. With this information, you can find out the areas in your application that need improvements and work on them. If you want to refresh your knowledge on integrating Google Analytics in a Next.js app, follow my article on 3 easy steps to set up Google Analytics in a Next.js application.
Setup Google Search Console
Google Search Console helps you monitor, maintain, and troubleshoot your site's presence in Google search results. By adding your application to the Google Search Console, you can also ping Google to fix any issues related to indexing.
Follow the steps below to add your application to the Google Search Console.
- Login to Google Search Console
- Create a property for your application
- Add the TXT record in your domain name provider to verify the site's ownership
- Once verified, add your sitemap URLs in the console
- Occasionally check the console to find pages that Google isn't indexing
- Check and fix issues on those pages and click on the 'Validate Fix' button to ping Google
Check URLs in Dr Link Check
Dr. Link Check is a great tool that crawls your whole application and finds any links that are broken. Using this tool, you can find and fix any broken links in your application. To use this tool, go to Dr. Link Check, put your application URL, and run the check.
Set initial and maximum scale
This is an optional one and not recommended for every application. However, if your application is well-designed, setting initial and maximum scales can create a better user experience. Without these, iOS devices will zoom in on a page when a user clicks on an input to type. To prevent this behavior, include the following code in your _app.tsx file:
<Head>
<meta
name='viewport'
content='width=device-width, initial-scale=1, maximum-scale=1'
/>
</Head>
That's it! If you've followed the strategies, your application is off to a great start and ready to ship to production. I hope you've learned a thing or two from this article. Feel free to share the content with your friends who might also find it useful.