23
The Simple Guide to Seo For Your Application
We as a developer mostly focused on solving problems and building stuff. but some other things need our focus and time. Seo(Search Engine Optimization) is one of them, and we can't say that it's not a developer job it's some Seo expert job.
There are many things when we talk about Seo and as a developer, we should focus on some of them that we can do by ourselves and should not depend on Seo experts.
In this post, we will discuss some basic Seo setups that we can do ourselves as a developer and should not rely on Seo experts.
Let's get started,
People who don't know what Seo is? don't worry, let me explain what Seo is.
Seo stands for Search Engine Optimization. It is a process/set of configuration/practice to increase the visibility of the service/product that you are building or already build.
For Example :
If you search for something on google let say what is Seo? you get hundred or thousands of results but at a time you can only see the top 10 or 20 results, why 10 or 20 the answer is simple because those 10 service/product has good Seo setup/process/config.
To answer this question let me take one simple example, let say you have built one SaaS(Software as a Service) for social media marketing and you deployed that product/services to production for people to use it.
now you asked one of your friend/colleagues to test your product so they went to google and searched for your product "XYZ" but here something strange happened they did not find your product/services on google instead they see other products/services with similar keywords.
Why did that happen? The answer is simple you had just built the product/services and didn't work on basic SEO and google was not able to crawl your product/services website.
so this is the simplest reason why Seo is important.
As I said we just need to do some basic setup so that at least google can crawl our product website and show it to the users when searching for similar keywords as ours.
Here is a basic list of things we can do
- Add meta tags for title, viewport and description
- Add meta tags for Open-Graph protocol
- Add meta tags for keywords that match your product/services
- Add sitemap of your product/services website
- Add robots.txt file with proper configuration
- Add a manifest file
I have done all these things for my website sachinchaurasiya.dev
Let's see the above points one by one.
Here you can see how I have added meta tags for title, description and viewport.
Before moving let me explain what is Open-Graph protocol is and why should you use them?
Open Graph protocol to control how your product/service website URL's are displayed when shared on social media.
For Example:
Here you can see I have added four og:title, og:description, og:type and og:image open-graph meta tags.
Whenever I share my website URL with someone or on some social media platform that would be displayed like this.
There are a bunch of other open-graph meta tags out there you can see all of them here
Here are some keywords that I have added to my website so if anyone searching for these keywords my website should get indexed on google.
A sitemap is nothing but a structure of your website which provides information about the pages, videos, and other files on your site, and the relationships between them.
There are a lot of online tools available to generate sitemaps for your website, also there are some npm packages available that help you to generate sitemaps.
one of them is react-build-sitemap.
A robots.txt file tells search engine crawlers which URLs the crawler can access on your site and The manifest is a simple JSON file in your website that tells the browser about your website on the user's mobile device or desktop.
And that’s it for this topic. Thank you for reading.
23