From d3b3a6a9775d645442d90aaff16b0cbe518b343e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A1kob=20Rol=C3=ADk?= <daidaloskvintus@gmail.com>
Date: Sat, 4 Jan 2025 18:04:25 +0100
Subject: [PATCH 1/2] fix(og): fixed open graph field names

`:` Isn't allowed character for a field when the grapqhl plugin tries to generate definitions for it.

This makes the build of the app fail if one has both Graphql Plugin and Seo plugin and adds an seo component to some content-type.

Changing the names of the open-graphql components to not include the `:` fixes this bug.
---
 server/src/components/open-graph.json | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/server/src/components/open-graph.json b/server/src/components/open-graph.json
index 700fcbf..171778e 100644
--- a/server/src/components/open-graph.json
+++ b/server/src/components/open-graph.json
@@ -6,30 +6,30 @@
   },
   "options": {},
   "attributes": {
-    "og:title": {
+    "ogTitle": {
       "type": "string",
       "required": true,
       "maxLength": 70
     },
-    "og:description": {
+    "ogDescription": {
       "type": "string",
       "maxLength": 200,
       "required": true
     },
-    "og:image": {
+    "ogImage": {
       "allowedTypes": [
         "images"
       ],
       "type": "media",
       "multiple": false
     },
-    "og:url": {
+    "ogUrl": {
       "type": "string",
       "required": false
     },
-    "og:type": {
+    "ogType": {
       "type": "string",
       "required": false
     }
   }
-}
\ No newline at end of file
+}

From 44e51cc51f822015aa8b1daac280599dec54529f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A1kob=20Rol=C3=ADk?= <daidaloskvintus@gmail.com>
Date: Sat, 4 Jan 2025 19:53:47 +0100
Subject: [PATCH 2/2] fix(og): working og preview on content type

---
 .../SeoChecks/OpenGraphCheck/index.jsx        |  5 +----
 .../Summary/OpenGraphPreview/index.jsx        | 22 +++++++++----------
 .../src/components/CMEditView/utils/checks.js |  2 +-
 3 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/admin/src/components/CMEditView/RightLinksCompo/SeoChecks/OpenGraphCheck/index.jsx b/admin/src/components/CMEditView/RightLinksCompo/SeoChecks/OpenGraphCheck/index.jsx
index d8e7d02..01aeb7d 100644
--- a/admin/src/components/CMEditView/RightLinksCompo/SeoChecks/OpenGraphCheck/index.jsx
+++ b/admin/src/components/CMEditView/RightLinksCompo/SeoChecks/OpenGraphCheck/index.jsx
@@ -3,9 +3,6 @@ import { useIntl } from 'react-intl';
 
 import isEqual from 'lodash/isEqual';
 import isNull from 'lodash/isNull';
-import isEmpty from 'lodash/isEmpty';
-
-import { Box, Badge, Flex } from '@strapi/design-system';
 
 import { SEOAccordion } from '../SEOAccordion';
 import { SeoCheckerContext } from '../../Summary';
@@ -31,7 +28,7 @@ export const OpenGraphCheck = ({ openGraph, checks }) => {
         }),
         qualityVerdict: qualityVerdict.bad,
       };
-    } else if (!openGraph['og:title'] || !openGraph['og:description'] || !openGraph['og:image']) {
+    } else if (!openGraph['ogTitle'] || !openGraph['ogDescription'] || !openGraph['ogImage']) {
       status = {
         message: formatMessage({
           id: getTrad('SEOChecks.openGraphCheck.not-configured'),
diff --git a/admin/src/components/CMEditView/RightLinksCompo/Summary/OpenGraphPreview/index.jsx b/admin/src/components/CMEditView/RightLinksCompo/Summary/OpenGraphPreview/index.jsx
index fc4539c..b78f1d0 100644
--- a/admin/src/components/CMEditView/RightLinksCompo/Summary/OpenGraphPreview/index.jsx
+++ b/admin/src/components/CMEditView/RightLinksCompo/Summary/OpenGraphPreview/index.jsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useIntl } from 'react-intl';
 
-import { Box, Flex, Typography, EmptyStateLayout, Badge, Modal } from '@strapi/design-system';
+import { Badge, Box, EmptyStateLayout, Flex, Modal, Typography } from '@strapi/design-system';
 
 import { Illo } from '../../../../HomePage/Main/EmptyComponentLayout/illo';
 
@@ -26,7 +26,7 @@ export const OpenGraphPreview = ({ modifiedData }) => {
         </Typography>
       </Modal.Header>
       <Modal.Body>
-        {openGraph['og:title'] && openGraph['og:description'] && openGraph['og:image'] ? (
+        {openGraph['ogTitle'] && openGraph['ogDescription'] && openGraph['ogImage'] ? (
           <>
             <Flex alignItems="left" direction="column" gap={2}>
               <Flex gap={1}>
@@ -36,9 +36,9 @@ export const OpenGraphPreview = ({ modifiedData }) => {
               </Flex>
             </Flex>
             <FacebookOGPreview
-              title={openGraph['og:title']}
-              description={openGraph['og:description']}
-              image={openGraph['og:image']}
+              title={openGraph['ogTitle']}
+              description={openGraph['ogDescription']}
+              image={openGraph['ogImage']}
             />
             <Flex alignItems="left" direction="column" gap={2}>
               <Flex gap={1}>
@@ -48,9 +48,9 @@ export const OpenGraphPreview = ({ modifiedData }) => {
               </Flex>
             </Flex>
             <TwitterOGPreview
-              title={openGraph['og:title']}
-              description={openGraph['og:description']}
-              image={openGraph['og:image']}
+              title={openGraph['ogTitle']}
+              description={openGraph['ogDescription']}
+              image={openGraph['ogImage']}
             />
             <Flex alignItems="left" direction="column" gap={2}>
               <Flex gap={1}>
@@ -60,9 +60,9 @@ export const OpenGraphPreview = ({ modifiedData }) => {
               </Flex>
             </Flex>
             <LinkedInOGPreview
-              title={openGraph['og:title']}
-              description={openGraph['og:description']}
-              image={openGraph['og:image']}
+              title={openGraph['ogTitle']}
+              description={openGraph['ogDescription']}
+              image={openGraph['ogImage']}
             />
           </>
         ) : (
diff --git a/admin/src/components/CMEditView/utils/checks.js b/admin/src/components/CMEditView/utils/checks.js
index e173268..2ec6996 100644
--- a/admin/src/components/CMEditView/utils/checks.js
+++ b/admin/src/components/CMEditView/utils/checks.js
@@ -208,7 +208,7 @@ export const openGraphPreview = (modifiedData) => {
       qualityVerdict: qualityVerdict.bad,
     };
     return status;
-  } else if (!openGraph['og:title'] || !openGraph['og:description'] || !openGraph['og:image']) {
+  } else if (!openGraph['ogTitle'] || !openGraph['ogDescription'] || !openGraph['ogImage']) {
     status = {
       message: '',
       qualityVerdict: qualityVerdict.improvements,