updating website meta tags with React Helmet

daviteixeira-dev · Sep 3, 2023 · 6722807 · 6722807 · vercel · Sep 3, 2023
1 parent b4c7178
commit 6722807
Show file tree

Hide file tree

Showing 9 changed files with 123 additions and 23 deletions.
diff --git a/index.html b/index.html
@@ -1,15 +1,12 @@
 <!DOCTYPE html>
-<html lang="pt-BR">
+<html lang="pt-BR" dir="ltr" xml:lang="pt-BR">
   <head>
     <meta charset="UTF-8" />
+    <meta name="theme-color" content="#171923"/>
+    <meta name="author" content="Davi Teixeira Silva" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <link rel="icon" type="image/svg+xml" href="images/logo.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
-      rel="stylesheet"
-    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <title>Davi Teixeira | Desenvolvedor Web</title>
   </head>
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "framer-motion": "^6.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-helmet": "^6.1.0",
     "react-icons": "^4.4.0",
     "react-router-dom": "^6.15.0"
   },

diff --git a/public/images/apresentation-banner.jpg b/public/images/apresentation-banner.jpg
diff --git a/public/images/img-cinza.png b/public/images/img-cinza.png
diff --git a/public/images/screenshot-blog.png b/public/images/screenshot-blog.png
diff --git a/public/images/screenshot-home-page.png b/public/images/screenshot-home-page.png
diff --git a/src/pages/Blog/pages/Blog.jsx b/src/pages/Blog/pages/Blog.jsx
@@ -5,6 +5,8 @@ import DesktopMenuBlog from "../components/DesktopMenuBlog";
 import BlogCard from "../components/BlogCard";
 import Footer from "../../../components/Footer/Footer";
 
