SEO: Fix main element

zbycz · Jan 7, 2025 · 3447987 · 3447987
1 parent 6138132
commit 3447987
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 7 deletions.
diff --git a/public/images/homepage/velka-2.jpg b/public/images/homepage/velka-2.jpg
diff --git a/public/images/homepage/velka.jpg b/public/images/homepage/velka.jpg
diff --git a/src/components/HomepagePanel/HomepageOpenClimbingGallery.tsx b/src/components/HomepagePanel/HomepageOpenClimbingGallery.tsx
@@ -4,6 +4,7 @@ import { Scrollbars } from 'react-custom-scrollbars';
 import Link from 'next/link';
 import { intl, t } from '../../services/intl';
 import React from 'react';
+import { Typography } from '@mui/material';
 
 const HOMEPAGE_GALLERY_HEIGHT = 200;
 
@@ -13,6 +14,11 @@ const data = [
     src: '/images/homepage/hlubocepske-plotny',
     children: 'Hlubočepské plotny',
   },
+  {
+    href: '/relation/14297763',
+    src: '/images/homepage/velka',
+    children: 'Velká (Vltavská žula)',
+  },
   {
     href: '/relation/17696060',
     src: '/images/homepage/frankenjura',
@@ -60,6 +66,11 @@ const data = [
   },
 ];
 
+export const DiscoveryMoreText = styled.div`
+  text-transform: lowercase;
+  font-weight: normal;
+  margin-bottom: 8px;
+`;
 export const GalleryWrapper = styled.div`
   width: calc(100% + 32px * 2);
   height: calc(${HOMEPAGE_GALLERY_HEIGHT}px + 10px); // 10px for scrollbar
@@ -99,7 +110,7 @@ const Text = styled.div<{ center: boolean }>`
   font-size: 12px;
   text-transform: uppercase;
   letter-spacing: 2px;
-  ${({ center }) => center === true && `top: 35%`};
+  ${({ center }) => center === true && `top: 40%`};
 `;
 
 const StyledScrollbars = styled(Scrollbars)`
@@ -133,6 +144,7 @@ type GalleryItemProps = {
   blur?: boolean;
   center?: boolean;
   alt?: string;
+  title?: string;
 };
 
 const GalleryItem = ({
@@ -143,6 +155,7 @@ const GalleryItem = ({
   blur,
   center,
   alt,
+  title,
 }: GalleryItemProps) => (
   <GalleryItemContainer>
     <Link href={href} locale={intl.lang}>
@@ -152,6 +165,7 @@ const GalleryItem = ({
           srcSet={srcSet}
           height={HOMEPAGE_GALLERY_HEIGHT}
           alt={alt}
+          title={title}
         />
         <Gradient blur={blur}>
           <Text center={center}>{children}</Text>
@@ -171,7 +185,8 @@ export const HomepageOpenClimbingGallery = () => (
           src={`${item.src}.jpg`}
           srcSet={`${item.src}.jpg,
           ${item.src}-2.jpg 2x`}
-          alt={item.children}
+          alt={`${t('homepage.openclimbing_climbing_area')} ${item.children}`}
+          title={`${t('homepage.openclimbing_climbing_area')} ${item.children}`}
         >
           {item.children}
         </GalleryItem>
@@ -183,9 +198,8 @@ export const HomepageOpenClimbingGallery = () => (
         href="/climbing-areas"
         src="/images/homepage/solvayovy-lomy.jpg"
       >
-        {t('homepage.discover_more_p1')}
-        <br />
-        <h2>370+ {t('homepage.discover_more_p2')}</h2>
+        <DiscoveryMoreText>{t('homepage.discover_more_p1')}</DiscoveryMoreText>
+        370+ {t('homepage.discover_more_p2')}
       </GalleryItem>
     </StyledScrollbars>
   </GalleryWrapper>

diff --git a/src/components/utils/Drawer.tsx b/src/components/utils/Drawer.tsx
@@ -35,7 +35,7 @@ const Container = styled.div<SettingsProps>`
   overflow: hidden;
 `;
 
-const Content = styled.div`
+const Content = styled.main`
   height: 100%;
   overflow: auto;
 `;

diff --git a/src/components/utils/PanelHelpers.tsx b/src/components/utils/PanelHelpers.tsx
@@ -9,7 +9,7 @@ import { SEARCH_BOX_HEIGHT } from '../SearchBox/consts';
 // custom scrollbar
 // better: https://github.com/rommguy/react-custom-scroll
 // maybe https://github.com/malte-wessel/react-custom-scrollbars (larger)
-const Columns = styled.div`
+const Columns = styled.main`
   display: flex;
   flex-direction: column;
   height: calc(100% - ${SEARCH_BOX_HEIGHT}px);

diff --git a/src/locales/cs.js b/src/locales/cs.js
@@ -75,6 +75,7 @@ export default {
   'homepage.our_story': `Náš příběh`,
   'homepage.openclimbing_description_p1': `Aplikace pro mapování skalních oblastí a vytváření interaktivních lezeckých průvodců.`,
   'homepage.openclimbing_description_p2': `Všechna data jsou otevřená a každý je může upravit – podobně jako na Wikipedii.`,
+  'homepage.openclimbing_climbing_area': `Climbing area`,
   'homepage.description_show_more': `zobrazit více`,
   'homepage.expanded_description_p1': `Aplikace je vyvíjena jako open-source, využívá`,
   'homepage.expanded_description_p2': `pro ukládání lezeckých cest a obrázky jsou sdíleny prostřednictvím`,

diff --git a/src/locales/vocabulary.js b/src/locales/vocabulary.js
@@ -109,6 +109,7 @@ export default {
   'homepage.our_story': `Our story`,
   'homepage.openclimbing_description_p1': `Application for mapping climbing areas and creating interactive climbing guides.`,
   'homepage.openclimbing_description_p2': `All data is open and anyone can edit it – similar to Wikipedia.`,
+  'homepage.openclimbing_climbing_area': `Climbing area`,
   'homepage.description_show_more': `show more`,
   'homepage.expanded_description_p1': `Application is developed as open-source, it uses`,
   'homepage.expanded_description_p2': `for storing climbing routes and images are shared via`,