diff --git a/README.md b/README.md index 02247be..c1f2c6f 100644 --- a/README.md +++ b/README.md @@ -69,7 +69,8 @@ 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. + +**Notice2**: When adding your SEO component, make sure to include it in the root of your Content-Type. ## EditView SEO button 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', }; diff --git a/admin/src/components/CMEditView/RightLinksCompo/SeoChecks/index.js b/admin/src/components/CMEditView/RightLinksCompo/SeoChecks/index.js index fa6bea5..7078e96 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, @@ -41,14 +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 seo = _.get(modifiedData, 'seo', null); - return ( setIsVisible((prev) => !prev)} @@ -77,15 +80,15 @@ const SeoChecks = ({ {checks?.metaTitle && ( )} {checks?.metaDescription && ( )} {checks?.canonicalUrl && ( )} {checks?.structuredData && ( )} {checks?.metaRobots && ( )} 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); diff --git a/admin/src/components/CMEditView/RightLinksCompo/Summary/SocialPreview/index.js b/admin/src/components/CMEditView/RightLinksCompo/Summary/SocialPreview/index.js index 9aa88ad..c78fdc6 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 = ({ layout, modifiedData, 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); diff --git a/admin/src/components/CMEditView/RightLinksCompo/Summary/index.js b/admin/src/components/CMEditView/RightLinksCompo/Summary/index.js index b2f13f8..c0fbfd1 100644 --- a/admin/src/components/CMEditView/RightLinksCompo/Summary/index.js +++ b/admin/src/components/CMEditView/RightLinksCompo/Summary/index.js @@ -125,18 +125,21 @@ const Summary = () => { {isBrowserPreviewVisible && ( )} {isSocialPreviewVisible && ( )} {isSeoChecksVisible && ( { - 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 ( { - 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', @@ -245,7 +245,11 @@ const structuredDataPreview = (modifiedData) => { 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 @@ -253,28 +257,28 @@ const getAllChecks = async (layout, modifiedData, components, contentType) => { 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..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, @@ -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 = {};