interation opengraph

2025-01-15 09:50:46 +01:00
parent 7c25479236
commit a9f17ff11f
7 changed files with 5105 additions and 51 deletions
@@ -3,6 +3,7 @@ import { Grid, Card, CardContent, CardMedia, Typography, Box } from '@mui/materi
 import api from '../../api'; // Adaptez le chemin vers l'instance Axios


+
 const Post = () => {
    const [posts, setPosts] = useState([]);

@@ -0,0 +1,39 @@
+import React, { useEffect, useState } from "react";
+import { Helmet } from "react-helmet-async";
+import { useParams } from "react-router-dom";
+import { fetchPostWithOG } from "../../api"; // Assure-toi que le chemin est correct
+
+const PostPage = () => {
+    const { id } = useParams();
+    const [ogData, setOgData] = useState(null);
+
+    useEffect(() => {
+        const getOgData = async () => {
+            try {
+                const data = await fetchPostWithOG(id);
+                setOgData(data);
+            } catch (error) {
+                console.error("Erreur lors de la récupération des métadonnées OpenGraph :", error);
+            }
+        };
+
+        getOgData();
+    }, [id]);
+
+    if (!ogData) return <div>Chargement...</div>;
+
+    return (
+        <div>
+            <Helmet>
+                <meta property="og:title" content={ogData.title} />
+                <meta property="og:description" content={ogData.description} />
+                <meta property="og:image" content={ogData.image} />
+            </Helmet>
+            <h1>{ogData.title}</h1>
+            <p>{ogData.description}</p>
+            <img src={ogData.image} alt={ogData.title} />
+        </div>
+    );
+};
+
+export default PostPage;
@@ -1,23 +1,53 @@
-import React from 'react';
-import { Helmet } from 'react-helmet-async';
+import React, { useEffect, useState } from "react";
+import { Helmet } from "react-helmet-async";
+import axios from "axios";

-const SEO = ({ title, description, canonicalUrl }) => {
-    return (
-        <Helmet>
-            {/* Title et Description */}
-            <title>{title || 'Titre par défaut'}</title>
-            <meta name="description" content={description || 'Description par défaut.'} />
-            {canonicalUrl && <link rel="canonical" href={canonicalUrl} />}
+const SEO = ({ postId, defaultTitle, defaultDescription, defaultCanonicalUrl, defaultOgImage }) => {
+  const [metaData, setMetaData] = useState({
+    title: defaultTitle || "Titre par défaut",
+    description: defaultDescription || "Description par défaut",
+    canonicalUrl: defaultCanonicalUrl || "",
+    ogTitle: "",
+    ogDescription: "",
+    ogImage: defaultOgImage || "https://votre-site.com/default-image.jpg",
+  });

-            {/* Preconnect */}
-            <link rel="preconnect" href="https://octopusdesign.fr" />
-            <link rel="preconnect" href="https://preprod.octopusdesign.fr" />
+  useEffect(() => {
+    if (!postId) return;

-            {/* DNS Prefetch */}
-            <link rel="dns-prefetch" href="https://octopusdesign.fr" />
-            <link rel="dns-prefetch" href="https://preprod.octopusdesign.fr" />
-        </Helmet>
-    );
+    const fetchMetaData = async () => {
+      try {
+        const response = await axios.get(
+          `https://preprod.octopusdesign.fr/api-octopus/server/wp-json/wp/v2/pages/${postId}`
+        );
+
+        const ogData = response.data.rank_math_og || {};
+        setMetaData((prev) => ({
+          ...prev,
+          title: ogData.og_title || prev.title,
+          description: ogData.og_description || prev.description,
+          ogTitle: ogData.og_title || "",
+          ogDescription: ogData.og_description || "",
+          ogImage: ogData.og_image || prev.ogImage,
+        }));
+      } catch (error) {
+        console.error("Erreur lors de la récupération des données SEO :", error);
+      }
+    };
+
+    fetchMetaData();
+  }, [postId]);
+
+  return (
+    <Helmet>
+      <title>{metaData.title}</title>
+      <meta name="description" content={metaData.description} />
+      {metaData.canonicalUrl && <link rel="canonical" href={metaData.canonicalUrl} />}
+      <meta property="og:title" content={metaData.ogTitle || metaData.title} />
+      <meta property="og:description" content={metaData.ogDescription || metaData.description} />
+      <meta property="og:image" content={metaData.ogImage} />
+    </Helmet>
+  );
 };

 export default SEO;