Added <meta/> tags.

This commit is contained in:
Guz
2022-01-07 22:07:41 -03:00
parent 4fed53bd34
commit dcdece1c72
7 changed files with 51 additions and 3 deletions

2
.github/TODO.md vendored
View File

@@ -8,7 +8,7 @@
- [ ] Create more pages and a simple but dynamic navigation bar. [^](../src/pages/index.tsx#L7)
#### Improvements
- [ ] Add `<meta/>` tags and [schemas](https://schema.org) for better Search Engine Optimization (SEO).
- [x] `1.0.1` Add `<meta/>` tags and [schemas](https://schema.org) for better Search Engine Optimization (SEO).
- [ ] Import dynamically the social media icons based on the socials.json file to get the paths or file names without needing to manually go and add a new switch statement. [^](../src/components/SocialIcon.tsx#L6)

View File

@@ -1,7 +1,7 @@
{
"name": "website",
"private": true,
"version": "1.0.0",
"version": "1.0.1",
"scripts": {
"dev": "next dev",
"build": "tsm src && tcm src && next build",

View File

@@ -1,4 +1,5 @@
{
"name": "Gustavo \"Guz\" L. de Mello",
"support": {
"url": "https://ko-fi.com/guz013",
"platform": "Ko-Fi"

View File

@@ -13,7 +13,7 @@ const Footer = () => {
</a>
<p className={style.copyright}>
By Gustavo &quot;Guz&quot; L. de Mello {new Date().getFullYear()}
By {info.name} {new Date().getFullYear()}
</p>
<a href={info.source.repo} target='_blank' rel='noreferrer'>

40
src/components/Meta.tsx Normal file
View File

@@ -0,0 +1,40 @@
import socials from '@content/socials.json';
import info from '@content/info.json';
const commons = {
title: 'Guz013 - Someone who\'s trying to improve.',
description: 'Personal website of Guz013, where to find social medias and professional contact.',
image: 'https://pbs.twimg.com/profile_images/1477086304856911879/H0Vx9YxM_400x400.jpg',
};
function Meta() {
return (
<>
<title>{commons.title}</title>
<meta name='description' content={commons.description}/>
<meta name='author' content={info.name}/>
{/* Schema.org markup */}
<meta itemProp='name' content={commons.title}/>
<meta itemProp='description' content={commons.description}/>
<meta itemProp='image' content={commons.image}/>
{/* Twitter Card: */}
<meta name='twitter:card' content='summary'/>
<meta name='twitter:site' content={`@${socials.find(i => { return i.name === 'twitter'; })?.username}`}/>
<meta name='twitter:title' content={commons.title}/>
<meta name='twitter:description' content={commons.description}/>
<meta name='twitter:image:src' content={commons.image}/>
{/* Open Graph */}
<meta property='og:type' content='website'/>
<meta property='og:title' content={commons.title}/>
<meta property='og:description' content={commons.description}/>
<meta property='og:url' content='https://guz.vercel.app'/>
<meta property='og:site_name' content={'Guz\'s Website'}/>
<meta property='og:image' content={commons.image}/>
</>
);
}
export default Meta;

View File

@@ -1,12 +1,18 @@
import '../styles/globals.scss';
import type { AppProps } from 'next/app';
import Head from 'next/head';
import Footer from '@components/Footer';
import Background from '@components/Background';
import Meta from '@components/Meta';
function MyApp({ Component, pageProps }: AppProps) {
return (
<>
<Head>
<Meta/>
</Head>
<Component {...pageProps} />
<Footer />
<Background />

View File

@@ -18,6 +18,7 @@
"paths": {
"@public/*": [ "./public/*" ],
"@content/*": [ "./public/content/*" ],
"@meta/*": [ "./public/content/meta/*" ],
"@fonts/*": [ "./public/fonts/*" ],
"@icons/*": [ "./public/icons/*" ],
"@images/*": [ "./public/images/*" ],