From f2af1cd77ef42adcffd053f3e8bb070557ca6a2e Mon Sep 17 00:00:00 2001
From: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>
Date: Fri, 15 Jan 2021 17:39:59 +0300
Subject: [PATCH] fix: update SEO on landing page (#40670)

---
 .../components/landing/components/AsSeenIn.js  |  2 +-
 .../landing/components/Certifications.js       |  2 +-
 .../landing/components/LandingTop.js           | 10 +++++-----
 .../landing/components/Testimonials.js         |  4 ++--
 client/src/components/landing/index.js         |  2 +-
 client/src/components/landing/landing.css      | 18 +++++++++++-------
 client/src/components/layouts/Default.js       |  4 +---
 client/src/pages/learn.js                      |  2 +-
 cypress/integration/landing.js                 |  4 ++--
 cypress/integration/learn/index.js             |  2 +-
 10 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/client/src/components/landing/components/AsSeenIn.js b/client/src/components/landing/components/AsSeenIn.js
index 36db0e5e45..005e9bb6fa 100644
--- a/client/src/components/landing/components/AsSeenIn.js
+++ b/client/src/components/landing/components/AsSeenIn.js
@@ -7,7 +7,7 @@ const AsSeenIn = () => (
   <Row className='as-seen-in'>
     <Col sm={8} smOffset={2} xs={12}>
       <div className='text-center'>
-        <h1 className='big-heading'>As seen in:</h1>
+        <p className='big-heading'>As seen in:</p>
         <AsFeatureLogo fill='light' />
       </div>
     </Col>
diff --git a/client/src/components/landing/components/Certifications.js b/client/src/components/landing/components/Certifications.js
index eaf154af30..7c20df45dc 100644
--- a/client/src/components/landing/components/Certifications.js
+++ b/client/src/components/landing/components/Certifications.js
@@ -19,7 +19,7 @@ const Certifications = ({ nodes, page }) => {
   return (
     <Row className='certification-section'>
       <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
-        <h1 className='big-heading'>Earn free verified certifications in:</h1>
+        <p className='big-heading'>Earn free verified certifications in:</p>
         <ul data-test-label='certifications'>
           {superBlocks.map((superBlock, i) => (
             <li key={i}>
diff --git a/client/src/components/landing/components/LandingTop.js b/client/src/components/landing/components/LandingTop.js
index f58dc2e0d6..476d716c9b 100644
--- a/client/src/components/landing/components/LandingTop.js
+++ b/client/src/components/landing/components/LandingTop.js
@@ -30,14 +30,14 @@ function landingTop({ page }) {
         <Spacer />
         <Col lg={8} lgOffset={2} sm={10} smOffset={1} xs={12}>
           <h1 className='big-heading' data-test-label={`${page}-header`}>
-            Learn to code at home.
+            Learn to code — for free.
           </h1>
-          <h1 className='big-heading '>Build projects.</h1>
-          <h1 className='big-heading'>Earn certifications.</h1>
-          <h2>
+          <p className='big-heading'>Build projects.</p>
+          <p className='big-heading'>Earn certifications.</p>
+          <p>
             Since 2014, more than 40,000 freeCodeCamp.org graduates have gotten
             jobs at tech companies including:
-          </h2>
+          </p>
           <div className='logo-row'>
             <AppleLogo />
             <GoogleLogo />
diff --git a/client/src/components/landing/components/Testimonials.js b/client/src/components/landing/components/Testimonials.js
index 9a99a66c55..ed9b466a04 100644
--- a/client/src/components/landing/components/Testimonials.js
+++ b/client/src/components/landing/components/Testimonials.js
@@ -13,9 +13,9 @@ const Testimonials = () => {
 
   return (
     <div className='testimonials'>
-      <h1 className='big-heading text-center'>
+      <p className='big-heading text-center'>
         Here is what our alumni say about freeCodeCamp:
-      </h1>
+      </p>
       <div className='testimonials-row' data-test-label='testimonial-cards'>
         {campers.map((camper, i) => {
           let {
diff --git a/client/src/components/landing/index.js b/client/src/components/landing/index.js
index 167909e28e..21377535a0 100644
--- a/client/src/components/landing/index.js
+++ b/client/src/components/landing/index.js
@@ -31,7 +31,7 @@ export const Landing = ({ page = 'landing' }) => {
   return (
     <Fragment>
       <Helmet>
-        <title>Learn to Code for Free – Coding Courses for Busy People</title>
+        <title>Learn to Code — For Free — Coding Courses for Busy People</title>
       </Helmet>
       <main className='landing-page'>
         <Grid>
diff --git a/client/src/components/landing/landing.css b/client/src/components/landing/landing.css
index 10b72c58bf..9fc74d4d8e 100644
--- a/client/src/components/landing/landing.css
+++ b/client/src/components/landing/landing.css
@@ -38,12 +38,15 @@ p.caption {
   color: var(--gray-15);
 }
 
-.as-seen-in h1 {
+.as-seen-in .big-heading {
   color: var(--gray-15);
 }
 
-.landing-page h1 {
+.landing-page .big-heading {
+  height: 100%;
   margin-bottom: 40px;
+  line-height: 1.1;
+  font-weight: 700;
 }
 
 .campers-images {
@@ -94,9 +97,10 @@ p.caption {
   }
 }
 
-.cta-landing-section h2 {
-  font-size: 1.3rem;
-  font-weight: 400;
+.landing-top p {
+  font-size: 1.2rem;
+  font-weight: bold;
+  margin: 0.6rem 0;
 }
 
 /* testimonials */
@@ -178,8 +182,8 @@ p.caption {
 }
 
 @media (min-width: 500px) {
-  .cta-landing-section h2 {
-    font-size: 1.5rem;
+  .landing-top p {
+    font-size: 1.25rem;
   }
 }
 
diff --git a/client/src/components/layouts/Default.js b/client/src/components/layouts/Default.js
index 8816f40317..97f281b2a1 100644
--- a/client/src/components/layouts/Default.js
+++ b/client/src/components/layouts/Default.js
@@ -173,9 +173,7 @@ class DefaultLayout extends Component {
           meta={[
             {
               name: 'description',
-              content: `Learn to code at home. Build projects. Earn certifications. Since 2014,
-                 more than 40,000 freeCodeCamp.org graduates have gotten jobs at tech
-                 companies including Google, Apple, Amazon, and Microsoft.`
+              content: `Learn to code — for free.`
             },
             { name: 'keywords', content: metaKeywords.join(', ') }
           ]}
diff --git a/client/src/pages/learn.js b/client/src/pages/learn.js
index ae0fd1f5a0..ce798ad2c1 100644
--- a/client/src/pages/learn.js
+++ b/client/src/pages/learn.js
@@ -77,7 +77,7 @@ export const LearnPage = ({
   const hashValue = hashValueSelector(state, hash);
   return (
     <LearnLayout>
-      <Helmet title='Learn to Code for Free – Coding Courses for Busy People' />
+      <Helmet title='Learn to Code — For Free — Coding Courses for Busy People' />
       <Grid>
         <Intro
           complete={complete}
diff --git a/cypress/integration/landing.js b/cypress/integration/landing.js
index f2826357b4..be24df061a 100644
--- a/cypress/integration/landing.js
+++ b/cypress/integration/landing.js
@@ -25,14 +25,14 @@ describe('Landing page', () => {
     cy.visit('/');
     cy.title().should(
       'eq',
-      'Learn to Code for Free – Coding Courses for Busy People'
+      'Learn to Code — For Free — Coding Courses for Busy People'
     );
     cy.contains(selectors.callToAction, "Get started (it's free)");
     cy.get(selectors.callToAction).should('have.length', 2);
   });
 
   it('Has visible header and sub-header', () => {
-    cy.contains(selectors.heading, 'Learn to code at home.');
+    cy.contains(selectors.heading, 'Learn to code — for free.');
     cy.contains('Build projects.').should('be.visible');
     cy.contains('Earn certifications.').should('be.visible');
 
diff --git a/cypress/integration/learn/index.js b/cypress/integration/learn/index.js
index 58c032371a..ad0bae6275 100644
--- a/cypress/integration/learn/index.js
+++ b/cypress/integration/learn/index.js
@@ -28,7 +28,7 @@ describe('Learn Landing page (not logged in)', () => {
 
     cy.title().should(
       'eq',
-      'Learn to Code for Free – Coding Courses for Busy People'
+      'Learn to Code — For Free — Coding Courses for Busy People'
     );
   });