Skip to content

Commit

Permalink
Logged-Out Theme Showcase: Update SEO Content (Take 2) (#80551)
Browse files Browse the repository at this point in the history 
* Revert "Revert "Logged-Out Theme Showcase: Update SEO Content (#79845)" (#80549)"

Update title, meta description, header and sub-header of the Logged-Out Theme Showcase so that different filters will result in different copy.
  • Loading branch information
@Copons
Copons authored Aug 14, 2023
1 parent 7090f33 commit 45b2205
Show file tree
Hide file tree
Showing 2 changed files with 302 additions and 28 deletions.
270 changes: 270 additions & 0 deletions client/my-sites/themes/get-theme-showcase-logged-out-seo-content.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,270 @@
import { translate } from 'i18n-calypso';

/**
* SEO content:
* - title: the page's <title> tag.
* - header: the page's main heading.
* - description: the page's sub-heading and <meta> description.
*/
const THEME_SHOWCASE_LOGGED_OUT_SEO_CONTENT = {
recommended: {
all: {
title: translate( 'WordPress Themes' ),
header: translate( 'Find the perfect theme for your website.' ),
description: translate(
"Beautiful and responsive WordPress themes. Choose from free and premium options for all types of websites. Then, activate the one that's best for you."
),
},
free: {
title: translate( 'Free WordPress Themes' ),
header: translate( 'Find the perfect free WordPress theme for your blog or website.' ),
description: translate(
'Browse all free themes for WordPress.com. Try one or try them all. Risk-free.'
),
},
premium: {
title: translate( 'Premium WordPress Themes' ),
header: translate( 'Find the perfect premium WordPress theme for your blog or website.' ),
description: translate(
"Browse all premium themes for WordPress.com. Available on all Premium, Business, and Ecommerce plans. Activate the one that's right for you."
),
},
marketplace: {
title: translate( 'Partner WordPress Themes' ),
header: translate( 'Find the perfect partner WordPress theme for your blog or website.' ),
description: translate(
"Browse all partner themes for WordPress.com. Activate the one that's right for you, risk-free for 14 days."
),
},
},
blog: {
all: {
title: translate( 'Blog WordPress Themes' ),
header: translate( 'Find the perfect theme for your blog.' ),
description: translate(
"Start your blog with the perfect theme. Browse high-quality, professionally-designed options. Then, activate the one that's right for you."
),
},
free: {
title: translate( 'Free Blog WordPress Themes' ),
header: translate( 'Discover the perfect free theme for your blog.' ),
description: translate(
"Launch your blog with the perfect free theme. Browse high-quality, professionally-designed options. Then, activate the one that's right for you."
),
},
premium: {
title: translate( 'Premium Blog WordPress Themes' ),
header: translate( 'Choose premium themes for your blog.' ),
description: translate(
"Enhance your blog with the perfect premium theme. Available on all Premium, Business, and Ecommerce plans. Activate the one that's right for you."
),
},
marketplace: {
title: translate( 'Partner Blog WordPress Themes' ),
header: translate( 'Select partner themes for your blog.' ),
description: translate(
"Improve your blog with the perfect partner theme. Browse high-quality, professionally-designed options. Then, purchase the one that's right for you."
),
},
},
business: {
all: {
title: translate( 'Business WordPress Themes' ),
header: translate( 'Find the perfect theme for your business website.' ),
description: translate(
"Start your business website with the perfect theme. Browse high-quality, professionally-designed options. Then, activate the one that's right for you."
),
},
free: {
title: translate( 'Free Business WordPress Themes' ),
header: translate( 'Discover the perfect free theme for your business website.' ),
description: translate(
"Launch your business website with the perfect free theme. Browse high-quality, professionally-designed options. Then, activate the one that's right for you."
),
},
premium: {
title: translate( 'Premium Business WordPress Themes' ),
header: translate( 'Choose premium themes for your business website.' ),
description: translate(
"Enhance your business website with the perfect premium theme. Available on all Premium, Business, and Ecommerce plans. Activate the one that's right for you."
),
},
marketplace: {
title: translate( 'Partner Business WordPress Themes' ),
header: translate( 'Select partner themes for your business website.' ),
description: translate(
"Improve your business website with the perfect partner theme. Browse high-quality, professionally-designed options. Then, purchase the one that's right for you."
),
},
},
portfolio: {
all: {
title: translate( 'Portfolio WordPress Themes' ),
header: translate( 'Find the perfect theme for your portfolio.' ),
description: translate(
"Start your portfolio with the perfect theme. Browse high-quality, professionally-designed options. Then, activate the one that's right for you."
),
},
free: {
title: translate( 'Free Portfolio WordPress Themes' ),
header: translate( 'Discover the perfect free theme for your portfolio.' ),
description: translate(
"Launch your portfolio website with the perfect free theme. Browse high-quality, professionally-designed options. Then, activate the one that's right for you."
),
},
premium: {
title: translate( 'Premium Portfolio WordPress Themes' ),
header: translate( 'Choose premium themes for your portfolio.' ),
description: translate(
"Enhance your portfolio website with the perfect premium theme. Available on all Premium, Business, and Ecommerce plans. Activate the one that's right for you."
),
},
marketplace: {
title: translate( 'Partner Portfolio WordPress Themes' ),
header: translate( 'Select partner themes for your portfolio.' ),
description: translate(
"Improve your portfolio website with the perfect partner theme. Browse high-quality, professionally-designed options. Then, purchase the one that's right for you."
),
},
},
store: {
all: {
title: translate( 'Store WordPress Themes' ),
header: translate( 'Find the perfect theme for your online store.' ),
description: translate(
"Start your online store with the perfect theme. Choose from options for WordPress and WooCommerce sites. Then, activate the one that's right for you."
),
},
free: {
title: translate( 'Free Store WordPress Themes' ),
header: translate( 'Discover the perfect free theme for your online store.' ),
description: translate(
"Launch your online store with the perfect free theme. Browse high-quality, professionally-designed options. Then, activate the one that's right for you."
),
},
premium: {
title: translate( 'Premium Store WordPress Themes' ),
header: translate( 'Choose premium themes for your online store.' ),
description: translate(
"Enhance your online store with the perfect premium theme. Available on all Premium, Business, and Ecommerce plans. Activate the one that's right for you."
),
},
marketplace: {
title: translate( 'Partner Store WordPress Themes' ),
header: translate( 'Select partner themes for your online store.' ),
description: translate(
"Improve your online store with the perfect partner theme. Browse high-quality, professionally-designed options. Then, purchase the one that's right for you."
),
},
},
about: {
all: {
title: translate( 'About Me WordPress Themes' ),
header: translate( 'Find the perfect theme for your About Me website.' ),
description: translate(
"Start your About Me website with the perfect theme. Browse high-quality, professionally-designed options. Then, activate the one that's right for you."
),
},
free: {
title: translate( 'Free About Me WordPress Themes' ),
header: translate( 'Discover the perfect free theme for your About Me website.' ),
description: translate(
"Launch your About Me website with the perfect free theme. Browse high-quality, professionally-designed options. Then, activate the one that's right for you."
),
},
premium: {
title: translate( 'Premium About Me WordPress Themes' ),
header: translate( 'Choose premium themes for your About Me website.' ),
description: translate(
"Enhance your About Me website with the perfect premium theme. Available on all Premium, Business, and Ecommerce plans. Activate the one that's right for you."
),
},
marketplace: {
title: translate( 'Partner About Me WordPress Themes' ),
header: translate( 'Select partner themes for your About Me website.' ),
description: translate(
"Improve your About Me website with the perfect partner theme. Browse high-quality, professionally-designed options. Then, purchase the one that's right for you."
),
},
},
'link-in-bio': {
all: {
title: translate( 'Link in Bio WordPress Themes' ),
header: translate( 'Find the perfect theme for your link in bio website.' ),
description: translate(
"Start your link in bio website with the perfect theme. Browse high-quality, professionally-designed options. Then, activate the one that's right for you."
),
},
free: {
title: translate( 'Free Link in Bio WordPress Themes' ),
header: translate( 'Discover the perfect free theme for your link in bio website.' ),
description: translate(
"Launch your link in bio website with the perfect free theme. Browse high-quality, professionally-designed options. Then, activate the one that's right for you."
),
},
premium: {
title: translate( 'Premium Link in Bio WordPress Themes' ),
header: translate( 'Choose premium themes for your link in bio website.' ),
description: translate(
"Enhance your link in bio website with the perfect premium theme. Available on all Premium, Business, and Ecommerce plans. Activate the one that's right for you."
),
},
marketplace: {
title: translate( 'Partner Link in Bio WordPress Themes' ),
header: translate( 'Select partner themes for your link in bio website.' ),
description: translate(
"Improve your link in bio website with the perfect partner theme. Browse high-quality, professionally-designed options. Then, purchase the one that's right for you."
),
},
},
newsletter: {
all: {
title: translate( 'Newsletter WordPress Themes' ),
header: translate( 'Find the perfect theme for your site-hosted newsletter.' ),
description: translate(
"Start your newsletter with the perfect theme. Browse high-quality, professionally-designed options. Then, activate the one that's right for you."
),
},
free: {
title: translate( 'Free Newsletter WordPress Themes' ),
header: translate( 'Discover the perfect free theme for your site-hosted newsletter.' ),
description: translate(
"Launch your newsletter with the perfect free theme. Browse high-quality, professionally-designed options. Then, activate the one that's right for you."
),
},
premium: {
title: translate( 'Premium Newsletter WordPress Themes' ),
header: translate( 'Choose premium themes for your site-hosted newsletter.' ),
description: translate(
"Enhance your newsletter with the perfect premium theme. Available on all Premium, Business, and Ecommerce plans. Activate the one that's right for you."
),
},
marketplace: {
title: translate( 'Partner Newsletter WordPress Themes' ),
header: translate( 'Select partner themes for your site-hosted newsletter.' ),
description: translate(
"Improve your newsletter with the perfect partner theme. Browse high-quality, professionally-designed options. Then, purchase the one that's right for you."
),
},
},
};

function findParsedFilter( filter ) {
const splitFilters = filter?.replace( 'subject:', '' )?.split( '+' ) || [];
const categories = Object.keys( THEME_SHOWCASE_LOGGED_OUT_SEO_CONTENT );
const parsedFilter = splitFilters.find( ( f ) => categories.includes( f ) );
return parsedFilter;
}

export default function getThemeShowcaseLoggedOutSeoContent( filter, tier ) {
const parsedFilter = findParsedFilter( filter ) || 'recommended';
const parsedTier = tier || 'all';

const seoContent = THEME_SHOWCASE_LOGGED_OUT_SEO_CONTENT?.[ parsedFilter ]?.[ parsedTier ];

if ( ! seoContent ) {
return THEME_SHOWCASE_LOGGED_OUT_SEO_CONTENT.recommended.all;
}

return seoContent;
}
60 changes: 32 additions & 28 deletions client/my-sites/themes/theme-showcase.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ import {
} from 'calypso/state/themes/selectors';
import { getThemesBookmark } from 'calypso/state/themes/themes-ui/selectors';
import EligibilityWarningModal from './atomic-transfer-dialog';
import getThemeShowcaseLoggedOutSeoContent from './get-theme-showcase-logged-out-seo-content';
import {
addTracking,
appendStyleVariationToThemesPath,
Expand Down Expand Up @@ -451,18 +452,43 @@ class ThemeShowcase extends Component {
filter,
isLoggedIn,
pathName,
title,
filterString,
isMultisite,
locale,
premiumThemesEnabled,
isSiteWooExpressOrEcomFreeTrial,
} = this.props;
const tier = this.props.tier || 'all';
const canonicalUrl = 'https://wordpress.com' + pathName;

const {
title: documentHeadTitle,
metaDescription: metaDescription,
header: themesHeaderTitle,
description: themesHeaderDescription,
} = isLoggedIn
? {
title: this.props.title,
metaDescription: this.props.description,
header: translate( 'Themes' ),
description: translate(
'Select or update the visual design for your site. {{learnMoreLink}}Learn more{{/learnMoreLink}}.',
{
components: {
learnMoreLink: <InlineSupportLink supportContext="themes" showIcon={ false } />,
},
}
),
}
: getThemeShowcaseLoggedOutSeoContent( filter, tier );

const metas = [
{ name: 'description', property: 'og:description', content: this.props.description },
{ property: 'og:title', content: title },
{
name: 'description',
property: 'og:description',
content: metaDescription || themesHeaderDescription,
},
{ property: 'og:title', content: documentHeadTitle },
{ property: 'og:url', content: canonicalUrl },
{ property: 'og:type', content: 'website' },
{ property: 'og:site_name', content: 'WordPress.com' },
Expand Down Expand Up @@ -518,35 +544,13 @@ class ThemeShowcase extends Component {

return (
<div className="theme-showcase">
<DocumentHead title={ title } meta={ metas } />
<DocumentHead title={ documentHeadTitle } meta={ metas } />
<PageViewTracker
path={ this.props.analyticsPath }
title={ this.props.analyticsPageTitle }
properties={ { is_logged_in: isLoggedIn } }
/>
<ThemesHeader
title={
isLoggedIn
? translate( 'Themes' )
: translate( 'Find the perfect theme for your website' )
}
description={
isLoggedIn
? translate(
'Select or update the visual design for your site. {{learnMoreLink}}Learn more{{/learnMoreLink}}.',
{
components: {
learnMoreLink: (
<InlineSupportLink supportContext="themes" showIcon={ false } />
),
},
}
)
: translate(
'Beautiful and responsive WordPress.com themes. Choose from free and premium options for all types of websites. Then, activate the one that is right for you.'
)
}
>
<ThemesHeader title={ themesHeaderTitle } description={ themesHeaderDescription }>
{ isLoggedIn && (
<>
<div className="themes__install-theme-button-container">
Expand Down Expand Up @@ -575,7 +579,7 @@ class ThemeShowcase extends Component {
className="section-nav-tabs__dropdown"
onSelect={ this.onTierSelect }
selectedText={ translate( 'View: %s', {
args: getOptionLabel( tiers, this.props.tier || 'all' ) || '',
args: getOptionLabel( tiers, tier ) || '',
} ) }
options={ tiers }
initialSelected={ this.props.tier }
Expand Down

0 comments on commit 45b2205

Please sign in to comment.