Update headings for SEO (#70)

src/components/Hero/Hero.module.scss

@@ -71,19 +71,19 @@
   max-width: variables.$global-max-width-wide;
 }
 
-.hero-container > h2,
-.hero-container > h3 {
+.hero-container > h1,
+.hero-container > h2 {
   margin: 0;
   padding: 0;
   color: variables.$global-color-background;
 }
 
-.hero-plain > .hero-container > h2,
-.hero-plain > .hero-container > h3 {
+.hero-plain > .hero-container > h1,
+.hero-plain > .hero-container > h2 {
   color: variables.$global-color-body;
 }
 
-.hero-container > h2 {
+.hero-container > h1 {
   font-size: 28px;
   line-height: 28px;
 
@@ -94,7 +94,7 @@
   }
 }
 
-.hero-container > h3 {
+.hero-container > h2 {
   font-size: 60px;
   line-height: 72px;
 

src/components/Hero/Hero.tsx

@@ -19,8 +19,8 @@ const Hero = ({
 }: Props) => (
   <div className={`${styles.hero} ${!background && styles['hero-no-image']} ${plain && styles['hero-plain']}`}>
     <div className={`${styles['hero-container']} ${wide ? styles.wide : ''}`}>
-      <h2>{subtitle}</h2>
-      {title && <h3>{title}</h3>}
+      <h1>{subtitle}</h1>
+      {title && <h2>{title}</h2>}
     </div>
     {background && (
       <Image

src/components/SEO/SEO.spec.tsx

@@ -39,6 +39,7 @@ it('Renders SEO tags with optional props', async () => {
         title: 'Foo',
         path: '/hello/world',
       }}
+      type='article'
       images={[{
         url: 'foo.jpg',
         width: 100,

src/components/SEO/SEO.tsx

@@ -17,6 +17,7 @@ import {
 
 interface Props {
   page: SitemapItem,
+  type?: 'website' | 'article',
   images?: Array<{
     url: string,
     width?: number,
@@ -28,6 +29,7 @@ interface Props {
 
 const SEO = ({
   page,
+  type = 'website',
   images = DEFAULT_SEO_IMAGE,
   breadcrumbs,
 }: Props) => {
@@ -49,6 +51,7 @@ const SEO = ({
         canonical={pageCanonicalURL}
         themeColor="#000000"
         openGraph={{
+          type,
           url: pageCanonicalURL,
           title,
           description,

src/helpers/getNews.spec.ts

@@ -32,7 +32,7 @@ afterEach(() => {
   jest.clearAllMocks();
 });
 
-it('Queries new articlesit', async () => {
+it('Queries news articles', async () => {
   const result = await getNews({ limit: 12 });
 
   expect(contentfulDeliveryClient.getEntries).toHaveBeenCalledTimes(1);

src/helpers/getNews.ts

@@ -8,17 +8,17 @@ import { contentfulDeliveryClient } from './contentful';
 import { flattenImageAssetFields } from './flattenAssetFields';
 
 interface Options {
-  limit: number,
+  limit?: number,
 }
 
 /**
  * Queries and returns news articles entries from Contentful.
  * @param options Options.
- * @param options.limit Number of entries to query.
+ * @param [options.limit] Number of entries to query.
  * @returns News article entries.
  */
 const getNews = async ({
-  limit,
+  limit = 1000,
 }: Options): Promise<Array<NewsArticle>> => {
   const { items } = await contentfulDeliveryClient.getEntries<ContentTypeNews>({
     content_type: ContentTypes.NewsArticle,

src/layout/Footer.tsx

@@ -64,7 +64,7 @@ const Footer = () => (
                 <Link href="https://www.johnlewispartnership.co.uk/foundation0.html" rel="noopener noreferrer" target="_blank">
                   <Image
                     src="/images/footer/logo-jlp-foundation.svg"
-                    alt="John Lewis Partnership Foundation"
+                    alt="John Lewis Partnership Foundation logo"
                     width={144}
                     height={50}
                   />
@@ -74,7 +74,7 @@ const Footer = () => (
                 <Link href="https://www.bornfree.org.uk" rel="noopener noreferrer" target="_blank">
                   <Image
                     src="/images/footer/logo-born-free.svg"
-                    alt="Born Free UK"
+                    alt="Born Free UK logo"
                     width={142}
                     height={50}
                   />
@@ -84,7 +84,7 @@ const Footer = () => (
                 <Link href="https://www.landrover.com/explore-land-rover/responsibility/born-free-foundation.html" rel="noopener noreferrer" target="_blank">
                   <Image
                     src="/images/footer/logo-land-rover.svg"
-                    alt="Land Rover"
+                    alt="Land Rover logo"
                     width={95}
                     height={50}
                   />

src/layout/Header.tsx

@@ -166,19 +166,17 @@ const Header = () => {
         <Link href={sitemap.stranded.path} className="stranding">Report A <br /> Stranding</Link>
       </div>
 
-      <h1>
-        <Link href={sitemap.home.path}>
-          <Image
-            src="/images/header/logo-header.png"
-            width={200}
-            height={200}
-            title="CRRU"
-            alt="CRRU"
-            priority
-            quality={100}
-          />
-        </Link>
-      </h1>
+      <Link href={sitemap.home.path} className="logo">
+        <Image
+          src="/images/header/logo-header.png"
+          width={200}
+          height={200}
+          title="CRRU"
+          alt="CRRU logo"
+          priority
+          quality={100}
+        />
+      </Link>
 
       <nav>
         <ul className="menu">

src/pages/404.tsx

@@ -9,7 +9,7 @@ const Page: NextPage = () => (
     </Head>
 
     <article className="content">
-      <h3>Not Found</h3>
+      <h2>Not Found</h2>
       <p>The requested resource cannot be found (404).</p>
     </article>
   </>

src/pages/500.tsx

@@ -9,7 +9,7 @@ const Page: NextPage = () => (
     </Head>
 
     <article className="content">
-      <h3>Error</h3>
+      <h2>Error</h2>
       <p>Internal Server Error (500).</p>
     </article>
   </>

src/pages/index.module.scss

@@ -39,7 +39,7 @@
     padding: 0 variables.$global-padding-small;
   }
 
-  h2 {
+  h1 {
     margin-bottom: variables.$global-spacing-large;
     font-family: variables.$global-font-primary;
     font-size: 48px;
@@ -359,7 +359,7 @@
   }
 }
 
-.news > h3 {
+.news > h2 {
   display: flex;
   margin-top: 0;
   align-items: center;

src/pages/index.tsx

@@ -122,7 +122,7 @@ const Page: NextPage<PageProps> = ({
 
       <section className={styles.banner}>
         <div className={styles['banner-text']}>
-          <h2>Dedicated to the understanding, conservation and protection of cetaceans in Scottish waters</h2>
+          <h1>Dedicated to the understanding, conservation and protection of cetaceans in Scottish waters</h1>
           <Link href={sitemap.about.path} className={styles['banner-cta']}>
             Learn more
             <svg fill="none" width="64" height="64" viewBox="0 0 64 64">
@@ -180,7 +180,7 @@ const Page: NextPage<PageProps> = ({
       </section>
 
       <section className={styles.news}>
-        <h3>Latest News</h3>
+        <h2>Latest News</h2>
 
         <div className={styles['news-container']}>
           {newsArticles.map((item) => (

src/pages/news/[slug].tsx

@@ -64,6 +64,7 @@ const Page: NextPage<PageProps> = ({
           description,
           path: pagePath,
         }}
+        type='article'
         images={[{
           url: image.url,
           width: image.width,

src/pages/news/index.tsx

@@ -56,7 +56,7 @@ const Page: NextPage<PageProps> = ({
 );
 
 export const getServerSideProps: GetServerSideProps<PageProps> = async () => {
-  const data = await getNews({ limit: 12 });
+  const data = await getNews({ limit: 1000 });
 
   return {
     props: {

src/pages/research/catalogues/bottlenose-dolphin/[slug].tsx

@@ -188,7 +188,7 @@ const Page: NextPage<PageProps> = ({
                           src={item.url}
                           width={item.width}
                           height={item.height}
-                          alt=""
+                          alt={`General photo of ${name}`}
                           className={styles.image}
                         />
                       </li>

src/pages/sitemap.xml.tsx

@@ -37,7 +37,7 @@ export const getServerSideProps: GetServerSideProps = async ({ res }) => {
   const additionalPages = [];
 
   if (species) {
-    additionalPages.push(...species.map(({ slug }) => `/species/${slug}`));
+    additionalPages.push(...species.map(({ slug }) => `/education/species/${slug}`));
   }
 
   if (news) {

src/scss/layout/header.scss

@@ -42,25 +42,18 @@ header {
 
 // Logo
 
-header > h1 {
+header > .logo {
   @extend %flex-center;
 
   z-index: 10;
   position: relative;
   margin-left: -10px;
+  padding: 10px;
   height: 100%;
 
   @include variables.breakpoint('small') {
     margin: 0 auto;
-  }
-
-  a {
-    padding: 10px;
-    height: 100%;
-
-    @include variables.breakpoint('small') {
-      padding: 5px;
-    }
+    padding: 5px;
   }
 
   img {