fix: use proper headline tags for seo

tilmx · Dec 8, 2023 · a1b4bb9 · a1b4bb9
1 parent 82d1ccf
commit a1b4bb9
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 8 deletions.
diff --git a/components/hotel-card.tsx b/components/hotel-card.tsx
@@ -201,7 +201,7 @@ export const HotelCard: FunctionComponent<HotelCardProps> = props => {
         <StyledCard small={props.small} href={getHotelUrl({ id: props.hotel.id, housingType: props.hotel.housingType })} color={getVacationTypeColor(props.hotel.vacationType)} className={props.className}>
             <StyledHeader>
                 <StyledContent image={typeof props.hotel.image !== 'undefined'}>
-                    <StyledTitle size={props.small ? TextSize.Large : TextSize.SuperLarge} bold >
+                    <StyledTitle as="h3" size={props.small ? TextSize.Large : TextSize.SuperLarge} bold >
                         {props.hotel.name}
                         {props.onStarClick &&
                             <StyledStarArea

diff --git a/components/pages/hotel-detail.tsx b/components/pages/hotel-detail.tsx
@@ -350,7 +350,7 @@ export const HotelDetailPage: FunctionComponent<HotelDetailProps> = props => {
                     <Menu />
                     <StyledIntro>
                         <StyledIntroTitle>
-                            <Text size={TextSize.Huge} bold center>{props.hotel.name}</Text>
+                            <Text as="h1" size={TextSize.Huge} bold center>{props.hotel.name}</Text>
                             <Text size={TextSize.SuperLarge} center serif>{props.hotel.city}, {props.hotel.country}</Text>
                         </StyledIntroTitle>
                         <Flex justifyContent={JustifyContent.Center} gap={Size.XXS}>
@@ -392,7 +392,7 @@ export const HotelDetailPage: FunctionComponent<HotelDetailProps> = props => {
                     </StyledImageContainer>
                     {props.hotel.description &&
                         <StyledDescriptionContainer>
-                            <StyledDescriptionLabel center>About the {props.hotel.housingType.toLowerCase()}</StyledDescriptionLabel>
+                            <StyledDescriptionLabel as="h3" center>About the {props.hotel.housingType.toLowerCase()}</StyledDescriptionLabel>
                             <Text serif center size={TextSize.ExtraLarge}>
                                 {props.hotel.description}
                             </Text>

diff --git a/components/similar-hotels.tsx b/components/similar-hotels.tsx
@@ -41,7 +41,7 @@ export const SimilarHotels: FunctionComponent<{ hotels: NearbyHotelPreview[]; ac
     return (
         <StyledSimilarHotelSection>
             <StyledSimilarIntro>
-                <Text size={TextSize.SuperLarge} bold>You may <AccentedText color={props.accentColor || Color.Text} accentStyle={AccentStyle.Underlined}>also like</AccentedText></Text>
+                <Text size={TextSize.SuperLarge} as="h2" bold>You may <AccentedText color={props.accentColor || Color.Text} accentStyle={AccentStyle.Underlined}>also like</AccentedText></Text>
                 <Text color={Color.Text60} size={TextSize.Large} serif>{(props.hotels.length || 'No').toString()} nearby hotel{plural ? 's' : undefined} & apartment{plural ? 's' : undefined}</Text>
             </StyledSimilarIntro>
             <StyledHotelListWrapper>

diff --git a/components/text.tsx b/components/text.tsx
@@ -2,6 +2,7 @@ import styled from '@emotion/styled';
 import { Breakpoint } from './tokens/breakpoint';
 import { DM_Sans, EB_Garamond } from "next/font/google"
 import { CSSProperties, FunctionComponent, MouseEventHandler, ReactNode } from 'react';
+import isPropValid from '@emotion/is-prop-valid'
 
 interface TextProps {
     size?: TextSize;
@@ -13,6 +14,7 @@ interface TextProps {
     bold?: boolean;
     className?: string;
     onClick?: MouseEventHandler;
+    as?: React.ElementType;
 }
 
 export enum TextSize {
@@ -28,7 +30,7 @@ export enum TextSize {
 const FontSerif = EB_Garamond({ weight: '400', style: ['normal', 'italic'], subsets: ['latin'] })
 const FontSans = DM_Sans({ weight: ['600', '400'], subsets: ['latin'] })
 
-const StyledText = styled.div<TextProps>`
+const StyledText = styled('div', { shouldForwardProp: prop => isPropValid(prop) && prop !== 'size' }) <TextProps>`
     ${props => props.serif ? FontSerif.style : FontSans.style}
     line-height: 1.4;
     ${props => props.center && 'text-align: center;'}
@@ -118,7 +120,7 @@ const StyledText = styled.div<TextProps>`
 
 export const Text: FunctionComponent<TextProps> = props => {
     return (
-        <StyledText size={props.size || TextSize.Regular} color={props.color} center={props.center} style={props.style} serif={props.serif} bold={props.bold} className={props.className} onClick={props.onClick}>
+        <StyledText as={props.as} size={props.size || TextSize.Regular} color={props.color} center={props.center} style={props.style} serif={props.serif} bold={props.bold} className={props.className} onClick={props.onClick}>
             {props.children}
         </StyledText>
     );

diff --git a/pages/legal/privacy-policy.tsx b/pages/legal/privacy-policy.tsx
@@ -30,7 +30,7 @@ export default function PrivacyPolicy() {
                 <Menu />
             </Wrapper>
             <StyledWrapper>
-                <Text size={TextSize.ExtraLarge} serif>
+                <Text size={TextSize.ExtraLarge} serif as="h1">
                     Data Protection Declaration
                 </Text>
                 <TableText title="General Information">

diff --git a/pages/legal/sites-notice.tsx b/pages/legal/sites-notice.tsx
@@ -37,7 +37,7 @@ export default function SitesNotice() {
             <Header>
                 <StyledWrapper>
                     <StyledIntro>
-                        <Text size={TextSize.ExtraLarge} serif>
+                        <Text as="h1" size={TextSize.ExtraLarge} serif>
                             Site’s notice
                         </Text>
                     </StyledIntro>