fix: update SEO on landing page (#40670)

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>

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}>

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 />

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 {

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>

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;
   }
 }
 

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(', ') }
           ]}

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}

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');
 

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'
     );
   });