add SEO component

This commit is contained in:
Dawid Wysokiński 2021-03-27 10:44:27 +01:00
parent a9b620073d
commit a644540356
6 changed files with 57 additions and 1 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
public/images/meta/zdam.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

48
src/common/SEO/SEO.tsx Normal file
View File

@ -0,0 +1,48 @@
import React from 'react';
import { useRouter } from 'next/router';
import { URL } from 'config/app';
import Head from 'next/head';
const NAME = 'zdamegzaminzawodowy.pl';
const DEFAULT_DESCRIPTION =
'zdamegzaminzawodowy.pl to ogromny baza pytań z różnych egzaminów zawodowych. Pytania pochodzą z arkuszy z lat ubiegłych.';
export interface SEOProps {
title?: string;
description?: string;
}
const SEO = ({ title, description = DEFAULT_DESCRIPTION }: SEOProps) => {
const { asPath } = useRouter();
const formattedTitle = title ? `${title} | ${NAME}` : NAME;
return (
<Head>
<title>{formattedTitle}</title>
<link rel="canonical" href={URL + asPath} />
<link rel="icon" href={URL + '/favicon.ico'} />
<meta name="description" content={description} />
<meta
name="apple-touch-icon"
content={`${URL}/images/logo-192x192.png`}
/>
<meta property="og:site_name" content={NAME} />
<meta property="og:title" content={formattedTitle} />
<meta property="og:description" content={description} />
<meta property="og:url" content={URL + asPath} />
<meta property="og:type" content="website" />
<meta property="og:image" content={`${URL}/images/meta/zdam.png`} />
<meta property="og:image:width" content={'1280'} />
<meta property="og:image:height" content={'640'} />
<meta property="og:locale" content="pl" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={formattedTitle} />
<meta name="twitter:description" content={description} />
<meta name="twitter:url" content={URL + asPath} />
<meta name="twitter:image" content={`${URL}/images/meta/zdam.png`} />
<meta name="twitter:image:alt" content={NAME} />
</Head>
);
};
export default SEO;

View File

@ -7,3 +7,6 @@ export const QUESTIONS = [1, 40];
export const GOOGLE_PLAY_URL =
'https://play.google.com/store/apps/details?id=com.dawidwysokinski.zdamegzaminzawodowy';
export const URL =
process.env.NEXT_PUBLIC_URL ?? 'https://zdamegzaminzawodowy.pl';

View File

@ -9,6 +9,7 @@ import {
import { QUERY_PROFESSIONS } from './queries';
import { Divider } from '@material-ui/core';
import SEO from 'common/SEO/SEO';
import Layout from 'common/Layout/Layout';
import Header from './components/Header/Header';
import Timer from './components/Timer/Timer';
@ -30,6 +31,7 @@ const IndexPage = ({
}: IndexPageProps) => {
return (
<Layout padding={false}>
<SEO title="Strona główna" />
<Header qualifications={qualifications} />
<Timer dateOfTheExam={dateOfTheExam} />
<AboutExam />

View File

@ -13,7 +13,10 @@ const CheckMobileApp = () => {
Nie zapomnij sprawdzić naszej aplikacji mobilnej!
</Typography>
<Typography align="center">
<Link href={GOOGLE_PLAY_URL} title="Pobierz z Google Play">
<Link
href={GOOGLE_PLAY_URL}
title="Pobierz aplikację na Androida z Google Play"
>
<img
style={{ width: '200px' }}
src="/images/google-play-badge.svg"