1- import React , { useEffect } from 'react' ;
2- import {
3- toPublicURL ,
4- Helmet ,
5- hasApiExpander ,
6- getBaseUrl ,
7- } from '@plone/volto/helpers' ;
8- import { getNavroot } from '@plone/volto/actions' ;
1+ import { toPublicURL , Helmet } from '@plone/volto/helpers' ;
92import config from '@plone/volto/registry' ;
10- import { useDispatch , useSelector } from 'react-redux' ;
113
124const ContentMetadataTags = ( props ) => {
135 const {
@@ -21,32 +13,31 @@ const ContentMetadataTags = (props) => {
2113 description,
2214 } = props . content ;
2315
24- const dispatch = useDispatch ( ) ;
25- const pathname = useSelector ( ( state ) => state . router . location . pathname ) ;
26- const navroot = useSelector ( ( state ) => state . navroot ?. data ?. navroot ) ;
27- const site = useSelector ( ( state ) => state . site ?. data ) ;
28-
29- useEffect ( ( ) => {
30- if ( pathname && ! hasApiExpander ( 'navroot' , getBaseUrl ( pathname ) ) ) {
31- dispatch ( getNavroot ( getBaseUrl ( pathname ) ) ) ;
32- }
33- } , [ dispatch , pathname ] ) ;
34-
3516 const getContentImageInfo = ( ) => {
3617 const { contentMetadataTagsImageField } = config . settings ;
37- const image = props . content [ contentMetadataTagsImageField ] ;
18+ const image_field = props . content [ contentMetadataTagsImageField ] ;
19+ const preview_image = props . content . preview_image ;
20+ const preview_image_link = props . content . preview_image_link ;
3821 const { opengraph_image } = props . content ;
22+ let image = undefined ;
23+
24+ if ( opengraph_image !== undefined && opengraph_image ) {
25+ image = opengraph_image ;
26+ } else if ( preview_image_link !== undefined && preview_image_link ) {
27+ image = preview_image_link [ contentMetadataTagsImageField ] ;
28+ } else if ( preview_image !== undefined && preview_image ) {
29+ image = preview_image ;
30+ } else if ( image_field !== undefined && image_field ) {
31+ image = image_field ;
32+ }
3933
4034 const contentImageInfo = {
4135 contentHasImage : false ,
4236 url : null ,
4337 height : null ,
4438 width : null ,
4539 } ;
46- contentImageInfo . contentHasImage =
47- opengraph_image ?. scales ?. large ?. download ||
48- image ?. scales ?. large ?. download ||
49- false ;
40+ contentImageInfo . contentHasImage = image ?. scales ?. large ?. download || false ;
5041
5142 if ( contentImageInfo . contentHasImage && opengraph_image ?. scales ?. large ) {
5243 contentImageInfo . url = opengraph_image . scales . large . download ;
@@ -63,35 +54,16 @@ const ContentMetadataTags = (props) => {
6354
6455 const contentImageInfo = getContentImageInfo ( ) ;
6556
66- const getTitle = ( ) => {
67- const includeSiteTitle =
68- config ?. settings ?. siteTitleFormat ?. includeSiteTitle || false ;
69- const titleAndSiteTitleSeparator =
70- config ?. settings ?. titleAndSiteTitleSeparator || '-' ;
71- const navRootTitle = navroot ?. title ;
72- const siteRootTitle = site ?. [ 'plone.site_title' ] ;
73- const titlePart = navRootTitle || siteRootTitle ;
74-
75- if ( includeSiteTitle && titlePart && titlePart !== title ) {
76- return seo_title || `${ title } ${ titleAndSiteTitleSeparator } ${ titlePart } ;
77- } else {
78- return seo_title || title ;
79- }
80- } ;
81-
8257 return (
8358 < >
8459 < Helmet >
85- < title > { getTitle ( ) ?. replace ( / \u00AD / g, '' ) } </ title >
86- < link
87- rel = "canonical"
88- href = { seo_canonical_url || toPublicURL ( props . content [ '@id' ] ) }
89- />
60+ < title > { ( seo_title || title ) ?. replace ( / \u00AD / g, '' ) } </ title >
9061 < meta name = "description" content = { seo_description || description } />
9162 < meta
9263 property = "og:title"
9364 content = { opengraph_title || seo_title || title }
9465 />
66+ < meta property = "og:type" content = { 'website' } />
9567 < meta
9668 property = "og:url"
9769 content = { seo_canonical_url || toPublicURL ( props . content [ '@id' ] ) }
@@ -103,6 +75,12 @@ const ContentMetadataTags = (props) => {
10375 content = { toPublicURL ( contentImageInfo . url ) }
10476 />
10577 ) }
78+ { contentImageInfo . contentHasImage && (
79+ < meta
80+ property = "twitter:image"
81+ content = { toPublicURL ( contentImageInfo . url ) }
82+ />
83+ ) }
10684 { contentImageInfo . contentHasImage && (
10785 < meta property = "og:image:width" content = { contentImageInfo . width } />
10886 ) }
@@ -116,6 +94,21 @@ const ContentMetadataTags = (props) => {
11694 />
11795 ) }
11896 < meta name = "twitter:card" content = "summary_large_image" />
97+ < meta
98+ property = "twitter:url"
99+ content = { seo_canonical_url || toPublicURL ( props . content [ '@id' ] ) }
100+ />
101+ { /* TODO: Improve SEO backend metadata providers by adding the twitter handler */ }
102+ { /* <meta property="twitter:site" content={'@my_twitter_handler '} /> */ }
103+ < meta
104+ property = "twitter:title"
105+ content = { opengraph_title || seo_title || title }
106+ />
107+ < meta
108+ property = "twitter:description"
109+ content = { seo_description || description }
110+ />
111+ < meta property = "twitter:domain" content = { config . settings . publicURL } />
119112 </ Helmet >
120113 </ >
121114 ) ;
0 commit comments