Add HTML document title

package-lock.json

@@ -12,6 +12,7 @@
         "@types/react": "18.0.24",
         "@types/react-dom": "18.0.8",
         "next": "13.0.1",
+        "next-seo": "^5.14.1",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "sass": "^1.55.0",
@@ -498,6 +499,16 @@
         }
       }
     },
+    "node_modules/next-seo": {
+      "version": "5.14.1",
+      "resolved": "https://registry.npmjs.org/next-seo/-/next-seo-5.14.1.tgz",
+      "integrity": "sha512-NiJeQbxYP3z+EMp52q8k3Q+OfX2+Yv2WehERDj98r2wjXxL+woKpRBdsSVYolTD0Hm8IWs42SzaISE93RoQdOw==",
+      "peerDependencies": {
+        "next": "^8.1.1-canary.54 || >=9.0.0",
+        "react": ">=16.0.0",
+        "react-dom": ">=16.0.0"
+      }
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -944,6 +955,12 @@
         "use-sync-external-store": "1.2.0"
       }
     },
+    "next-seo": {
+      "version": "5.14.1",
+      "resolved": "https://registry.npmjs.org/next-seo/-/next-seo-5.14.1.tgz",
+      "integrity": "sha512-NiJeQbxYP3z+EMp52q8k3Q+OfX2+Yv2WehERDj98r2wjXxL+woKpRBdsSVYolTD0Hm8IWs42SzaISE93RoQdOw==",
+      "requires": {}
+    },
     "normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",

package.json

@@ -13,6 +13,7 @@
     "@types/react": "18.0.24",
     "@types/react-dom": "18.0.8",
     "next": "13.0.1",
+    "next-seo": "^5.14.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "sass": "^1.55.0",

pages/index.tsx

@@ -2,178 +2,185 @@ import styles from '../styles/Index.module.scss';
 import Image from 'next/image';
 import { OpenHours } from '../components/OpenHours';
 import { ScrollToTop } from '../components/ScrollToTop';