+import { Helmet } from "react-helmet";
+
 const myBlogCards = [
     {
         cardLink: "#",
@@ -47,24 +49,61 @@ const myBlogCards = [
 const Blog = () => {
     return (
         <Container fontFamily="Arial, Helvetica, sans-serif" maxW="full" padding="0">
-
+
+            <Helmet>
+                <title>Blog | Davi Teixeira</title>
+                <meta http-equiv="content-language" content="pt-BR" />
+                <link rel="canonical" href="https://www.daviteixeira.dev.br/blog/" />
+                <meta
+                    name="description"
+                    content="Davi Teixeira Blog: Seu guia definitivo para o desenvolvimento web. Encontre insights, aprendizado, dicas, tutoriais e recursos valiosos para desenvolvedores web."
+                />
+                <meta
+                    name="keywords"
+                    content="blog, insights, dicas, tutoriais, aprendizado, recursos, desenvolvedores web, sites, web, desenvolvedor web, desenvolvimento, programador, daviteixeira, davi teixeira, front-end, frontend, ui, davi, freelancer, freela, website, daviteixeira_dev"
+                />
+                <meta name="copyright" content="Davi Teixeira 2023" />
+
+                <link rel="apple-touch-icon" href="/images/logo.png" />
+                <meta name="apple-mobile-web-app-capable" content="yes" />
+                <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+
+                <meta property="og:type" content="website" />
+                <meta property="og:title" content="Davi Teixeira | Portifólio" />
+                <meta property="og:url" content="https://www.daviteixeira.dev.br/blog" />
+                <meta property="og:image" content="https://www.daviteixeira.dev.br/images/screenshot-blog.png" />
+                <meta property="og:description" content="Davi Teixeira Blog: Seu guia definitivo para o desenvolvimento web. Encontre insights, aprendizado, dicas, tutoriais e recursos valiosos para desenvolvedores web." />
+
+                <meta name="twitter:site" content="@DaviTei51909613" />
+                <meta name="twitter:creator" content="Davi Teixeira" />
+                <meta name="twitter:card" content="summary_large_image" />
+                <meta name="twitter:title" content="Blog | Davi Teixeira" />
+                <meta name="twitter:image:src" content="https://www.daviteixeira.dev.br/images/screenshot-blog.png" />
+                <meta
+                    name="twitter:description"
+                    content="Davi Teixeira Blog: Seu guia definitivo para o desenvolvimento web. Encontre insights, aprendizado, dicas, tutoriais e recursos valiosos para desenvolvedores web."
+                />
+
+                <link rel="manifest" href="/manifest.json"></link>
+            </Helmet>
+
             <DesktopMenuBlog />
 
             <Flex
                 padding="1rem"
-                alignItems="center" 
-                flexDirection="column" 
+                alignItems="center"
+                flexDirection="column"
                 justifyContent="center"
                 backgroundColor="gray.900"
-                height={["100vh", "25rem"]} 
+                height={["100vh", "25rem"]}
             >
-                <Heading 
+                <Heading
                     as="h1"
                     paddingTop="6rem"
                     textAlign="center"
-                    marginBottom="1rem" 
+                    marginBottom="1rem"
                     color="whiteAlpha.900"
-                    fontSize={["2.5rem", "3rem"]} 
+                    fontSize={["2.5rem", "3rem"]}
                 >
                     Davi Teixeira Blog
                 </Heading>
@@ -73,33 +112,33 @@ const Blog = () => {
                     as="h2"
                     paddingTop="1rem"
                     textAlign="center"
-                    marginBottom="1rem" 
+                    marginBottom="1rem"
                     color="whiteAlpha.900"
-                    fontSize={["1.5rem", "2.2rem"]} 
+                    fontSize={["1.5rem", "2.2rem"]}
                 >
                     Desenvolvendo a Web: Insights e Aprendizado
                 </Heading>
 
-                <Text 
+                <Text
                     textAlign="center"
                     color="whiteAlpha.900"
-                    fontSize={["1rem", "1.5rem"]} 
+                    fontSize={["1rem", "1.5rem"]}
                 >
                     Dicas, Tutoriais e Recursos para Desenvolvedores Web.
                 </Text>
             </Flex>
 
-            <SimpleGrid 
+            <SimpleGrid
                 as="section"
                 spacing={6}
-                padding="2rem" 
-                columns={[ 1 , 1, 2,  3 ]} 
+                padding="2rem"
+                columns={[1, 1, 2, 3]}
                 backgroundColor="gray.800"
                 justifyContent="space-evenly"
             >
                 {
                     myBlogCards.map((item, index) => (
-                        <BlogCard 
+                        <BlogCard
                             key={index}
                             cardAlt={item.cardAlt}
                             cardTag={item.cardTag}

diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -9,9 +9,49 @@ import BlogSection from "../components/BlogSection/BlogSection";
 import Presentation from "../components/Presentation/Presentation";
 import MyMainProjects from "../components/MyMainProjects/MyMainProjects";
 
+import { Helmet } from "react-helmet";
+
 const Home = () => {
     return (
         <Container fontFamily="Arial, Helvetica, sans-serif" maxW="full" className="App" p="0">
+
+            <Helmet>
+                <title>Davi Teixeira | Portifólio</title>
+                <meta http-equiv="content-language" content="pt-BR" />
+                <link rel="canonical" href="https://www.daviteixeira.dev.br/" />
+                <meta 
+                    name="description" 
+                    content="Desenvolvedor web graduado em Sistemas de Informação, especializado na criação de websites de alta qualidade para empresas. Colabore comigo para uma presença digital impactante e inovadora." 
+                />
+                <meta 
+                    name="keywords" 
+                    content="sites, web, desenvolvedor web, desenvolvimento, programador, daviteixeira, davi teixeira, front-end, frontend, ui, davi, freelancer, freela, website, portfólio, daviteixeira_dev" 
+                />
+                <meta name="copyright" content="Davi Teixeira 2023" />
+
+                <link rel="apple-touch-icon" href="/images/logo.png" />
+                <meta name="apple-mobile-web-app-capable" content="yes"/>
+                <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
+
+                <meta property="og:type" content="website"/>
+                <meta property="og:title" content="Davi Teixeira | Portifólio"/>
+                <meta property="og:url" content="https://www.daviteixeira.dev.br"/>
+                <meta property="og:image" content="https://www.daviteixeira.dev.br/images/screenshot-home-page.png"/>
+                <meta property="og:description" content="Desenvolvedor web graduado em Sistemas de Informação, especializado na criação de websites de alta qualidade para empresas. Colabore comigo para uma presença digital impactante e inovadora." />
+
+                <meta name="twitter:site" content="@DaviTei51909613"/>
+                <meta name="twitter:creator" content="Davi Teixeira"/>
+                <meta name="twitter:card" content="summary_large_image"/>
+                <meta name="twitter:title" content="Davi Teixeira | Portifólio"/>
+                <meta name="twitter:image:src" content="https://www.daviteixeira.dev.br/images/screenshot-home-page.png"/>
+                <meta 
+                    name="twitter:description" 
+                    content="Desenvolvedor web graduado em Sistemas de Informação, especializado na criação de websites de alta qualidade para empresas. Colabore comigo para uma presença digital impactante e inovadora."
+                />
+
+                <link rel="manifest" href="/manifest.json"></link>
+            </Helmet>
+
             <Header />
             <Presentation />
             <AboutMe />