rel canonical, new vars

.env.defaults

@@ -1,6 +1,6 @@
 # Copy this file to .env to make modifications
 
-# Base config - no need to edit
+# Base config
 MATOMO_URL=https://analytics.lbry.com/
 MATOMO_ID=666
 WEBPACK_WEB_PORT=9090
@@ -13,10 +13,18 @@ WELCOME_VERSION=1.0
 # Custom Site info
 DOMAIN=lbry.tv
 URL=https://lbry.tv
+# UI
 SITE_TITLE=lbry.tv
 SITE_NAME=LBRY
 SITE_DESCRIPTION=Meet LBRY, an open, free, and community-controlled content wonderland.
 LOGO_TITLE=lbry.tv
+# OG
+
+OG_TITLE_SUFFIX=| lbry.tv
+OG_HOMEPAGE_TITLE=lbry.tv
+OG_IMAGE_URL=
+SITE_CANONICAL_URL=https://lbry.tv
+# LOCALE
 DEFAULT_LANGUAGE=en
 
 # Custom Content

README.md

@@ -110,6 +110,8 @@ You can run the web version (lbry.tv), the electron app, or both at the same tim
 cp .env.defaults .env
 nano .env
 ```
+- To specify your own OG-IMAGE
+You can either place a png named v2-og.png in the /custom folder or specify the OG_IMAGE_URL in .env
 
 - If you want to customize the homepage content
 

config.js

@@ -2,21 +2,26 @@
 // On Desktop App, this will find .env.defaults and optional .env in root dir
 require('dotenv-defaults').config({silent: false});
 const config = {
+  MATOMO_URL: process.env.MATOMO_URL,
+  MATOMO_ID: process.env.MATOMO_ID,
   WEBPACK_WEB_PORT: process.env.WEBPACK_WEB_PORT,
   WEBPACK_ELECTRON_PORT: process.env.WEBPACK_ELECTRON_PORT,
   WEB_SERVER_PORT: process.env.WEB_SERVER_PORT,
+  LBRY_WEB_API: process.env.LBRY_WEB_API, //api.lbry.tv',
+  LBRY_WEB_STREAMING_API: process.env.LBRY_WEB_STREAMING_API, //cdn.lbryplayer.xyz',
+  WELCOME_VERSION: process.env.WELCOME_VERSION,
   DOMAIN: process.env.DOMAIN,
   URL: process.env.URL,
   SITE_TITLE: process.env.SITE_TITLE,
   SITE_NAME: process.env.SITE_NAME,
   SITE_DESCRIPTION: process.env.SITE_DESCRIPTION,
-  LBRY_WEB_API: process.env.LBRY_WEB_API, //api.lbry.tv',
-  LBRY_WEB_STREAMING_API: process.env.LBRY_WEB_STREAMING_API, //cdn.lbryplayer.xyz',
-  WELCOME_VERSION: process.env.WELCOME_VERSION,
-  DEFAULT_LANGUAGE: process.env.DEFAULT_LANGUAGE,
-  MATOMO_URL: process.env.MATOMO_URL,
-  MATOMO_ID: process.env.MATOMO_ID,
   LOGO_TITLE: process.env.LOGO_TITLE,
+  OG_TITLE_SUFFIX: process.env.OG_TITLE_SUFFIX,
+  OG_HOMEPAGE_TITLE: process.env.OG_HOMEPAGE_TITLE,
+  OG_IMAGE_URL: process.env.OG_IMAGE_URL,
+  SITE_CANONICAL_URL: process.env.SITE_CANONICAL_URL,
+  DEFAULT_LANGUAGE: process.env.DEFAULT_LANGUAGE,
+
   PINNED_URI_1: process.env.PINNED_URI_1,
   PINNED_LABEL_1: process.env.PINNED_LABEL_1,
   PINNED_URI_2: process.env.PINNED_URI_2,

web/src/html.js

@@ -1,4 +1,13 @@
-const { URL, SITE_TITLE, SITE_DESCRIPTION, SITE_NAME } = require('../../config.js');
+const {
+  URL,
+  SITE_TITLE,
+  SITE_CANONICAL_URL,
+  OG_HOMEPAGE_TITLE,
+  OG_TITLE_SUFFIX,
+  OG_IMAGE_URL,
+  SITE_DESCRIPTION,
+  SITE_NAME,
+} = require('../../config.js');
 const { generateEmbedUrl, generateStreamUrl } = require('../../ui/util/web');
 const PAGES = require('../../ui/constants/pages');
 const { getClaim } = require('./chainquery');
@@ -36,18 +45,23 @@ function escapeHtmlProperty(property) {
 function buildOgMetadata(overrideOptions = {}) {
   const { title, description } = overrideOptions;
   const head =
-    '<title>lbry.tv</title>\n' +
+    `<title>${SITE_TITLE}</title>\n` +
     `<meta property="og:url" content="${URL}" />\n` +
-    `<meta property="og:title" content="${title || SITE_TITLE}" />\n` +
+    `<meta property="og:title" content="${(title && title + OG_TITLE_SUFFIX) ||
+      OG_HOMEPAGE_TITLE ||
+      SITE_TITLE}" />\n` +
     `<meta property="og:site_name" content="${SITE_NAME || SITE_TITLE}"/>\n` +
     `<meta property="og:description" content="${description || SITE_DESCRIPTION}" />\n` +
