fix(seo): fix seo score

jwplayer · Jul 6, 2023 · 2274c9b · 2274c9b
1 parent 2d8e4be
commit 2274c9b
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 5 deletions.
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -12,6 +12,7 @@
     "confirm": "Yes"
   },
   "default_site_name": "My OTT Application",
+  "default_description": "JW OTT Webapp is an open-source, dynamically generated video website.",
   "filter_videos_by": "Filter videos by {{name}}",
   "filter_videos_by_genre": "Filter videos by genre",
   "home": "Home",

diff --git a/public/locales/en/demo.json b/public/locales/en/demo.json
@@ -1,5 +1,6 @@
 {
   "app_config_not_found": "Invalid or Missing App Config",
+  "app_config_learn_more": "Learn more about the App Config creation",
   "cancel_config_id": "Cancel",
   "click_to_unselect_config": "(click here to unselect this config)",
   "currently_previewing_config": "You are currently previewing config: '{{configSource}}'",

diff --git a/public/locales/es/common.json b/public/locales/es/common.json
@@ -12,6 +12,7 @@
     "confirm": "Sí"
   },
   "default_site_name": "Mi aplicación OTT",
+  "default_description": "",
   "filter_videos_by": "Filtrar videos por {{name}}",
   "filter_videos_by_genre": "Filtrar videos por género",
   "home": "Inicio",

diff --git a/public/locales/es/demo.json b/public/locales/es/demo.json
@@ -1,5 +1,6 @@
 {
   "app_config_not_found": "Configuración de aplicación inválida o no encontrada",
+  "app_config_learn_more": "",
   "cancel_config_id": "Cancelar",
   "click_to_unselect_config": "(haz clic aquí para deseleccionar esta configuración)",
   "currently_previewing_config": "Actualmente estás previsualizando la configuración: '{{configSource}}'",

diff --git a/src/components/DemoConfigDialog/DemoConfigDialog.tsx b/src/components/DemoConfigDialog/DemoConfigDialog.tsx
@@ -2,6 +2,7 @@ import React, { ChangeEventHandler, MouseEventHandler, useEffect, useState } fro
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router';
 import type { UseQueryResult } from 'react-query';
+import { Helmet } from 'react-helmet';
 
 import styles from './DemoConfigDialog.module.scss';
 
@@ -136,16 +137,24 @@ const DemoConfigDialog = ({ selectedConfigSource, configQuery }: Props) => {
 
   return (
     <>
+      {!configQuery.isSuccess && (
+        <Helmet>
+          <meta name="description" content="Enter the App Config ID" />
+        </Helmet>
+      )}
       {configQuery.isSuccess && (
         <div className={styles.note}>
           <div>{t('currently_previewing_config', { configSource: selectedConfigSource })}</div>
-          <Link onClick={clearConfig}>{t('click_to_unselect_config')}</Link>
+          <Link href="javascript:;" onClick={clearConfig}>
+            {t('click_to_unselect_config')}
+          </Link>
         </div>
       )}
       {!configQuery.isSuccess && (
         <div className={styles.configModal}>
           <ErrorPage
             title={t('app_config_not_found')}
+            learnMoreLabel={t('app_config_learn_more')}
             helpLink={'https://docs.jwplayer.com/platform/docs/ott-create-an-app-config'}
             error={typeof state.error === 'string' ? undefined : state.error}
           >

diff --git a/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap b/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap
@@ -10,6 +10,7 @@ exports[`<DemoConfigDialog> > renders and matches snapshot 1`] = `
     </div>
     <a
       class="_link_a14c64"
+      href="javascript:;"
     >
       click_to_unselect_config
     </a>
@@ -104,7 +105,7 @@ exports[`<DemoConfigDialog> > renders and matches snapshot error dialog 1`] = `
               rel="noreferrer"
               target="_blank"
             >
-              learn_more
+              app_config_learn_more
             </a>
           </p>
         </main>

diff --git a/src/containers/Layout/Layout.tsx b/src/containers/Layout/Layout.tsx
@@ -26,6 +26,7 @@ const Layout = () => {
   const { t, i18n } = useTranslation('common');
   const { config, accessModel } = useConfigStore(({ config, accessModel }) => ({ config, accessModel }), shallow);
   const { menu, assets, siteName, description, styling, features } = config;
+  const metaDescription = description || t('default_description');
   const { clientId } = useClientIntegration();
   const { searchPlaylist } = features || {};
   const { footerText } = styling || {};
@@ -105,11 +106,11 @@ const Layout = () => {
     <div className={styles.layout}>
       <Helmet>
         <title>{siteName}</title>
-        <meta name="description" content={description} />
-        <meta property="og:description" content={description} />
+        <meta name="description" content={metaDescription} />
+        <meta property="og:description" content={metaDescription} />
         <meta property="og:title" content={siteName} />
         <meta name="twitter:title" content={siteName} />
-        <meta name="twitter:description" content={description} />
+        <meta name="twitter:description" content={metaDescription} />
       </Helmet>
       <div className={styles.main}>
         <Header