diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/services/dot-edit-content-html/models/meta-tags-model.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/services/dot-edit-content-html/models/meta-tags-model.ts index 4de67f6af956..57ab05e70ffc 100644 --- a/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/services/dot-edit-content-html/models/meta-tags-model.ts +++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/services/dot-edit-content-html/models/meta-tags-model.ts @@ -156,22 +156,26 @@ export const socialMediaTiles: Record = { [SEO_MEDIA_TYPES.FACEBOOK]: { label: 'Facebook', value: SEO_MEDIA_TYPES.FACEBOOK, - icon: 'pi pi-facebook' + icon: 'pi pi-facebook', + description: 'seo.rules.media.preview.tile' }, [SEO_MEDIA_TYPES.TWITTER]: { label: 'X (Formerly Twitter)', value: SEO_MEDIA_TYPES.TWITTER, - icon: 'pi pi-twitter' + icon: 'pi pi-twitter', + description: 'seo.rules.media.preview.tile' }, [SEO_MEDIA_TYPES.LINKEDIN]: { label: 'Linkedin', value: SEO_MEDIA_TYPES.LINKEDIN, - icon: 'pi pi-linkedin' + icon: 'pi pi-linkedin', + description: 'seo.rules.media.preview.tile' }, [SEO_MEDIA_TYPES.GOOGLE]: { label: 'Google', value: SEO_MEDIA_TYPES.GOOGLE, - icon: 'pi pi-google' + icon: 'pi pi-google', + description: 'seo.rules.media.search.engine' } }; @@ -179,4 +183,5 @@ export interface SocialMediaOption { label: string; value: SEO_MEDIA_TYPES; icon: string; + description: string; } diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/services/html/dot-seo-meta-tags.service.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/services/html/dot-seo-meta-tags.service.ts index 4ff0d083890f..8c3944867c78 100644 --- a/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/services/html/dot-seo-meta-tags.service.ts +++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/services/html/dot-seo-meta-tags.service.ts @@ -231,6 +231,8 @@ export class DotSeoMetaTagsService { private getOgDescriptionItems(metaTagsObject: SeoMetaTags): SeoRulesResult[] { const result: SeoRulesResult[] = []; const ogDescription = metaTagsObject['og:description']; + const description = metaTagsObject['description']; + const descriptionElements = metaTagsObject['descriptionElements']; const descriptionOgElements = metaTagsObject['descriptionOgElements']; if (descriptionOgElements?.length > 1) { @@ -241,7 +243,22 @@ export class DotSeoMetaTagsService { ); } - if (!ogDescription || descriptionOgElements.length === 0) { + if ( + this.areAllFalsyOrEmpty([ + ogDescription, + descriptionOgElements, + description, + descriptionElements + ]) + ) { + result.push( + this.getErrorItem( + this.dotMessageService.get('seo.rules.og-description.description.not.found') + ) + ); + } + + if (description && this.areAllFalsyOrEmpty([ogDescription, descriptionOgElements])) { result.push( this.getErrorItem(this.dotMessageService.get('seo.rules.og-description.not.found')) ); @@ -391,7 +408,7 @@ export class DotSeoMetaTagsService { if (titleOgElements?.length >= 1 && this.areAllFalsyOrEmpty([titleOg])) { result.push( - this.getErrorItem(this.dotMessageService.get(' seo.rules.og-title.found.empty')) + this.getErrorItem(this.dotMessageService.get('seo.rules.og-title.found.empty')) ); } @@ -444,6 +461,14 @@ export class DotSeoMetaTagsService { ); } + if (imageOgElements?.length >= 1 && this.areAllFalsyOrEmpty([imageOg])) { + result.push( + this.getErrorItem( + this.dotMessageService.get('seo.rules.og-image.more.one.found.empty') + ) + ); + } + if (imageOgElements?.length > 1) { result.push( this.getErrorItem( @@ -516,7 +541,9 @@ export class DotSeoMetaTagsService { if (titleCardElements.length >= 1 && this.areAllFalsyOrEmpty([titleCard])) { result.push( - this.getErrorItem(this.dotMessageService.get('seo.rules.twitter-card-title.empty')) + this.getErrorItem( + this.dotMessageService.get('seo.rules.twitter-card-title.found.empty') + ) ); } diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/seo/components/dot-results-seo-tool/dot-results-seo-tool.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/seo/components/dot-results-seo-tool/dot-results-seo-tool.component.ts index 5562f3a078bd..8ea1435e1434 100644 --- a/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/seo/components/dot-results-seo-tool/dot-results-seo-tool.component.ts +++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/seo/components/dot-results-seo-tool/dot-results-seo-tool.component.ts @@ -67,11 +67,19 @@ export class DotResultsSeoToolComponent implements OnInit, OnChanges { seoMediaTypes = SEO_MEDIA_TYPES; ngOnInit() { + const title = + this.seoOGTags['og:title']?.slice(0, SEO_LIMITS.MAX_OG_TITLE_LENGTH) || + this.seoOGTags['title']?.slice(0, SEO_LIMITS.MAX_TITLE_LENGTH); + + const description = + this.seoOGTags['og:description']?.slice(0, SEO_LIMITS.MAX_OG_DESCRIPTION_LENGTH) || + this.seoOGTags.description?.slice(0, SEO_LIMITS.MAX_DESCRIPTION_LENGTH); + this.allPreview = [ { hostName: this.hostName, - title: this.seoOGTags['og:title']?.slice(0, SEO_LIMITS.MAX_OG_TITLE_LENGTH), - description: this.seoOGTags.description, + title, + description, type: 'Desktop', isMobile: false, image: this.seoOGTags['og:image'], @@ -90,8 +98,8 @@ export class DotResultsSeoToolComponent implements OnInit, OnChanges { }, { hostName: this.hostName, - title: this.seoOGTags['og:title'], - description: this.seoOGTags.description, + title, + description, type: 'Mobile', isMobile: true } diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/seo/components/dot-select-seo-tool/dot-select-seo-tool.component.html b/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/seo/components/dot-select-seo-tool/dot-select-seo-tool.component.html index 8b95ba02c2d2..5c05af3b58a2 100644 --- a/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/seo/components/dot-select-seo-tool/dot-select-seo-tool.component.html +++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/seo/components/dot-select-seo-tool/dot-select-seo-tool.component.html @@ -8,7 +8,7 @@
{{ socialMediaTiles[socialMedia]?.label }}
{{ - 'seo.rules.media.preview.tile' | dm + socialMediaTiles[socialMedia]?.description | dm }} diff --git a/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties b/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties index 8ab617c1d806..e1912ad96edb 100644 --- a/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties +++ b/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties @@ -5439,7 +5439,8 @@ seo.rules.description.greater=Meta Description found! seo.rules.og-description.more.one.found=more than 1 og:description meta tag found! seo.rules.og-description.found.empty=og:description meta tag found, but is empty! seo.rules.og-description.not.found=og:description meta tag not found! Showing Meta Description instead. -seo.rules.og-description.greater=Meta Description found, but it has more than 160 characters. +seo.rules.og-description.description.not.found=og:description meta tag, and Meta Description not found! +seo.rules.og-description.greater=og:description meta tag found, but it has more than 160 characters. seo.rules.og-description.less=og:description meta tag found, but has fewer than 55 characters of content. seo.rules.og-description.found=og:description meta tag with valid content found! @@ -5476,12 +5477,11 @@ seo.rules.twitter-card.found=twitter:card meta tag found! seo.rules.twitter-card-title.not.found=twitter:title meta tag not found! Showing HTML Title instead. seo.rules.twitter-card-title.more.one.found=more than 1 twitter:title meta tag found! -seo.rules.twitter-card-title.more.one.found.empty=twitter:title meta tag found, but is empty! +seo.rules.twitter-card-title.found.empty=twitter:title meta tag found, but is empty! seo.rules.twitter-card.title.greater=twitter:title meta tag found, but has more than 70 characters. seo.rules.twitter-card.title.less=twitter:title meta tag found, but has fewer than 30 characters of content. seo.rules.twitter-card-title.found=twitter:title meta tag with valid content found! - seo.rules.twitter-card-description.not.found=twitter:description meta tag not found! Showing Description instead. seo.rules.twitter-card-description.more.one.found=more than 1 twitter:description meta tag found! seo.rules.twitter-card-description.more.one.found.empty=twitter:description meta tag found, but is empty! @@ -5525,4 +5525,5 @@ seo.rules.read-more.google.meta-tags=What Are Meta Descriptions And How to Write Them. seo.rules.read-more.google.image-sizes=Read more about social media tile image sizes. +seo.rules.media.search.engine=Search Engine Results Page seo.rules.media.preview.tile=Social Media Preview Tile