-    `<meta property="og:image" content="${URL}/public/v2-og.png" />\n` +
+    `<meta property="og:image" content="${OG_IMAGE_URL || `${URL}/public/v2-og.png`}" />\n` +
     '<meta name="twitter:card" content="summary_large_image"/>\n' +
-    `<meta name="twitter:title" content="${title || SITE_TITLE}" />\n` +
+    `<meta name="twitter:title" content="${(title && title + OG_TITLE_SUFFIX) ||
+      OG_HOMEPAGE_TITLE ||
+      SITE_TITLE}" />\n` +
     `<meta name="twitter:description" content="${description || SITE_DESCRIPTION}" />\n` +
-    `<meta name="twitter:image" content="${URL}/public/v2-og.png"/>\n` +
+    `<meta name="twitter:image" content="${OG_IMAGE_URL || `${URL}/public/v2-og.png`}"/>\n` +
     `<meta name="twitter:url" content="${URL}" />\n` +
-    '<meta property="fb:app_id" content="1673146449633983" />\n';
+    '<meta property="fb:app_id" content="1673146449633983" />\n' +
+    `<link rel="canonical" content="${SITE_CANONICAL_URL || URL}"/>`;
   return head;
 }
 
@@ -67,7 +81,7 @@ function buildClaimOgMetadata(uri, claim, overrideOptions = {}) {
   const claimDescription =
     claim.description && claim.description.length > 0
       ? escapeHtmlProperty(truncateDescription(claim.description))
-      : `View ${claimTitle} on lbry.tv`;
+      : `View ${claimTitle} on ${SITE_NAME}`;
   const claimLanguage = escapeHtmlProperty(claim.language) || 'en_US';
 
   let imageThumbnail;
@@ -94,13 +108,14 @@ function buildClaimOgMetadata(uri, claim, overrideOptions = {}) {
   head += `<meta property="og:description" content="${description}"/>`;
   head += `<meta property="og:image" content="${claimThumbnail}"/>`;
   head += `<meta property="og:locale" content="${claimLanguage}"/>`;
-  head += `<meta property="og:site_name" content="lbry.tv"/>`;
+  head += `<meta property="og:site_name" content="${SITE_NAME}"/>`;
   head += `<meta property="og:type" content="website"/>`;
   head += `<meta property="og:title" content="${title}"/>`;
   head += `<meta name="twitter:title" content="${title}"/>`;
   // below should be canonical_url, but not provided by chainquery yet
   head += `<meta property="og:url" content="${URL}/${claim.name}:${claim.claim_id}"/>`;
   head += `<meta name="twitter:url" content="${URL}/${claim.name}:${claim.claim_id}"/>`;
+  head += `<link rel="canonical" content="${SITE_CANONICAL_URL || URL}/${claim.name}:${claim.claim_id}"/>`;
 
   if (
     claim.source_media_type &&

web/webpack.config.js

@@ -7,6 +7,7 @@ const { DefinePlugin, ProvidePlugin } = require('webpack');
 const SentryWebpackPlugin = require('@sentry/webpack-plugin');
 const { insertToHead, buildBasicOgMetadata } = require('./src/html');
 
+const CUSTOM_ROOT = path.resolve(__dirname, '../custom');
 const STATIC_ROOT = path.resolve(__dirname, '../static/');
 const UI_ROOT = path.resolve(__dirname, '../ui/');
 const DIST_ROOT = path.resolve(__dirname, 'dist/');
@@ -31,6 +32,12 @@ let plugins = [
       from: `${STATIC_ROOT}/img/v2-og.png`,
       to: `${DIST_ROOT}/public/v2-og.png`,
     },
+    {
+      from: `${CUSTOM_ROOT}/v2-og.png`,
+      to: `${DIST_ROOT}/public/v2-og.png`,
+      force: true,
+      noErrorOnMissing: true,
+    },
     {
       from: `${STATIC_ROOT}/font/`,
       to: `${DIST_ROOT}/public/font/`,