meta tags for indexing

README.md

@@ -25,6 +25,8 @@ REACT_APP_GA_ID="G-XXXXXXX"
 REACT_APP_GA_CLIENT_ID="YOURID.apps.googleusercontent.com"
 REACT_APP_DISQUS_APP_ID="YOURID"
 ```
+PS: insert the secrets in github actions for devops.
+
 I used free tier of Disqus and Google Analytics. You can create an account and get these variables for free.
 
 3. run:

package.json

@@ -10,6 +10,7 @@
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.88",
     "@types/react": "^18.2.65",
+    "@types/react-document-meta": "^3.0.5",
     "@types/react-dom": "^18.2.21",
     "@uiw/react-md-editor": "^4.0.3",
     "axios": "^1.6.1",
@@ -21,6 +22,7 @@
     "lucide-react": "^0.292.0",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.1",
+    "react-document-meta": "^3.0.0-beta.2",
     "react-dom": "^18.2.0",
     "react-dropdown-select": "^4.11.2",
     "react-ga4": "^2.1.0",

public/index.html

@@ -14,11 +14,7 @@
     <link rel="icon" href="%PUBLIC_URL%/logo_viva_viajando_transparente.jpeg" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Blog Viva Viajando. Nesse blog você vai encontrar textos sobre nossas viagens, dicas de como organizar a sua e muito mais."
-    />
-    <meta name="keywords" content="Viagem, Rio de Janeiro, Tijuca, Europa, Bahia, Dicas">
+    <meta name="keywords" content="Viva Viajando, Roteiros, Viagens, Dicas de Viagem, Blog de Viagem, Viagem, Rio de Janeiro, Nordeste, Tijuca, Europa, Bahia, Dicas">
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo_viva_viajando_transparente.jpeg" />
     <!--
       manifest.json provides metadata used when your web app is installed on a

src/pages/details-page.tsx

@@ -10,7 +10,7 @@ import ThemeToggle from '../components/theme-toggle-button';
 import mdstyles from '../assets/markdown.styles.module.css'
 import { DiscussionEmbed } from 'disqus-react';
 import ReactGA from 'react-ga4';
-
+import DocumentMeta from 'react-document-meta';
 
 
 
@@ -24,7 +24,25 @@ export default function DetailsPage() {
   const gaId = process.env.REACT_APP_GA_ID || ''; // Provide a default value if REACT_APP_GA_ID is undefined
   ReactGA.initialize(gaId);
 
+  function getFirstParagraph(text: string) {
+    // Split the text into an array of paragraphs
+    const paragraphs = text.split('\n\n'); // Assuming paragraphs are separated by double line breaks
+
+    // Return the first paragraph
+    if(paragraphs.length > 0) {
+        return paragraphs[0];
+    } else {
+        return "";
+    }
+  }
+
+  const meta = {
+    title: post.title,
+    description: 'Blog Viva Viajando ' + getFirstParagraph(post.description),
+    canonical: window.location.href,
+  };
 
+
   useEffect(() => {
     const getPostById = async () => {
       try {
@@ -53,7 +71,9 @@ export default function DetailsPage() {
   if (!loading) {
     ReactGA.send({ hitType: "pageview", page: postId, title: post.title });
     return (
+
       <div className="min-h-screen bg-light dark:bg-dark">
+        <DocumentMeta {...meta}></DocumentMeta>
         <div className="relative flex flex-col">
           <img src={post.imageLink} alt={post.title} className="h-80 w-full object-cover md:h-96" />
           <div className="absolute left-0 top-0 h-full w-full bg-slate-950/60"></div>

src/pages/home-page.tsx

@@ -15,6 +15,7 @@ import React from 'react';
 import ReactGA from 'react-ga4';
 import { jwtDecode } from "jwt-decode";
 import GoogleLogin from '../components/google-login';
+import DocumentMeta from 'react-document-meta';
 
 const gaId = process.env.REACT_APP_GA_ID || ''; // Provide a default value if REACT_APP_GA_ID is undefined
 ReactGA.initialize(gaId);
@@ -27,6 +28,13 @@ function HomePage() {
   const [loggedUser, setLoggedUser] = useState('');
   const [triedLogin, setTriedLogin] = useState(false);
 
+
+  const meta = {
+    title: 'Blog Viva Viajando',
+    description: 'Blog Viva Viajando. Nesse blog você vai encontrar textos sobre nossas viagens, dicas de como organizar a sua e muito mais.',
+    canonical: window.location.href,
+  };
+
   useEffect(() => {
     axios
       .get(process.env.REACT_APP_API_PATH + '/api/posts')
@@ -56,6 +64,7 @@ function HomePage() {
 
   return (
     <div className="w-full cursor-default bg-light dark:bg-dark">
+      <DocumentMeta {...meta}></DocumentMeta>
       <div
         style={{ backgroundImage: `url(${bg})` }}
         className="relative -mt-2 h-[100px] bg-cover bg-fixed bg-center"