Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-09-11 05:36:10 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

home page seo test

Browse Source
This commit is contained in:
Kalle (Sendou)
2020-12-13 14:46:39 +02:00
parent 462d38ef6b
commit 6d8b3dabfc
3 changed files with 50 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
components/common/SEO.tsx Normal file
View File

@@ -0,0 +1,43 @@
import Head from "next/head";
import { useRouter } from "next/router";
interface Props {
title: string;
description: string;
// 1200x628
imageSrc: string;
appendTitle?: boolean;
}
const SEO: React.FC<Props> = ({
title,
description,
imageSrc,
appendTitle = true,
}) => {
const router = useRouter();
const fullTitle = appendTitle ? `${title} | sendou.ink` : title;
const url = "https://sendou.ink" + router.pathname;
return (
<Head>
<title>{fullTitle}</title>
<meta name="title" content={fullTitle} />
<meta name="description" content={description} />
<meta property="og:type" content="website" />
<meta property="og:url" content={url} />
<meta property="og:title" content={fullTitle} />
<meta property="og:description" content={description} />
<meta property="og:image" content={imageSrc} />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content={url} />
<meta property="twitter:title" content={fullTitle} />
<meta property="twitter:description" content={description} />
<meta property="twitter:image" content={imageSrc} />
</Head>
);
};
export default SEO;

12
pages/index.tsx
View File

@@ -1,7 +1,7 @@
import { Box, Container, Flex, Heading, useColorMode } from "@chakra-ui/react";
import { t, Trans } from "@lingui/macro";
import MyHead from "components/common/MyHead";
import MyLink from "components/common/MyLink";
import SEO from "components/common/SEO";
import { useMyTheme } from "lib/useMyTheme";
import Image from "next/image";
import Link from "next/link";
@@ -11,9 +11,11 @@ const Home = () => {
const { colorMode } = useColorMode();
return (
<>
<MyHead
title={`sendou.ink | ${t`Competitive Splatoon Hub`}`}
appendSendouInk={false}
<SEO
title="sendou.ink"
appendTitle={false}
description="Competitive Splatoon hub featuring several tools and resources."
imageSrc="/seo/home.png"
/>
<Box textAlign="center">
<Image
@@ -25,7 +27,7 @@ const Home = () => {
/>
<Heading size="2xl">Sendou.ink</Heading>
<Box fontWeight="semibold" letterSpacing="wide" color={gray}>
Competitive Splatoon Hub
<Trans>Competitive Splatoon Hub</Trans>
</Box>
</Box>
<Container>

BIN
public/seo/home.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 272 KiB