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>
This commit is contained in:
David Granado 2022-01-17 11:40:18 -06:00 committed by GitHub
parent df2ed078b3
commit 783520f734
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 54 additions and 41 deletions

View file

@ -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))

View file

@ -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]: {
// title: 'Creative Arts',
// description: '', <----- FILL IN PLEASE
// image: '', <----- FILL IN PLEASE
// },
[PAGES.COMMUNITY]: {
}),
[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',
},
}),
};

View file

@ -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 cleanDescription = removeMd(description || SITE_DESCRIPTION);
const { title, description, image, path, urlQueryString } = overrideOptions;
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:title" content="${title || OG_HOMEPAGE_TITLE || SITE_TITLE}" />\n` +
`<meta property="og:url" content="${url}" />\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);
if (categoryMeta) {
const categoryMetaFn = getCategoryMetaRenderFn(requestPath);
if (categoryMetaFn) {
const categoryMeta = categoryMetaFn(ctx.request.query);
const categoryPageMetadata = buildOgMetadata({
title: categoryMeta.title,
description: categoryMeta.description,
image: categoryMeta.image,
...categoryMeta,
path: requestPath,
});
return insertToHead(html, categoryPageMetadata);