add SEO component
This commit is contained in:
parent
a9b620073d
commit
a644540356
Binary file not shown.
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
After Width: | Height: | Size: 22 KiB |
|
@ -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;
|
|
@ -7,3 +7,6 @@ export const QUESTIONS = [1, 40];
|
||||||
|
|
||||||
export const GOOGLE_PLAY_URL =
|
export const GOOGLE_PLAY_URL =
|
||||||
'https://play.google.com/store/apps/details?id=com.dawidwysokinski.zdamegzaminzawodowy';
|
'https://play.google.com/store/apps/details?id=com.dawidwysokinski.zdamegzaminzawodowy';
|
||||||
|
|
||||||
|
export const URL =
|
||||||
|
process.env.NEXT_PUBLIC_URL ?? 'https://zdamegzaminzawodowy.pl';
|
||||||
|
|
|
@ -9,6 +9,7 @@ import {
|
||||||
import { QUERY_PROFESSIONS } from './queries';
|
import { QUERY_PROFESSIONS } from './queries';
|
||||||
|
|
||||||
import { Divider } from '@material-ui/core';
|
import { Divider } from '@material-ui/core';
|
||||||
|
import SEO from 'common/SEO/SEO';
|
||||||
import Layout from 'common/Layout/Layout';
|
import Layout from 'common/Layout/Layout';
|
||||||
import Header from './components/Header/Header';
|
import Header from './components/Header/Header';
|
||||||
import Timer from './components/Timer/Timer';
|
import Timer from './components/Timer/Timer';
|
||||||
|
@ -30,6 +31,7 @@ const IndexPage = ({
|
||||||
}: IndexPageProps) => {
|
}: IndexPageProps) => {
|
||||||
return (
|
return (
|
||||||
<Layout padding={false}>
|
<Layout padding={false}>
|
||||||
|
<SEO title="Strona główna" />
|
||||||
<Header qualifications={qualifications} />
|
<Header qualifications={qualifications} />
|
||||||
<Timer dateOfTheExam={dateOfTheExam} />
|
<Timer dateOfTheExam={dateOfTheExam} />
|
||||||
<AboutExam />
|
<AboutExam />
|
||||||
|
|
|
@ -13,7 +13,10 @@ const CheckMobileApp = () => {
|
||||||
Nie zapomnij sprawdzić naszej aplikacji mobilnej!
|
Nie zapomnij sprawdzić naszej aplikacji mobilnej!
|
||||||
</Typography>
|
</Typography>
|
||||||
<Typography align="center">
|
<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
|
<img
|
||||||
style={{ width: '200px' }}
|
style={{ width: '200px' }}
|
||||||
src="/images/google-play-badge.svg"
|
src="/images/google-play-badge.svg"
|
||||||
|
|
Reference in New Issue