+import { NextSeo } from 'next-seo';
 
 export default function Index() {
   return (
-    <div className={styles.outerContainer}>
+    <>
-      <div className={styles.innerContainer}>
+      <NextSeo
-        <header className={styles.sectionContainer}>
+        title='Livonsaaren Osuuskauppa'
-          <span className={styles.address}>
+        description='Kyläkauppa, kahvila, ravintola ja baari Livonsaarella'
-            Velkuantie 988, 21180 Livonsaari
+      />
-          </span>
+      <div className={styles.outerContainer}>
-          <Image
+        <div className={styles.innerContainer}>
-            className={styles.mainLogo}
+          <header className={styles.sectionContainer}>
-            src='/big-logo.webp'
+            <span className={styles.address}>
-            alt='logo'
+              Velkuantie 988, 21180 Livonsaari
-            width={528}
+            </span>
-            height={237}
+            <Image
-            loading='lazy'
+              className={styles.mainLogo}
-          />
+              src='/big-logo.webp'
-          <h1 className={styles.title + ' ' + styles.underLogo}>
+              alt='logo'
-            Kauppa&Ravintola&Kahvila&Baari
+              width={528}
-          </h1>
+              height={237}
-        </header>
+              loading='lazy'
+            />
+            <h1 className={styles.title + ' ' + styles.underLogo}>
+              Kauppa&Ravintola&Kahvila&Baari
+            </h1>
+          </header>
 
-        <section className={styles.sectionContainer}>
+          <section className={styles.sectionContainer}>
-          <OpenHours />
+            <OpenHours />
-          <Image
+            <Image
-            className={styles.keepersImage}
+              className={styles.keepersImage}
-            src='/elvira-iveta.png'
+              src='/elvira-iveta.png'
-            layout='responsive'
+              layout='responsive'
-            alt='kaupanpitäjät'
+              alt='kaupanpitäjät'
-            width={251}
+              width={251}
-            height={251}
+              height={251}
-            loading='lazy'
+              loading='lazy'
-          />
+            />
-          <span className={styles.emailAddress}>
+            <span className={styles.emailAddress}>
-            info@livonsaarenosuuskauppa.fi
+              info@livonsaarenosuuskauppa.fi
-          </span>
+            </span>
-          <span className={styles.phone}>+358 40 0460600</span>
+            <span className={styles.phone}>+358 40 0460600</span>
-          <div className={styles.socialMediaContainer}>
+            <div className={styles.socialMediaContainer}>
-            <a href='https://www.facebook.com/LivonsaarenOsuuskauppa/'>
+              <a href='https://www.facebook.com/LivonsaarenOsuuskauppa/'>
+                <Image
+                  className={styles.socialMediaIcon}
+                  src='/fb-icon.png'
+                  alt='facebook'
+                  width={100}
+                  height={100}
+                  loading='lazy'
+                />
+              </a>
+              <a href='https://www.instagram.com/livonsaaren_osuuskauppa/'>
+                <Image
+                  className={styles.socialMediaIcon}
+                  src='/insta-icon.png'
+                  alt='instagram'
+                  width={100}
+                  height={100}
+                  loading='lazy'
+                />
+              </a>
+            </div>
+          </section>
+
+          <span className={styles.separator} />
+
+          <section className={styles.sectionContainer}>
+            <h1 className={styles.title}>Postin automaattipalvelu</h1>
+            <p className={styles.postServiceDesc}>
+              Lähetä tai nouda paketti Postin pakettiautomaatista Livonsaaren
+              Osuuskaupasta
+            </p>
+            <span className={styles.postServiceInfo}>ma-la 12:00-19:00</span>
+            <span className={styles.postServiceInfo}>
+              Velkuantie 988, 21180 Livonsaari
+            </span>
+            <a href='https://www.smartpost.fi/' className={styles.link}>
+              Lisätietoja
+            </a>
+          </section>
+
+          <span className={styles.separator} />
+
+          <section className={styles.sectionContainer}>
+            <h1 className={styles.title}>Tervetuloa ravintolaan!</h1>
+            <Image
+              className={styles.menuImage}
+              src='/restaurant.webp'
+              alt='ravintola'
+              width={506}
+              height={89}
+              loading='lazy'
+            />
+            <h1 className={styles.title}>Alla kesäkauden tarjoilut</h1>
+            <div className={styles.menuContainer}>
+              <a href='/ravintola.pdf' className={styles.menuLink}>
+                <h1 className={styles.title}>Ruoat</h1>
+              </a>
+              <a href='/baari.pdf' className={styles.menuLink}>
+                <h1 className={styles.title}>Juomat</h1>
+              </a>
+            </div>
+          </section>
+
+          <span className={styles.separator} />
+
+          <section className={styles.sectionContainer}>
+            <h1 className={styles.title + ' ' + styles.instagramText}>
+              Seuraa meitä{' '}
+              <a
+                href='https://www.instagram.com/livonsaaren_osuuskauppa/'
+                className={styles.instagramLink}
+              >
+                @Instagramissa
+              </a>
+            </h1>
+            <div className={styles.instagramImagesContainer}>
               <Image
-                className={styles.socialMediaIcon}
+                className={styles.instagramImage}
-                src='/fb-icon.png'
+                src='/kauppa.png'
-                alt='facebook'
+                alt='kauppa ulkoa'
-                width={100}
+                width={650}
-                height={100}
+                height={650}
                 loading='lazy'
               />
-            </a>
-            <a href='https://www.instagram.com/livonsaaren_osuuskauppa/'>
               <Image
-                className={styles.socialMediaIcon}
+                className={styles.instagramImage}
-                src='/insta-icon.png'
+                src='/cafe.png'
-                alt='instagram'
+                alt='kahvi ja leivos'
-                width={100}
+                width={650}
-                height={100}
+                height={650}
                 loading='lazy'
               />
-            </a>
+              <Image
-          </div>
+                className={styles.instagramImage}
-        </section>
+                src='/bar.png'
+                alt='kaupan baari'
+                width={650}
+                height={650}
+                loading='lazy'
+              />
+            </div>
+          </section>
 
-        <span className={styles.separator} />
+          <span className={styles.separator} />
 
-        <section className={styles.sectionContainer}>
+          <section className={styles.sectionContainer}>
-          <h1 className={styles.title}>Postin automaattipalvelu</h1>
+            <h1 className={styles.title}>Teemme yhteistyötä</h1>
-          <p className={styles.postServiceDesc}>
-            Lähetä tai nouda paketti Postin pakettiautomaatista Livonsaaren
-            Osuuskaupasta
-          </p>
-          <span className={styles.postServiceInfo}>ma-la 12:00-19:00</span>
-          <span className={styles.postServiceInfo}>
-            Velkuantie 988, 21180 Livonsaari
-          </span>
-          <a href='https://www.smartpost.fi/' className={styles.link}>
-            Lisätietoja
-          </a>
-        </section>
-
-        <span className={styles.separator} />
-
-        <section className={styles.sectionContainer}>
-          <h1 className={styles.title}>Tervetuloa ravintolaan!</h1>
-          <Image
-            className={styles.menuImage}
-            src='/restaurant.webp'
-            alt='ravintola'
-            width={506}
-            height={89}
-            loading='lazy'
-          />
-          <h1 className={styles.title}>Alla kesäkauden tarjoilut</h1>
-          <div className={styles.menuContainer}>
-            <a href='/ravintola.pdf' className={styles.menuLink}>
-              <h1 className={styles.title}>Ruoat</h1>
-            </a>
-            <a href='/baari.pdf' className={styles.menuLink}>
-              <h1 className={styles.title}>Juomat</h1>
-            </a>
-          </div>
-        </section>
-
-        <span className={styles.separator} />
-
-        <section className={styles.sectionContainer}>
-          <h1 className={styles.title + ' ' + styles.instagramText}>
-            Seuraa meitä{' '}
-            <a
-              href='https://www.instagram.com/livonsaaren_osuuskauppa/'
-              className={styles.instagramLink}
-            >
-              @Instagramissa
-            </a>
-          </h1>
-          <div className={styles.instagramImagesContainer}>
             <Image
-              className={styles.instagramImage}
+              className={styles.collaborationImage}
-              src='/kauppa.png'
+              src='/collaboration.png'
-              alt='kauppa ulkoa'
+              alt='yhteystyö'
-              width={650}
+              width={496}
-              height={650}
+              height={326}
               loading='lazy'
             />
-            <Image
+          </section>
-              className={styles.instagramImage}
+
-              src='/cafe.png'
+          <span className={styles.separator} />
-              alt='kahvi ja leivos'
+
-              width={650}
+          <section className={styles.sectionContainer}>
-              height={650}
+            <OpenHours />
+            <iframe
+              className={styles.googleMaps}
+              src='https://maps.google.com/maps?q=Velkuantie%20988%2C%20Livonsaari%2C%20Finland&t=m&z=13&output=embed&iwloc=near'
+              allowFullScreen={false}
               loading='lazy'
-            />
+              referrerPolicy='no-referrer-when-downgrade'
-            <Image
+            ></iframe>
-              className={styles.instagramImage}
+          </section>
-              src='/bar.png'
-              alt='kaupan baari'
-              width={650}
-              height={650}
-              loading='lazy'
-            />
-          </div>
-        </section>
 
-        <span className={styles.separator} />
+          <span className={styles.separator} />
 
-        <section className={styles.sectionContainer}>
+          <ScrollToTop />
-          <h1 className={styles.title}>Teemme yhteistyötä</h1>
+        </div>
-          <Image
-            className={styles.collaborationImage}
-            src='/collaboration.png'
-            alt='yhteystyö'
-            width={496}
-            height={326}
-            loading='lazy'
-          />
-        </section>
-
-        <span className={styles.separator} />
-
-        <section className={styles.sectionContainer}>
-          <OpenHours />
-          <iframe
-            className={styles.googleMaps}
-            src='https://maps.google.com/maps?q=Velkuantie%20988%2C%20Livonsaari%2C%20Finland&t=m&z=13&output=embed&iwloc=near'
-            allowFullScreen={false}
-            loading='lazy'
-            referrerPolicy='no-referrer-when-downgrade'
-          ></iframe>
-        </section>
-
-        <span className={styles.separator} />
-
-        <ScrollToTop />
       </div>
-    </div>
+    </>
   );
 }