interation opengraph

frontend/src/api.js

@@ -1,8 +1,22 @@
 import axios from 'axios';
 
+// Création de l'instance Axios
 const api = axios.create({
     baseURL: 'https://preprod.octopusdesign.fr/api-octopus/server/wp-json',
     withCredentials: true,
 });
 
+// Méthode pour récupérer les données OpenGraph d'un article spécifique
+export const fetchPostWithOG = async (postId) => {
+    try {
+        const response = await api.get(`/wp/v2/posts/${postId}`);
+        const { opengraph } = response.data; // Les métadonnées OpenGraph doivent être disponibles ici
+        return opengraph;
+    } catch (error) {
+        console.error('Erreur lors de la récupération des données OpenGraph :', error);
+        throw error;
+    }
+};
+
+// Exportation de l'instance Axios par défaut
 export default api;

frontend/src/components/Pages/Post.jsx

@@ -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([]);
 

frontend/src/components/Pages/PostPage.jsx

@@ -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;

frontend/src/components/SEO.jsx

@@ -1,21 +1,51 @@
-import React from 'react';
+import React, { useEffect, useState } from "react";
-import { Helmet } from 'react-helmet-async';
+import { Helmet } from "react-helmet-async";
+import axios from "axios";
+
+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",
+  });
+
+  useEffect(() => {
+    if (!postId) return;
+
+    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]);
 
-const SEO = ({ title, description, canonicalUrl }) => {
   return (
     <Helmet>
-            {/* Title et Description */}
+      <title>{metaData.title}</title>
-            <title>{title || 'Titre par défaut'}</title>
+      <meta name="description" content={metaData.description} />
-            <meta name="description" content={description || 'Description par défaut.'} />
+      {metaData.canonicalUrl && <link rel="canonical" href={metaData.canonicalUrl} />}
-            {canonicalUrl && <link rel="canonical" href={canonicalUrl} />}
+      <meta property="og:title" content={metaData.ogTitle || metaData.title} />
-
+      <meta property="og:description" content={metaData.ogDescription || metaData.description} />
-            {/* Preconnect */}
+      <meta property="og:image" content={metaData.ogImage} />
-            <link rel="preconnect" href="https://octopusdesign.fr" />
-            <link rel="preconnect" href="https://preprod.octopusdesign.fr" />
-
-            {/* DNS Prefetch */}
-            <link rel="dns-prefetch" href="https://octopusdesign.fr" />
-            <link rel="dns-prefetch" href="https://preprod.octopusdesign.fr" />
     </Helmet>
   );
 };

frontend/src/main.jsx

@@ -6,43 +6,32 @@ import theme from "./theme";
 import { HelmetProvider } from "react-helmet-async";
 import SimpleReactLightbox from "simple-react-lightbox";
 
-
 // Lazy loading des pages
 const Home = lazy(() => import('./components/pages/Home.jsx'));
 const About = lazy(() => import('./components/Pages/About'));
 const Contact = lazy(() => import('./components/Pages/Contact'));
-
+const Post = lazy(() => import('./components/Pages/Post'));
-// import Home from "./components/Pages/Home.jsx";
+const PostPage = lazy(() => import('./components/Pages/PostPage')); // Nouveau composant pour un post spécifique
-import Post from "./components/Pages/Post";
+const Search = lazy(() => import('./components/Pages/Search')); // Nouveau composant pour la recherche
-// import About from "./components/Pages/About";
-// import Contact from "./components/Pages/Contact";
-import Search from "./components/Pages/Search"; // Nouveau composant pour la recherche
-import Header from "./components/Header";
-import Footer from './components/Footer';
-
 
 // Import des services
 import ServiceUn from "./components/Pages/ServiceUn.jsx";
 import ServiceDeux from "./components/Pages/ServiceDeux.jsx";
 import ServiceTrois from "./components/Pages/ServiceTrois.jsx";
 
-function App() {
+// Import des composants globaux
-  return (
+import Header from "./components/Header";
-    <SimpleReactLightbox>
+import Footer from './components/Footer';
-      <YourApp />
-    </SimpleReactLightbox>
-  );
-}
 
-ReactDOM.createRoot(document.getElementById("root")).render(
+function YourApp() {
-  <React.StrictMode>
+  return (
-    <ThemeProvider theme={theme}>
+    <Suspense fallback={<div>Chargement...</div>}>
-      <HelmetProvider>
       <Router>
         <Header />
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/posts" element={<Post />} />
+          <Route path="/posts/:id" element={<PostPage />} /> {/* Route dynamique pour un post spécifique */}
           <Route path="/about" element={<About />} />
           <Route path="/contact" element={<Contact />} />
           <Route path="/search" element={<Search />} /> {/* Route pour les recherches */}
@@ -53,6 +42,17 @@ ReactDOM.createRoot(document.getElementById("root")).render(
         </Routes>
         <Footer />
       </Router>
+    </Suspense>
+  );
+}
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <ThemeProvider theme={theme}>
+      <HelmetProvider>
+        <SimpleReactLightbox>
+          <YourApp />
+        </SimpleReactLightbox>
       </HelmetProvider>
     </ThemeProvider>
   </React.StrictMode>

server/wp-content/themes/hello-elementor-child/functions.php

@@ -162,3 +162,24 @@ register_rest_field(
         'schema' => null,
     ]
 );
+
+function ajouter_opengraph_meta_api($data, $post, $context) {
+    if ($context !== 'view' || !$post) {
+        return $data;
+    }
+
+    // Récupérer les métadonnées de Rank Math
+    $og_title = get_post_meta($post->ID, 'rank_math_title', true);
+    $og_description = get_post_meta($post->ID, 'rank_math_description', true);
+    $og_image = get_post_meta($post->ID, 'rank_math_facebook_image', true);
+
+    // Ajouter les métadonnées au champ API
+    $data->data['opengraph'] = [
+        'title' => $og_title ?: $post->post_title,
+        'description' => $og_description ?: wp_trim_words($post->post_content, 20),
+        'image' => $og_image ? wp_get_attachment_url($og_image) : null,
+    ];
+
+    return $data;
+}
+add_filter('rest_prepare_post', 'ajouter_opengraph_meta_api', 10, 3);