SEO optimization through titles/descriptions

components/about-header/index.js

@@ -7,7 +7,7 @@ const AboutHeader = () => (
       <div className="author-info">
         <img className='author-img d-none d-sm-none d-md-block d-lg-block d-xl-block' src="/kamran.jpeg" />
         <div className="author-msg">
-          <h2>Hello, I'm Kamran Ahmed.</h2>
+          <h1>Hello, I'm Kamran Ahmed.</h1>
           <p>I created <span className='flow-black'>roadmap.sh</span> to help developers find their path if they are confused and help them grow in their career.</p>
           <div className="author-links">
             <a href={`https://twitter.com/${siteConfig.twitter}`} target="_blank">@kamranahmedse</a>

components/about-header/style.js

@@ -11,7 +11,7 @@ export const AboutHeaderWrap = styled.div`
     flex-direction: row;
   }
   
-  h2 {
+  h1 {
     font-weight: 700;
   }
   

components/helmet/index.js

@@ -2,8 +2,7 @@ import NextHead from 'next/head';
 import siteConfig from 'content/site';
 
 const prepareTitle = (givenTitle) => {
-  givenTitle = givenTitle || siteConfig.title;
+  return givenTitle || siteConfig.title;
-  return `${givenTitle} - ${siteConfig.name}`;
 };
 
 const prepareDescription = (givenDescription) => {

content/pages/about.md

@@ -1,22 +1,22 @@
-#### What is roadmap.sh?
+## What is roadmap.sh?
 Roadmap.sh is the place containing community curated roadmaps, study plans, paths and resources for the budding developers. It started as a [set of charts to guide the developers](https://github.com/kamranahmedse/developer-roadmap) who are confused about what should they learn next but that alone wasn't enough so I expanded it into the website to get more contributors involved.
 
-#### What are the plans for roadmap.sh?
+## What are the plans for roadmap.sh?
 The website started off as a [simple repository containing a few charts](https://github.com/kamranahmedse/developer-roadmap) for developers and based on my personal opinions but it could have been much more than that so I decided to expand it to a website where people can contribute to study plans with their areas of expertise as well, add more roadmaps, write guides etc. 
 
 We haven't opened up the sign ups for now but we will be doing. My long term plans for this website are to turn it into a goto place for the developers to seek guidance about their careers, help others, share their journeys, incentivize the learnings, get feedbacks on their projects etc.
 
-#### How did you build roadmap.sh?
+## How did you build roadmap.sh?
 The basic version of the website has been built with [Next.js](https://github.com/zeit/next.js/), is opensource and can be found on [github](https://github.com/kamranahmedse/roadmap.sh). It was hastily done to get it out in front of the people and get people to start contributing so it might be rough on the edges, but that is where we need your help.
 
-#### How does it make money?
+## How does it make money?
 It doesn't make any money. I have been using my personal time and budget to build it. I did not create this website with any intentions of monetization but as a good will, to help the people get out of the frustration that I was once in. 
 
 Having said that, I love teaching and my future plans are to be able to work full-time on roadmap.sh for which it has to make enough money to pay for my rent, groceries, bills, travel expenses, etc but even if it doesn't it's likely I'll continue growing the site however I can. My focus at the moment is not making money from it and just add content that creates value for the people.
 
 > Sponsor the efforts by [paying as little as 3$ per month](http://gum.co/roadmap-sh) or with [one time payment via paypal](https://paypal.me/kamranahmedse). Alternatively, reach out to me at [kamran@roadmap.sh](mailto:kamran@roadmap.sh).
 
-#### Can I contribute?
+## Can I contribute?
 You definitely can, infact you are encouraged to do that. Even your minor contributions such as typo fixes count. The source code of the website can be [found on Github](https://github.com/kamranahmedse/roadmap.sh). Your contributions can be: 
 
 * Adding a new roadmap
@@ -31,9 +31,9 @@ You definitely can, infact you are encouraged to do that. Even your minor contri
 
 Just make sure to [follow the contribution guidelines](https://github.com/kamranahmedse/roadmap.sh/tree/master/contributing) when you decide to contribute. 
 
-#### Can I redistribute the content?
+## Can I redistribute the content?
 No, the license of the content on this website does not allow you to redistribute any of the content on this website anywhere. You can use it for personal use or share the link to the content if you have to but redistribution is not allowed.
 
-#### What is the best way to contact you?
+## What is the best way to contact you?
 Tweet or send me a message [@kamranahmedse](https://twitter.com/kamranahmedse) or email me at [kamran@roadmap.sh](kamran@roadmap.sh). I get lots of messages so apologies in advance if you don't hear back from me soon but I do reply to everyone.
 

content/roadmaps.json

@@ -1,7 +1,7 @@
 [
   {
     "seo": {
-      "title": "Frontend Roadmap: Learn to become a modern frontend developer",
+      "title": "Learn to become a modern frontend developer",
       "description": "Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development. Learn to become a modern frontend developer by following the steps, skills, resources and guides listed in this roadmap.",
       "keywords": [
         "guide to becoming a developer",
@@ -114,7 +114,7 @@
   },
   {
     "seo": {
-      "title": "Backend Roadmap: Learn to become a modern backend developer",
+      "title": "Learn to become a modern backend developer",
       "description": "Community driven, articles, resources, guides, interview questions, quizzes for modern backend development. Learn to become a modern backend developer by following the steps, skills, resources and guides listed in this roadmap.",
       "keywords": [
         "guide to becoming a developer",
@@ -186,7 +186,7 @@
   },
   {
     "seo": {
-      "title": "DevOps Roadmap: Learn to become an SRE or for any other operations role",
+      "title": "DevOps Roadmap: Learn to become a DevOps Engineer or SRE",
       "description": "Community driven, articles, resources, guides, interview questions, quizzes for DevOps. Learn to become a modern DevOps engineer by following the steps, skills, resources and guides listed in this roadmap.",
       "keywords": [
         "guide to becoming a devops enginer",
@@ -252,7 +252,7 @@
   },
   {
     "seo": {
-      "title": "Fullstack Roadmap: Learn to become a modern fullstack developer",
+      "title": "Fullstack Roadmap: Learn to become a fullstack developer",
       "description": "Community driven, articles, resources, guides, interview questions, quizzes for modern fullstack development. Learn to become a modern fullstack developer by following the steps, skills, resources and guides listed in this roadmap.",
       "keywords": [
         "guide to becoming a developer",
@@ -302,7 +302,7 @@
   },
   {
     "seo": {
-      "title": "QA Engineer Roadmap: Learn to become a modern QA engineer",
+      "title": "QA Roadmap: Learn to become a modern QA engineer",
       "description": "Community driven, articles, resources, guides, interview questions, quizzes for modern QA development. Learn to become a modern QA engineer by following the steps, skills, resources and guides listed in this roadmap.",
       "keywords": [
         "guide to becoming a QA engineer",

content/roadmaps/1-frontend/0-About/1-Summary.md

@@ -1,4 +1,4 @@
-#### What is a Frontend Developer?
+## What is a Frontend Developer?
 A frontend developer is someone who works on the side of the websites that the user interacts with i.e. front or the client side of the website. Whenever you visit a website, everything that you see is mainly developed by the frontend developers. 
 
 They work with designers or UX teams to convert their mockups or wireframes to the actual website that the users can interact with. Also they work with [backend developers](/backend) who work with database and servers to get the data from and to display on the website. Wikipedia describes frontend development as follows
@@ -7,7 +7,7 @@ They work with designers or UX teams to convert their mockups or wireframes to t
 >
 > Front-end web development is the practice of converting data to a graphical interface, through the use of HTML, CSS, and JavaScript, so that users can view and interact with that data.
 
-#### Key Components of a Website
+## Key Components of a Website
 If we talk about the frontend, all the websites are mainly built with three key technologies – **HTML**, **CSS** and **JavaScript**. If you know just these three, you can start building websites and be employable. 
 
 Before we proceed, let me give you a brief overview of how **HTML**, **CSS** and **JavaScript** are used on the website. **HTML** provides the structure to a website i.e. all the text, headings, paragraphs, images etc that you see on the website, they have been created with HTML. HTML provides you just the structure, you need to put another layer on top of it to make the website pretty - this next layer is CSS. **CSS** helps make your websites pretty - the colors, backgrounds, font size, borders, shadows etc are controlled using CSS. And finally, the third layer is **JavaScript** which helps make the website interactive e.g. controlling the actions like showing a popup, switching slider images upon click etc is all controlled by JavaScript. 

content/roadmaps/1-frontend/0-About/2-Basic-Skills.md

@@ -1,4 +1,4 @@
-#### Soft Skills
+## Soft Skills
 Before we jump on to the technical skills there are few non-technical or soft skills that every employer is going to demand, so make sure to work on that side of the things as well when you are preparing yourself technically
 
 * **Communication skills** — Talking to your colleagues, writing emails, use of language
@@ -8,7 +8,7 @@ Before we jump on to the technical skills there are few non-technical or soft sk
 * **Work Ethics and Integrity** — Being able to follow through on your duties in timely and quality manner.
 * **Be Curious** — Your curiosity is going to help you a great deal in evolving yourself. Don't just take things as they are, look at the reasoning behind the things. Look at the things that others are building, learn from them. Look at what community is most excited about these days.
 
-#### Technical Skills
+## Technical Skills
 In order to be a frontend developer, all you need is to learn HTML, CSS and JavaScript. Just learn these and you should be employable. I know a lot of developers who just know these and are working as frontend developers and are making decent money
 * HTML
 * CSS

content/roadmaps/1-frontend/0-About/3-Job-Titles.md

@@ -1,4 +1,4 @@
-#### Common Job Titles
+## Common Job Titles
 If you know frontend development, there are jobs with different titles that you can apply to. Here is the list of different job titles with almost same responsibilities
 
 * Frontend Developer / Engineer

content/roadmaps/1-frontend/2-Learn/1-Job-Ready.md

@@ -1,7 +1,7 @@
-#### Technical Skills
+## Technical Skills
 The sections below describe different steps required to become a frontend developer
 
-#### Learning How Things Work
+## Learning How Things Work
 As a web developer, frontend, backend or fullstack, you should have a good understanding of how the internet works 
 
 ![](/roadmaps/frontend/beginner-1.png)
@@ -14,5 +14,5 @@ Learn the below listed in the order given below
 * What's in a domain name? What is an IP Address?
 * What is Web Hosting?
 
-#### Writing Some Code
+## Writing Some Code
 Now that you understand how things work, next step is getting your hands dirty and start actual coding

content/roadmaps/1-frontend/meta.json

@@ -1,6 +1,6 @@
 {
   "seo": {
-    "title": "Frontend Roadmap: Learn to become a modern frontend developer",
+    "title": "Learn to become a modern frontend developer",
     "description": "Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development. Learn to become a modern frontend developer by following the steps, skills, resources and guides listed in this roadmap.",
     "keywords": [
       "guide to becoming a developer",

content/roadmaps/2-backend/meta.json

@@ -1,6 +1,6 @@
 {
   "seo": {
-    "title": "Backend Roadmap: Learn to become a modern backend developer",
+    "title": "Learn to become a modern backend developer",
     "description": "Community driven, articles, resources, guides, interview questions, quizzes for modern backend development. Learn to become a modern backend developer by following the steps, skills, resources and guides listed in this roadmap.",
     "keywords": [
       "guide to becoming a developer",

content/roadmaps/3-devops/meta.json

@@ -1,6 +1,6 @@
 {
   "seo": {
-    "title": "DevOps Roadmap: Learn to become an SRE or for any other operations role",
+    "title": "DevOps Roadmap: Learn to become a DevOps Engineer or SRE",
     "description": "Community driven, articles, resources, guides, interview questions, quizzes for DevOps. Learn to become a modern DevOps engineer by following the steps, skills, resources and guides listed in this roadmap.",
     "keywords": [
       "guide to becoming a devops enginer",

content/roadmaps/4-fullstack/meta.json

@@ -1,6 +1,6 @@
 {
   "seo": {
-    "title": "Fullstack Roadmap: Learn to become a modern fullstack developer",
+    "title": "Fullstack Roadmap: Learn to become a fullstack developer",
     "description": "Community driven, articles, resources, guides, interview questions, quizzes for modern fullstack development. Learn to become a modern fullstack developer by following the steps, skills, resources and guides listed in this roadmap.",
     "keywords": [
       "guide to becoming a developer",

content/roadmaps/5-qa/meta.json

@@ -1,6 +1,6 @@
 {
   "seo": {
-    "title": "QA Engineer Roadmap: Learn to become a modern QA engineer",
+    "title": "QA Roadmap: Learn to become a modern QA engineer",
     "description": "Community driven, articles, resources, guides, interview questions, quizzes for modern QA development. Learn to become a modern QA engineer by following the steps, skills, resources and guides listed in this roadmap.",
     "keywords": [
       "guide to becoming a QA engineer",

pages/privacy.js

@@ -6,12 +6,12 @@ import Helmet from 'components/helmet';
 
 const Privacy = () => (
   <DefaultLayout>
-    <Helmet />
+    <Helmet  title={'Privacy Policy - roadmap.sh'} />
     <TosPage>
-      <SiteNav title={'Privacy Policy - roadmap.sh'} />
+      <SiteNav />
       <div className="bg-light border-top privacy-wrap">
         <div className="container pt-5 pb-5">
-          <h2 className='font-weight-bold mb-3'>Privacy Policy</h2>
+          <h1 className='font-weight-bold mb-3'>Privacy Policy</h1>
           <p>By using or accessing the Services in any manner, you acknowledge that you accept the practices and policies outlined in this Privacy Policy, and you hereby consent that we will collect, use, and share your information in the following ways. Remember that your use of roadmap.sh’s Services is at all times subject to the <a
             href="/terms">Terms of Use</a>, which incorporates this Privacy Policy. Any terms we use in this Policy without defining them have the definitions given to them in the Terms of Use.</p>
 

pages/terms.js

@@ -11,7 +11,7 @@ const Terms = () => (
       <SiteNav />
       <div className="bg-light border-top tos-wrap">
         <div className="container pt-5 pb-5">
-          <h2>Terms of Service</h2>
+          <h1>Terms of Service</h1>
 
           <p className='text-uppercase'>Please note that your use of and access to our services (defined below) are subject to the following terms; if you do not agree to all of the following, you may not use or access the services in any manner.</p>