Adjust meta data to allow search pages to reflect search term (#713)

* Adjust meta data to allow search pages to reflect search term

* Update changelog

* Address empty query string case and pass query string to append to og:url

Co-authored-by: Thomas Zarebczan <tzarebczan@users.noreply.github.com>

CHANGELOG.md

@@ -18,6 +18,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Changing the supported language from Filipino to Tagalog _community pr!_ ([#6951](https://github.com/lbryio/lbry-desktop/pull/6951))
 - Don't show countdown to next item in list ([#6921](https://github.com/lbryio/lbry-desktop/pull/6921))
 - Changed "View List" popup option to link, so can be opened on a new tab ([#6921](https://github.com/lbryio/lbry-desktop/pull/6921))
+- Changed search page metadata to reflect the search term([713](https://github.com/OdyseeTeam/odysee-frontend/pull/713))
 
 ### Fixed
 - Clicking on the title of a floating player will take you back to the list ([#6921](https://github.com/lbryio/lbry-desktop/pull/6921))

web/src/category-metadata.js

@@ -3,74 +3,85 @@ const PAGES = require('../../ui/constants/pages');
 // Uncomment as you add metadata
 
 module.exports.CATEGORY_METADATA = {
-  [PAGES.BIG_HITS]: {
+  [PAGES.BIG_HITS]: () => ({
     title: 'Big Hits',
     description: 'Animation, pop culture, comedy, and all the other weird on Odysee',
     image: '',
-  },
+  }),
-  // [PAGES.CREATIVE_ARTS]: {
+  [PAGES.COMMUNITY]: () => ({
-  //   title: 'Creative Arts',
-  //   description: '',   <----- FILL IN PLEASE
-  //   image: '',         <----- FILL IN PLEASE
-  // },
-  [PAGES.COMMUNITY]: {
     title: 'The Universe',
     description: 'Podcasts, life, learning, and everything else on Odysee',
     image: '',
-  },
+  }),
-  //   [PAGES.ENLIGHTENMENT]: {
+  // [PAGES.CREATIVE_ARTS]: () => ({
+  //   title: 'Creative Arts',
+  //   description: '',   <----- FILL IN PLEASE
+  //   image: '',         <----- FILL IN PLEASE
+  // }),
+  //   [PAGES.ENLIGHTENMENT]: () => ({
   //     title: '',
   //     description: '',
   //     image: '',
-  //   },
+  //   }),
-  [PAGES.FINANCE]: {
+  [PAGES.FINANCE]: () => ({
     title: 'Finance 2.0',
     description: 'Crypto, Money, Economics, Markets on Odysee ',
     image: 'https://cdn.lbryplayer.xyz/speech/category-finance:c.jpg',
-  },
+  }),
-  [PAGES.GAMING]: {
+  [PAGES.GAMING]: () => ({
     title: 'Gaming',
     description: 'Pew pew bzzz gaming on Odysee',
     image: 'https://cdn.lbryplayer.xyz/speech/category-gaming:5.jpg',
-  },
+  }),
-  [PAGES.GENERAL]: {
+  [PAGES.GENERAL]: () => ({
     title: 'Cheese',
     description: 'Cheese is the answer to life, the universe, and everything. We have primo cheese on Odysee',
     image: 'https://cdn.lbryplayer.xyz/speech/category-primary1:5.jpg',
-  },
+  }),
-  [PAGES.LAB]: {
+  [PAGES.LAB]: () => ({
     title: 'Lab',
     description: 'Science - the real kind, on Odysee',
     image: '',
-  },
+  }),
-  [PAGES.NEWS]: {
+  [PAGES.NEWS]: () => ({
     title: 'News & Politics',
     description: `Stay up to date with all that's happening around the world on Odysee`,
     image: '',
-  },
+  }),
-  [PAGES.MOVIES]: {
+  [PAGES.MOVIES]: () => ({
     title: 'Movies',
     description: `Do you love B rated movies? We've got you covered on Odysee`,
     image: 'https://cdn.lbryplayer.xyz/speech/category-movies:2.jpg',
-  },
+  }),
-  [PAGES.MUSIC]: {
+  [PAGES.MUSIC]: () => ({
     title: 'Music',
     description: 'All the songs, reviews, covers, and how-tos you love on Odysee',
     image: 'https://cdn.lbryplayer.xyz/speech/category-music:8.jpg',
+  }),
+  [PAGES.SEARCH]: ({ q = '' }) => {
+    if (!q) {
+      return {};
+    }
+
+    return {
+      title: `"${q}" Search Results`,
+      description: `Find the best "${q}" content on Odysee`,
+      urlQueryString: `q=${q}`,
+    };
   },
-  [PAGES.TECH]: {
+  [PAGES.TECH]: () => ({
     title: 'Tech',
     description: 'Hardware, software, startups, photography on Odysee',
     image: '',
-  },
+  }),
-  [PAGES.TECHNOLOGY]: {
+  [PAGES.TECHNOLOGY]: () => ({
     title: 'Tech',
     description: 'Hardware, software, startups, photography on Odysee',
     image: '',
-  },
+  }),
-  [PAGES.WILD_WEST]: {
+  [PAGES.WILD_WEST]: () => ({
     title: 'Wild West',
     description: 'Boosted by user credits, this is what the community promotes on Odysee',
     image: 'https://cdn.lbryplayer.xyz/speech/category-wildwest:1.jpg',
-  },
+  }),
 };

web/src/html.js

@@ -55,7 +55,7 @@ function truncateDescription(description, maxChars = 200) {
   return chars.length > maxChars ? truncated + '...' : truncated;
 }
 
-function getCategoryMeta(path) {
+function getCategoryMetaRenderFn(path) {
   const page = Object.keys(CATEGORY_METADATA).find((x) => path === `/$/${x}` || path === `/$/${x}/`);
   return CATEGORY_METADATA[page];
 }
@@ -64,14 +64,16 @@ function getCategoryMeta(path) {
 // Normal metadata with option to override certain values
 //
 function buildOgMetadata(overrideOptions = {}) {
-  const { title, description, image, path } = overrideOptions;
+  const { title, description, image, path, urlQueryString } = overrideOptions;
-  const cleanDescription = removeMd(description || SITE_DESCRIPTION);
+  const cleanDescription = escapeHtmlProperty(removeMd(description || SITE_DESCRIPTION));
+  const cleanTitle = escapeHtmlProperty(title);
+  const url = (path ? `${URL}${path}` : URL) + (urlQueryString ? `?${urlQueryString}` : '');
 
   const head =
     `<title>${SITE_TITLE}</title>\n` +
     `<meta name="description" content="${cleanDescription}" />\n` +
-    `<meta property="og:url" content="${path ? `${URL}${path}` : URL}" />\n` +
+    `<meta property="og:url" content="${url}" />\n` +
-    `<meta property="og:title" content="${title || OG_HOMEPAGE_TITLE || SITE_TITLE}" />\n` +
+    `<meta property="og:title" content="${cleanTitle || OG_HOMEPAGE_TITLE || SITE_TITLE}" />\n` +
     `<meta property="og:site_name" content="${SITE_NAME || SITE_TITLE}"/>\n` +
     `<meta property="og:description" content="${cleanDescription}" />\n` +
     `<meta property="og:image" content="${
@@ -80,7 +82,7 @@ function buildOgMetadata(overrideOptions = {}) {
     `<meta property="og:type" content="website"/>\n` +
     '<meta name="twitter:card" content="summary_large_image"/>\n' +
     `<meta name="twitter:title" content="${
-      (title && title + ' ' + OG_TITLE_SUFFIX) || OG_HOMEPAGE_TITLE || SITE_TITLE
+      (cleanTitle && cleanTitle + ' ' + OG_TITLE_SUFFIX) || OG_HOMEPAGE_TITLE || SITE_TITLE
     }" />\n` +
     `<meta name="twitter:description" content="${cleanDescription}" />\n` +
     `<meta name="twitter:image" content="${
@@ -345,12 +347,11 @@ async function getHtml(ctx) {
     return insertToHead(html);
   }
 
-  const categoryMeta = getCategoryMeta(requestPath);
+  const categoryMetaFn = getCategoryMetaRenderFn(requestPath);
-  if (categoryMeta) {
+  if (categoryMetaFn) {
+    const categoryMeta = categoryMetaFn(ctx.request.query);
     const categoryPageMetadata = buildOgMetadata({
-      title: categoryMeta.title,
+      ...categoryMeta,
-      description: categoryMeta.description,
-      image: categoryMeta.image,
       path: requestPath,
     });
     return insertToHead(html, categoryPageMetadata);