add SEO to multiple pages

andrecasal · May 1, 2024 · 6b67fff · 6b67fff
1 parent c53e46c
commit 6b67fff
Show file tree

Hide file tree

Showing 10 changed files with 133 additions and 10 deletions.
diff --git a/app/routes/_marketing+/articles/_index.tsx b/app/routes/_marketing+/articles/_index.tsx
@@ -4,7 +4,7 @@ import BackgroundBlur from '../components/bg-blur.tsx'
 import { ArticlePreview } from '~/components/ArticlePreview.tsx'
 import { Button } from '~/components/ui/button.tsx'
 import { useState } from 'react'
-import { type LinksFunction, json } from '@remix-run/node'
+import { type LinksFunction, json, type V2_MetaFunction } from '@remix-run/node'
 /* import { post as layout } from './layout/index.tsx' */
 import { post as theDarkSideOfTheGridPost } from './the-dark-side-of-the-grid/index.tsx'
 import { post as fluidSpacePost } from './fluid-space-sizing/index.tsx'
@@ -18,6 +18,20 @@ export const links: LinksFunction = () => {
 	return [{ rel: 'canonical', href: 'https://andrecasal.com/articles' }]
 }
 
+export const meta: V2_MetaFunction = () => {
+	return [
+		{ title: `Articles | Andre Casal` },
+		{
+			name: 'description',
+			content: `Articles to make full-stack web dev a cakewalk.`,
+		},
+		{
+			name: 'keywords',
+			content: `full-stack, web development, articles, tutorials, guides, web dev, front-end, back-end, javascript, typescript, react, node, css, html, web design, web development, web developer, web development articles, web development tutorials, web development guides, web development resources`,
+		},
+	]
+}
+
 export type Post = {
 	title: string
 	description: string

diff --git a/app/routes/_marketing+/articles/fluid-space-sizing/index.tsx b/app/routes/_marketing+/articles/fluid-space-sizing/index.tsx
@@ -1,7 +1,7 @@
 import fluidSpaceSizingImage from './fluid-space-sizing.png'
 import { Link } from '@remix-run/react'
 import { type Post } from '../_index.tsx'
-import { type LinksFunction } from '@remix-run/node'
+import { type V2_MetaFunction, type LinksFunction } from '@remix-run/node'
 import { H1 } from '~/ui_components/typography/h1.tsx'
 import { H2 } from '~/ui_components/typography/h2.tsx'
 import { P } from '~/ui_components/typography/p.tsx'
@@ -20,6 +20,20 @@ export const links: LinksFunction = () => {
 	return [{ rel: 'canonical', href: `https://andrecasal.com${post.href}` }]
 }
 
+export const meta: V2_MetaFunction = () => {
+	return [
+		{ title: `${post.title} | Andre Casal` },
+		{
+			name: 'description',
+			content: post.description,
+		},
+		{
+			name: 'keywords',
+			content: 'spacing, css, design systems, web design, web development, web developer, web development articles, web development tutorials, web development guides',
+		},
+	]
+}
+
 const FluidSpaceSizing = () => {
 	return (
 		<>

diff --git a/app/routes/_marketing+/articles/fluid-typography-sizing-with-modular-scales/index.tsx b/app/routes/_marketing+/articles/fluid-typography-sizing-with-modular-scales/index.tsx
@@ -2,7 +2,7 @@ import { CodeBlock } from '~/components/ui/code-block.tsx'
 import fluidTypographySizingWithModularScales from './fluid-typography.png'
 import { type CSSProperties } from 'react'
 import { type Post } from '../_index.tsx'
-import { type LinksFunction } from '@remix-run/node'
+import { type V2_MetaFunction, type LinksFunction } from '@remix-run/node'
 import { H1 } from '~/ui_components/typography/h1.tsx'
 import { P } from '~/ui_components/typography/p.tsx'
 import { H2 } from '~/ui_components/typography/h2.tsx'
@@ -20,6 +20,20 @@ export const links: LinksFunction = () => {
 	return [{ rel: 'canonical', href: `https://andrecasal.com${post.href}` }]
 }
 
+export const meta: V2_MetaFunction = () => {
+	return [
+		{ title: `${post.title} | Andre Casal` },
+		{
+			name: 'description',
+			content: post.description,
+		},
+		{
+			name: 'keywords',
+			content: 'typography, fluid typography, modular scales, hand-picked scales, design systems, css, web design',
+		},
+	]
+}
+
 const FluidTypographySizingWithModularScales = () => {
 	const modularScale = `:root {
 	--base-font-size: 16px;

diff --git a/app/routes/_marketing+/articles/remix-data-flow/index.tsx b/app/routes/_marketing+/articles/remix-data-flow/index.tsx
@@ -19,7 +19,17 @@ export const links: LinksFunction = () => {
 }
 
 export const meta: V2_MetaFunction = () => {
-	return [{ title: post.title, description: post.description }]
+	return [
+		{ title: `${post.title} | Andre Casal` },
+		{
+			name: 'description',
+			content: post.description,
+		},
+		{
+			name: 'keywords',
+			content: 'remix, data flow, full-stack, web development, react, state management',
+		},
+	]
 }
 
 const RemixDataFlow = () => {

diff --git a/app/routes/_marketing+/articles/the-dark-side-of-the-grid/index.tsx b/app/routes/_marketing+/articles/the-dark-side-of-the-grid/index.tsx
@@ -2,7 +2,7 @@ import theDarkSideOfTheGrid from './the-dark-side-of-the-grid.png'
 import { Link } from '@remix-run/react'
 import { CodeBlock } from '~/components/ui/code-block.tsx'
 import { type Post } from '../_index.tsx'
-import { type LinksFunction } from '@remix-run/node'
+import { type V2_MetaFunction, type LinksFunction } from '@remix-run/node'
 import { H1 } from '~/ui_components/typography/h1.tsx'
 import { P } from '~/ui_components/typography/p.tsx'
 import { H2 } from '~/ui_components/typography/h2.tsx'
@@ -21,6 +21,20 @@ export const links: LinksFunction = () => {
 	return [{ rel: 'canonical', href: `https://andrecasal.com${post.href}` }]
 }
 
+export const meta: V2_MetaFunction = () => {
+	return [
+		{ title: `The Dark Side Of The Grid | Andre Casal` },
+		{
+			name: 'description',
+			content: `Learn about the Grid and Flexbox features you should avoid`,
+		},
+		{
+			name: 'keywords',
+			content: `css grid, css flexbox, css grid auto flow, css grid template areas, css flex direction, css position absolute, css grid dense, css grid auto flow dense, css grid template areas out of order, css flex direction row reverse, css flex direction col reverse, css position absolute out of order`,
+		},
+	]
+}
+
 const TheDarkSideOfTheGrid = () => {
 	const gridWithoutDense = `<div className="mt-8 grid grid-cols-3 grid-rows-3 gap-4">
 	<div className="row-end-[span_3] rounded-md bg-green-200">

diff --git a/app/routes/_marketing+/courses+/index.tsx b/app/routes/_marketing+/courses+/index.tsx
@@ -1,6 +1,6 @@
 import { CoursePresentation } from '~/components/CoursePresentation.tsx'
 import { Newsletter } from '~/components/newsletter.tsx'
-import { type LinksFunction } from '@remix-run/node'
+import { type V2_MetaFunction, type LinksFunction } from '@remix-run/node'
 import { Container } from '~/ui_components/layout/container.tsx'
 import { H1 } from '~/ui_components/typography/h1.tsx'
 import { P } from '~/ui_components/typography/p.tsx'
@@ -9,6 +9,20 @@ export const links: LinksFunction = () => {
 	return [{ rel: 'canonical', href: 'https://andrecasal.com/courses' }]
 }
 
+export const meta: V2_MetaFunction = () => {
+	return [
+		{ title: `Courses | Andre Casal` },
+		{
+			name: 'description',
+			content: `Awesome courses to upgrade your skills.`,
+		},
+		{
+			name: 'keywords',
+			content: `courses, tutorials, guides, web dev, front-end, back-end, javascript, typescript, react, node, css, html, web design, web development, web developer, web development courses, web development tutorials, web development guides, web development resources`,
+		},
+	]
+}
+
 const Courses = () => {
 	const courses = [
 		{

diff --git a/app/routes/_marketing+/courses+/mastery-for-vs-code.tsx b/app/routes/_marketing+/courses+/mastery-for-vs-code.tsx
@@ -10,7 +10,7 @@ import zacharyCassette from '../images/zachary-cassette.jpg'
 import signatureBlack from '../images/signature-black.png'
 import signatureWhite from '../images/signature-white.png'
 import { Newsletter } from '~/components/newsletter.tsx'
-import { type LinksFunction } from '@remix-run/node'
+import { type V2_MetaFunction, type LinksFunction } from '@remix-run/node'
 import { Container } from '~/ui_components/layout/container.tsx'
 import { H1 } from '~/ui_components/typography/h1.tsx'
 import { P } from '~/ui_components/typography/p.tsx'
@@ -23,6 +23,20 @@ export const links: LinksFunction = () => {
 	return [{ rel: 'canonical', href: 'https://andrecasal.com/courses/mastery-for-vs-code' }]
 }
 
+export const meta: V2_MetaFunction = () => {
+	return [
+		{ title: `Mastery for VS Code | Andre Casal` },
+		{
+			name: 'description',
+			content: `Upgrade your coding game with the ultimate course on VS Code. Learn to dominate VS Code, streamline your development process, and boost your productivity.`,
+		},
+		{
+			name: 'keywords',
+			content: `vs code, visual studio code, code editor, web development, full-stack, web developer, productivity, efficiency, best practices, shortcuts, snippets, extensions, automation, feedback, AI, workflows, employability, community, mentorship`,
+		},
+	]
+}
+
 const MasteryForVSCode = () => {
 	const features = [
 		{

diff --git a/app/routes/_marketing+/mentorship.tsx b/app/routes/_marketing+/mentorship.tsx
@@ -7,7 +7,7 @@ import { Button } from '~/components/ui/button.tsx'
 import { Link } from '@remix-run/react'
 import zacharyCassette from './images/zachary-cassette.jpg'
 import { cn } from '~/utils/tailwind-merge.ts'
-import { type LinksFunction } from '@remix-run/node'
+import { type V2_MetaFunction, type LinksFunction } from '@remix-run/node'
 import { Container } from '~/ui_components/layout/container.tsx'
 import { H1 } from '~/ui_components/typography/h1.tsx'
 import { P } from '~/ui_components/typography/p.tsx'
@@ -20,6 +20,20 @@ export const links: LinksFunction = () => {
 	return [{ rel: 'canonical', href: 'https://andrecasal.com/mentorship' }]
 }
 
+export const meta: V2_MetaFunction = () => {
+	return [
+		{ title: `Tech Business Mentorship | Andre Casal` },
+		{
+			name: 'description',
+			content: `I'll help you build your service or tech product, find your first customers, grow your business, and become an independent entrepreneur.`,
+		},
+		{
+			name: 'keywords',
+			content: `business mentorship, tech business mentorship, business mentor, tech business mentor, business mentorship for entrepreneurs, tech business mentorship for entrepreneurs, business mentor for entrepreneurs, tech business mentor for entrepreneurs, business mentorship for startups, tech business mentorship for startups, business mentor for startups, tech business mentor for startups, business mentorship for small businesses, tech business mentorship for small businesses, business mentor for small businesses, tech business mentor for small businesses, business mentorship for entrepreneurs, tech business mentorship for entrepreneurs, business mentor for entrepreneurs, tech business mentor for entrepreneurs, business mentorship for startups, tech business mentorship for startups, business mentor for startups, tech business mentor for startups, business mentorship for small businesses, tech business mentorship for small businesses, business mentor for small businesses, tech business mentor for small businesses`,
+		},
+	]
+}
+
 const stats = [
 	{ label: 'with an initial call', value: 'Start' },
 	{ label: 'with guided cycles', value: 'Sprint' },

diff --git a/app/routes/_marketing+/ship-fast/index.tsx b/app/routes/_marketing+/ship-fast/index.tsx
@@ -6,7 +6,7 @@ import { Button } from '~/components/ui/button.tsx'
 import shipFastImage from './shipfast.png'
 import arrow from './arrow.png'
 import { Newsletter } from '~/components/newsletter.tsx'
-import { type LinksFunction } from '@remix-run/node'
+import { type V2_MetaFunction, type LinksFunction } from '@remix-run/node'
 import { Container } from '~/ui_components/layout/container.tsx'
 import { H1 } from '~/ui_components/typography/h1.tsx'
 import { P } from '~/ui_components/typography/p.tsx'
@@ -19,6 +19,20 @@ export const links: LinksFunction = () => {
 	return [{ rel: 'canonical', href: 'https://andrecasal.com/ship-fast' }]
 }
 
+export const meta: V2_MetaFunction = () => {
+	return [
+		{ title: 'Ship Fast - The Remix boilerplate designed for speed ⚡️' },
+		{
+			name: 'description',
+			content: 'Ship Fast is a remix stack with everything you need to hit the ground running building your app.',
+		},
+		{
+			name: 'keywords',
+			content: 'ship fast, remix, full-stack, web development, course, stack, boilerplate, template, starter, remix boilerplate',
+		},
+	]
+}
+
 const ShipFast = () => {
 	const features = [
 		{

diff --git a/app/routes/_pseo+/explicacoes.$subjectslug.tsx b/app/routes/_pseo+/explicacoes.$subjectslug.tsx
@@ -1,4 +1,4 @@
-import { Button } from '~/components/ui/button.tsx'
+/* import { Button } from '~/components/ui/button.tsx'
 import { Icon } from '~/components/ui/icon.tsx'
 import BackgroundDiagonal from './components/bg-diagonal.tsx'
 import BackgroundBlur from './components/bg-blur.tsx'
@@ -134,3 +134,4 @@ const Explicacoes = () => {
 	)
 }
 export default Explicacoes
+ */