From 56fd542c92baf3c20be98b044fb1e08897bd812d Mon Sep 17 00:00:00 2001 From: Christophe Carvalho Vilas-Boas Date: Fri, 3 May 2024 16:56:49 +0200 Subject: [PATCH 01/14] fix: Show Summary in EditView Show Summary if content type layout contains a component named `shared.seo` --- admin/src/components/CMEditView/RightLinksCompo/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/admin/src/components/CMEditView/RightLinksCompo/index.js b/admin/src/components/CMEditView/RightLinksCompo/index.js index 6351b7c..49de196 100644 --- a/admin/src/components/CMEditView/RightLinksCompo/index.js +++ b/admin/src/components/CMEditView/RightLinksCompo/index.js @@ -9,9 +9,9 @@ import Summary from './Summary'; import _ from 'lodash'; const SeoChecker = () => { - const { modifiedData } = useCMEditViewDataManager(); + const { layout } = useCMEditViewDataManager(); - if (modifiedData.hasOwnProperty('seo')) { + if (Object.values(layout.attributes).some((attr) => attr.type === "component" && attr.component === 'shared.seo')) { return ( Date: Tue, 7 May 2024 14:59:10 +0200 Subject: [PATCH 02/14] Update index.js --- .../RightLinksCompo/Summary/SocialPreview/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/admin/src/components/CMEditView/RightLinksCompo/Summary/SocialPreview/index.js b/admin/src/components/CMEditView/RightLinksCompo/Summary/SocialPreview/index.js index 9aa88ad..36dac95 100644 --- a/admin/src/components/CMEditView/RightLinksCompo/Summary/SocialPreview/index.js +++ b/admin/src/components/CMEditView/RightLinksCompo/Summary/SocialPreview/index.js @@ -25,10 +25,11 @@ import TabContent from './TabContent'; import { Illo } from '../../../../HomePage/Main/EmptyComponentLayout/illo'; -const SocialPreview = ({ modifiedData, setIsVisible }) => { +const SocialPreview = ({ modifiedData, layout, setIsVisible }) => { const { formatMessage } = useIntl(); - const seo = _.get(modifiedData, 'seo', null); + const seoPropName = Object.entries(layout.attributes).find(([, attr]) => attr.type === "component" && attr.component === 'shared.seo')[0]; + const seo = _.get(modifiedData, seoPropName, null); const metaSocial = _.get(seo, 'metaSocial', []); const keywords = _.get(seo, 'keywords', null); From 07312dc2e080474658dfb633ad66eafd8cf0ed28 Mon Sep 17 00:00:00 2001 From: Christophe Carvalho Vilas-Boas Date: Tue, 7 May 2024 15:00:12 +0200 Subject: [PATCH 03/14] Update index.js --- admin/src/components/CMEditView/RightLinksCompo/Summary/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/admin/src/components/CMEditView/RightLinksCompo/Summary/index.js b/admin/src/components/CMEditView/RightLinksCompo/Summary/index.js index b2f13f8..87bfb29 100644 --- a/admin/src/components/CMEditView/RightLinksCompo/Summary/index.js +++ b/admin/src/components/CMEditView/RightLinksCompo/Summary/index.js @@ -131,6 +131,7 @@ const Summary = () => { )} {isSocialPreviewVisible && ( From 969193fe237220ee94fd40b3fbedee71d03ea7de Mon Sep 17 00:00:00 2001 From: Christophe Carvalho Vilas-Boas Date: Tue, 7 May 2024 15:00:31 +0200 Subject: [PATCH 04/14] Update index.js --- .../CMEditView/RightLinksCompo/Summary/SocialPreview/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/admin/src/components/CMEditView/RightLinksCompo/Summary/SocialPreview/index.js b/admin/src/components/CMEditView/RightLinksCompo/Summary/SocialPreview/index.js index 36dac95..c78fdc6 100644 --- a/admin/src/components/CMEditView/RightLinksCompo/Summary/SocialPreview/index.js +++ b/admin/src/components/CMEditView/RightLinksCompo/Summary/SocialPreview/index.js @@ -25,7 +25,7 @@ import TabContent from './TabContent'; import { Illo } from '../../../../HomePage/Main/EmptyComponentLayout/illo'; -const SocialPreview = ({ modifiedData, layout, setIsVisible }) => { +const SocialPreview = ({ layout, modifiedData, setIsVisible }) => { const { formatMessage } = useIntl(); const seoPropName = Object.entries(layout.attributes).find(([, attr]) => attr.type === "component" && attr.component === 'shared.seo')[0]; From c6081bddb2cd8f841224e575d6c701fbb581db96 Mon Sep 17 00:00:00 2001 From: Christophe Carvalho Vilas-Boas Date: Tue, 7 May 2024 15:03:55 +0200 Subject: [PATCH 05/14] Update index.js --- .../RightLinksCompo/Summary/BrowserPreview/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/admin/src/components/CMEditView/RightLinksCompo/Summary/BrowserPreview/index.js b/admin/src/components/CMEditView/RightLinksCompo/Summary/BrowserPreview/index.js index 7fe4c3a..4439268 100644 --- a/admin/src/components/CMEditView/RightLinksCompo/Summary/BrowserPreview/index.js +++ b/admin/src/components/CMEditView/RightLinksCompo/Summary/BrowserPreview/index.js @@ -27,11 +27,12 @@ import { getTrad } from '../../../../../utils'; import _ from 'lodash'; -const BrowserPreview = ({ modifiedData, setIsVisible }) => { +const BrowserPreview = ({ layout, modifiedData, setIsVisible }) => { const { formatMessage } = useIntl(); const [checked, setChecked] = useState(false); - const seo = _.get(modifiedData, 'seo', null); + const seoPropName = Object.entries(layout.attributes).find(([, attr]) => attr.type === "component" && attr.component === 'shared.seo')[0]; + const seo = _.get(modifiedData, seoPropName, null); const metaTitle = _.get(seo, 'metaTitle', null); const metaDescription = _.get(seo, 'metaDescription', null); const keywords = _.get(seo, 'keywords', null); From 17ed8dd2ecb1cffda7dc120a1e0381ef0b0d8643 Mon Sep 17 00:00:00 2001 From: Christophe Carvalho Vilas-Boas Date: Tue, 7 May 2024 15:04:22 +0200 Subject: [PATCH 06/14] Update index.js --- admin/src/components/CMEditView/RightLinksCompo/Summary/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/admin/src/components/CMEditView/RightLinksCompo/Summary/index.js b/admin/src/components/CMEditView/RightLinksCompo/Summary/index.js index 87bfb29..05d5e00 100644 --- a/admin/src/components/CMEditView/RightLinksCompo/Summary/index.js +++ b/admin/src/components/CMEditView/RightLinksCompo/Summary/index.js @@ -125,6 +125,7 @@ const Summary = () => { {isBrowserPreviewVisible && ( From d0c3ffcb1c1cf753b56e3ca8cc38004d6d8e3757 Mon Sep 17 00:00:00 2001 From: Christophe Carvalho Vilas-Boas Date: Tue, 7 May 2024 15:05:09 +0200 Subject: [PATCH 07/14] Update index.js --- .../components/CMEditView/RightLinksCompo/SeoChecks/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/admin/src/components/CMEditView/RightLinksCompo/SeoChecks/index.js b/admin/src/components/CMEditView/RightLinksCompo/SeoChecks/index.js index fa6bea5..2780da6 100644 --- a/admin/src/components/CMEditView/RightLinksCompo/SeoChecks/index.js +++ b/admin/src/components/CMEditView/RightLinksCompo/SeoChecks/index.js @@ -33,6 +33,7 @@ import { getTrad } from '../../../../utils'; import _ from 'lodash'; const SeoChecks = ({ + layout, modifiedData, components, contentType, @@ -47,7 +48,8 @@ const SeoChecks = ({ contentType ); - const seo = _.get(modifiedData, 'seo', null); + const seoPropName = Object.entries(layout.attributes).find(([, attr]) => attr.type === "component" && attr.component === 'shared.seo')[0]; + const seo = _.get(modifiedData, seoPropName, null); return ( Date: Tue, 7 May 2024 15:05:47 +0200 Subject: [PATCH 08/14] Update index.js --- admin/src/components/CMEditView/RightLinksCompo/Summary/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/admin/src/components/CMEditView/RightLinksCompo/Summary/index.js b/admin/src/components/CMEditView/RightLinksCompo/Summary/index.js index 05d5e00..c0fbfd1 100644 --- a/admin/src/components/CMEditView/RightLinksCompo/Summary/index.js +++ b/admin/src/components/CMEditView/RightLinksCompo/Summary/index.js @@ -139,6 +139,7 @@ const Summary = () => { )} {isSeoChecksVisible && ( Date: Tue, 7 May 2024 15:19:41 +0200 Subject: [PATCH 09/14] fix: directly use seo data --- .../RightLinksCompo/SeoChecks/index.js | 10 ++--- .../src/components/CMEditView/utils/checks.js | 39 ++++++++++--------- .../src/components/CMEditView/utils/index.js | 2 +- 3 files changed, 27 insertions(+), 24 deletions(-) diff --git a/admin/src/components/CMEditView/RightLinksCompo/SeoChecks/index.js b/admin/src/components/CMEditView/RightLinksCompo/SeoChecks/index.js index 2780da6..b7094e3 100644 --- a/admin/src/components/CMEditView/RightLinksCompo/SeoChecks/index.js +++ b/admin/src/components/CMEditView/RightLinksCompo/SeoChecks/index.js @@ -79,7 +79,7 @@ const SeoChecks = ({ {checks?.metaTitle && ( )} @@ -104,25 +104,25 @@ const SeoChecks = ({ )} {checks?.metaSocial && ( )} {checks?.canonicalUrl && ( )} {checks?.structuredData && ( )} {checks?.metaRobots && ( )} diff --git a/admin/src/components/CMEditView/utils/checks.js b/admin/src/components/CMEditView/utils/checks.js index 6e3a6e3..56de139 100644 --- a/admin/src/components/CMEditView/utils/checks.js +++ b/admin/src/components/CMEditView/utils/checks.js @@ -4,8 +4,8 @@ const settingsAPI = require('../../../api/settings').default; import { getRichTextCheck } from '../utils'; -const getMetaTitleCheckPreview = (modifiedData) => { - const metaTitle = _.get(modifiedData, 'seo.metaTitle'); +const getMetaTitleCheckPreview = (seo) => { + const metaTitle = _.get(seo, 'metaTitle'); let status = { message: '', @@ -26,8 +26,8 @@ const getMetaTitleCheckPreview = (modifiedData) => { return status; }; -const getMetaDescriptionPreview = (modifiedData) => { - const metaDescription = _.get(modifiedData, 'seo.metaDescription'); +const getMetaDescriptionPreview = (seo) => { + const metaDescription = _.get(seo, 'metaDescription'); let status = { message: '', @@ -135,8 +135,8 @@ const getKeywordDensityPreview = (keywordsDensity) => { return status; }; -const canonicalUrlPreview = (modifiedData) => { - const canonicalUrl = _.get(modifiedData, 'seo.canonicalURL'); +const canonicalUrlPreview = (seo) => { + const canonicalUrl = _.get(seo, 'canonicalURL'); let status = { message: '', color: 'success', @@ -177,8 +177,8 @@ const lastUpdatedAtPreview = (modifiedData) => { return status; }; -const metaRobotPreview = (modifiedData) => { - const metaRobots = _.get(modifiedData, 'seo.metaRobots'); +const metaRobotPreview = (seo) => { + const metaRobots = _.get(seo, 'metaRobots'); let status = { message: '', color: 'success', @@ -192,8 +192,8 @@ const metaRobotPreview = (modifiedData) => { return status; }; -const metaSocialPreview = (modifiedData) => { - const metaSocial = _.get(modifiedData, 'seo.metaSocial'); +const metaSocialPreview = (seo) => { + const metaSocial = _.get(seo, 'metaSocial'); let status = { message: '', @@ -227,8 +227,8 @@ const metaSocialPreview = (modifiedData) => { return status; }; -const structuredDataPreview = (modifiedData) => { - const structuredData = _.get(modifiedData, 'seo.structuredData'); +const structuredDataPreview = (seo) => { + const structuredData = _.get(seo, 'structuredData'); let status = { message: '', color: 'success', @@ -251,30 +251,33 @@ const getAllChecks = async (layout, modifiedData, components, contentType) => { contentType ); + const seoPropName = Object.entries(layout.attributes).find(([, attr]) => attr.type === "component" && attr.component === 'shared.seo')[0]; + const seo = _.get(modifiedData, seoPropName, null); + let result = { ...(defaultSettings[layout?.uid]?.seoChecks?.metaTitle && { - metaTitle: getMetaTitleCheckPreview(modifiedData), + metaTitle: getMetaTitleCheckPreview(seo), }), ...(defaultSettings[layout?.uid]?.seoChecks?.wordCount && { wordCount: getWordCountPreview(wordCount), }), ...(defaultSettings[layout?.uid]?.seoChecks?.metaRobots && { - metaRobots: metaRobotPreview(modifiedData), + metaRobots: metaRobotPreview(seo), }), ...(defaultSettings[layout?.uid]?.seoChecks?.metaSocial && { - metaSocial: metaSocialPreview(modifiedData), + metaSocial: metaSocialPreview(seo), }), ...(defaultSettings[layout?.uid]?.seoChecks?.canonicalUrl && { - canonicalUrl: canonicalUrlPreview(modifiedData), + canonicalUrl: canonicalUrlPreview(seo), }), ...(defaultSettings[layout?.uid]?.seoChecks?.lastUpdatedAt && { lastUpdatedAt: lastUpdatedAtPreview(modifiedData), }), ...(defaultSettings[layout?.uid]?.seoChecks?.structuredData && { - structuredData: structuredDataPreview(modifiedData), + structuredData: structuredDataPreview(seo), }), ...(defaultSettings[layout?.uid]?.seoChecks?.metaDescription && { - metaDescription: getMetaDescriptionPreview(modifiedData), + metaDescription: getMetaDescriptionPreview(seo), }), ...(defaultSettings[layout?.uid]?.seoChecks?.alternativeText && { alternativeText: getAlternativeTextPreview(emptyAltCount), diff --git a/admin/src/components/CMEditView/utils/index.js b/admin/src/components/CMEditView/utils/index.js index 5592b31..4aac988 100644 --- a/admin/src/components/CMEditView/utils/index.js +++ b/admin/src/components/CMEditView/utils/index.js @@ -83,7 +83,7 @@ const getRichTextCheck = (modifiedData, components, contentType) => { let keywords = []; // Keywords - const tmp = _.get(modifiedData, 'seo.keywords', null); + const tmp = _.get(seo, 'keywords', null); if (tmp) keywords = tmp.toLowerCase().split(','); keywordsDensity = {}; From 55a126713fc7316c5add87d82a182a8fe59feef1 Mon Sep 17 00:00:00 2001 From: meeehdi Date: Tue, 7 May 2024 15:24:04 +0200 Subject: [PATCH 10/14] fix: add seo data to rich text checker --- .../CMEditView/RightLinksCompo/SeoChecks/index.js | 7 ++++--- admin/src/components/CMEditView/utils/checks.js | 7 ++++--- admin/src/components/CMEditView/utils/index.js | 2 +- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/admin/src/components/CMEditView/RightLinksCompo/SeoChecks/index.js b/admin/src/components/CMEditView/RightLinksCompo/SeoChecks/index.js index b7094e3..be9e37d 100644 --- a/admin/src/components/CMEditView/RightLinksCompo/SeoChecks/index.js +++ b/admin/src/components/CMEditView/RightLinksCompo/SeoChecks/index.js @@ -42,15 +42,16 @@ const SeoChecks = ({ }) => { const { formatMessage } = useIntl(); + const seoPropName = Object.entries(layout.attributes).find(([, attr]) => attr.type === "component" && attr.component === 'shared.seo')[0]; + const seo = _.get(modifiedData, seoPropName, null); + const { wordCount, keywordsDensity, emptyAltCount } = getRichTextCheck( + seo, modifiedData, components, contentType ); - const seoPropName = Object.entries(layout.attributes).find(([, attr]) => attr.type === "component" && attr.component === 'shared.seo')[0]; - const seo = _.get(modifiedData, seoPropName, null); - return ( setIsVisible((prev) => !prev)} diff --git a/admin/src/components/CMEditView/utils/checks.js b/admin/src/components/CMEditView/utils/checks.js index 56de139..600f900 100644 --- a/admin/src/components/CMEditView/utils/checks.js +++ b/admin/src/components/CMEditView/utils/checks.js @@ -245,15 +245,16 @@ const structuredDataPreview = (seo) => { const getAllChecks = async (layout, modifiedData, components, contentType) => { const defaultSettings = await settingsAPI.get(); + const seoPropName = Object.entries(layout.attributes).find(([, attr]) => attr.type === "component" && attr.component === 'shared.seo')[0]; + const seo = _.get(modifiedData, seoPropName, null); + const { wordCount, keywordsDensity, emptyAltCount } = getRichTextCheck( + seo, modifiedData, components, contentType ); - const seoPropName = Object.entries(layout.attributes).find(([, attr]) => attr.type === "component" && attr.component === 'shared.seo')[0]; - const seo = _.get(modifiedData, seoPropName, null); - let result = { ...(defaultSettings[layout?.uid]?.seoChecks?.metaTitle && { metaTitle: getMetaTitleCheckPreview(seo), diff --git a/admin/src/components/CMEditView/utils/index.js b/admin/src/components/CMEditView/utils/index.js index 4aac988..667312c 100644 --- a/admin/src/components/CMEditView/utils/index.js +++ b/admin/src/components/CMEditView/utils/index.js @@ -65,7 +65,7 @@ const buildKeywordDensityObject = (keywords, words) => { }); }; -const getRichTextCheck = (modifiedData, components, contentType) => { +const getRichTextCheck = (seo, modifiedData, components, contentType) => { const richTextFields = getRichTextFields( contentType, components, From 7974644864e777d3bb465a9e0e47f8aac931cb06 Mon Sep 17 00:00:00 2001 From: meeehdi Date: Tue, 7 May 2024 15:29:20 +0200 Subject: [PATCH 11/14] fix: description seo data... --- .../components/CMEditView/RightLinksCompo/SeoChecks/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/admin/src/components/CMEditView/RightLinksCompo/SeoChecks/index.js b/admin/src/components/CMEditView/RightLinksCompo/SeoChecks/index.js index be9e37d..7078e96 100644 --- a/admin/src/components/CMEditView/RightLinksCompo/SeoChecks/index.js +++ b/admin/src/components/CMEditView/RightLinksCompo/SeoChecks/index.js @@ -87,8 +87,8 @@ const SeoChecks = ({ {checks?.metaDescription && ( Date: Tue, 7 May 2024 15:30:15 +0200 Subject: [PATCH 12/14] Update index.js --- .../RightLinksCompo/SeoChecks/MetaTitleCheck/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/admin/src/components/CMEditView/RightLinksCompo/SeoChecks/MetaTitleCheck/index.js b/admin/src/components/CMEditView/RightLinksCompo/SeoChecks/MetaTitleCheck/index.js index 8ca12ea..444b5cb 100644 --- a/admin/src/components/CMEditView/RightLinksCompo/SeoChecks/MetaTitleCheck/index.js +++ b/admin/src/components/CMEditView/RightLinksCompo/SeoChecks/MetaTitleCheck/index.js @@ -33,7 +33,7 @@ const MetaTitleCheck = ({ metaTitle, checks }) => { status = { message: formatMessage({ id: getTrad('SEOChecks.metaTitleCheck.not-found'), - defaultMessage: 'No Meta Description has been found.', + defaultMessage: 'No Meta Title has been found.', }), color: 'danger', }; From 93d1419d9c38ee78ed302ba39aa437b0dd4a574d Mon Sep 17 00:00:00 2001 From: meeehdi Date: Tue, 7 May 2024 15:33:58 +0200 Subject: [PATCH 13/14] chore(readme): remove notice about component name --- README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/README.md b/README.md index 02247be..870b5d0 100644 --- a/README.md +++ b/README.md @@ -69,7 +69,6 @@ npm run build You'll be able from the SEO settings page to import a `shared.seo` & `shared.meta-social` components from any GitHub repository By default, our [components GitHub repository](https://github.com/strapi/components) is being used. **Notice**: If you decide to import your own components, make sure that they belong to a `shared` category that their names is the same (`seo`, `meta-social`). -**Notice2**: When adding your SEO component, make sure to name it 'seo' and to include it in the root of your Content-Type. ## EditView SEO button From 56a7e2d8cea5ff795c54da77da61d28b5b316141 Mon Sep 17 00:00:00 2001 From: Christophe Carvalho Vilas-Boas Date: Tue, 7 May 2024 15:36:50 +0200 Subject: [PATCH 14/14] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 870b5d0..c1f2c6f 100644 --- a/README.md +++ b/README.md @@ -70,6 +70,8 @@ You'll be able from the SEO settings page to import a `shared.seo` & `shared.met **Notice**: If you decide to import your own components, make sure that they belong to a `shared` category that their names is the same (`seo`, `meta-social`). +**Notice2**: When adding your SEO component, make sure to include it in the root of your Content-Type. + ## EditView SEO button Once you create your SEO component in the edit view inside the Content Manager, the SEO button will appear on the the [right-links injection zone](https://docs.strapi.io/developer-docs/latest/developer-resources/plugin-api-reference/admin-panel.html#injection-zones-api). You'll be able to: