Merge pull request #58 from AudiusProject/jowlee-seo

SEO friendly changes

package.json

@@ -18,30 +18,31 @@
     "build/*"
   ],
   "devDependencies": {
-    "env-cmd": "^10.1.0",
-    "eslint": "^6.0.1",
-    "eslint-config-synacor": "^3.0.4",
-    "identity-obj-proxy": "^3.0.0",
-    "per-env": "^1.0.2",
+    "env-cmd": "10.1.0",
+    "eslint": "6.0.1",
+    "eslint-config-synacor": "3.0.4",
+    "identity-obj-proxy": "3.0.0",
+    "per-env": "1.0.2",
     "preact-cli": "3.0.0-rc.7",
-    "preact-cli-plugin-env-vars": "^1.2.1",
-    "preact-cli-svg-loader": "^1.0.0",
-    "preact-render-spy": "^1.2.1",
-    "serve": "^11.1.0",
-    "webpack-cli": "^4.5.0"
+    "preact-cli-plugin-env-vars": "1.2.1",
+    "preact-cli-svg-loader": "1.0.0",
+    "preact-render-spy": "1.2.1",
+    "serve": "11.1.0",
+    "webpack-cli": "4.5.0"
   },
   "dependencies": {
-    "@audius/stems": "^0.3.9",
-    "amplitude-js": "^8.11.1",
-    "axios": "^0.19.2",
-    "classnames": "^2.2.6",
-    "copy-to-clipboard": "^3.2.1",
-    "hls.js": "^0.13.1",
-    "preact": "^10.0.1",
-    "preact-render-to-string": "^5.1.0",
-    "preact-router": "^3.0.0",
-    "react-transition-group": "^4.3.0",
-    "simplebar-react": "^2.1.0",
-    "web3-utils": "^1.3.4"
+    "@audius/stems": "0.3.9",
+    "amplitude-js": "8.11.1",
+    "axios": "0.19.2",
+    "classnames": "2.2.6",
+    "copy-to-clipboard": "3.2.1",
+    "hls.js": "0.13.1",
+    "preact": "10.0.1",
+    "preact-render-to-string": "5.1.0",
+    "preact-router": "3.0.0",
+    "react-helmet": "6.1.0",
+    "react-transition-group": "4.3.0",
+    "simplebar-react": "2.1.0",
+    "web3-utils": "1.3.4"
   }
 }

src/components/collectibles/CollectibleDetailsView.jsx

@@ -137,9 +137,9 @@ const CollectibleDetailsView = ({ collectible, user }) => {
 
         <div className={styles.nftInfo}>
           {collectible.name && (
-            <div className={styles.header}>
+            <h1 className={styles.header}>
               {collectible.name}
-            </div>
+            </h1>
           )}
           {collectible.description && (
             <div className={styles.desc}>

src/components/collectibles/CollectibleDetailsView.module.css

@@ -76,6 +76,7 @@
     line-height: 36px;
     letter-spacing: 0.02em;
     color: #858199;
+    margin: 0;
 }
 .nftInfo .desc {
     position: relative;

src/components/collectibles/CollectibleHelmet.jsx

@@ -0,0 +1,51 @@
+import { h } from "preact";
+import { Helmet } from "react-helmet";
+import { getAudiusHostname } from "../../util/getEnv";
+import { getHash } from "./collectibleHelpers";
+
+const CollectibleHelmet = ({ collectiblesInfo }) => {
+  if (!collectiblesInfo) {
+        return null
+    }
+  const { collectible, user } = collectiblesInfo
+  const title = `${collectible.name ? `${collectible.name} • ` : ''}NFT COLLECTIBLES • Audius`
+  const description = collectible.description || (collectible.name ? `Check out ${collectible.name} on Audius · NFT COLLECTIBLES` : 'Check out NFT collectibles on Audius')
+  const hostname = getAudiusHostname()
+  const url = `https://${hostname}/${user.handle}/collectibles/${getHash(collectible.id)}`
+  let type 
+  switch (collectible.mediaType) {
+    case 'IMAGE':
+    case 'GIF':
+        type = 'ImageObject'
+        break
+    case 'VIDEO':
+        type = 'VideoObject'
+        break
+    case 'THREE_D':
+        type = '3DModel'
+        break            
+    default:
+        type = 'MediaObject'
+  }
+  const structuredData = {
+    "@context": "http://schema.googleapis.com/",
+    "@type": type,
+    "@id": url,
+    url: url,
+    name: collectible.name || 'NFT Collectible',
+    description: description,
+  }
+
+  return (
+    <Helmet encodeSpecialCharacters={false}>
+      <title>{title}</title>
+      <meta name="description" content={description} />
+      <link rel="canonical" href={url} />
+      <script type="application/ld+json">
+        {JSON.stringify(structuredData)}
+      </script>
+    </Helmet>
+  )
+}
+
+export default CollectibleHelmet

src/components/collectibles/CollectiblesPlayerContainer.jsx

@@ -4,6 +4,7 @@ import CollectibleGallery from './CollectibleGallery'
 import Card from '../card/Card'
 import CollectiblesHeader from './CollectiblesHeader'
 import styles from './CollectiblesPlayerContainer.module.css'
+import CollectibleHelmet from './CollectibleHelmet'
 
 const CollectiblesPlayerContainer = ({
   collectiblesInfo,
@@ -20,6 +21,9 @@ const CollectiblesPlayerContainer = ({
 
   return (
     <>
+      <CollectibleHelmet
+        collectiblesInfo={collectiblesInfo}
+      />
       {collectiblesInfo.type === 'gallery' && (
         <CollectibleGallery
           collectibles={getCollectiblesArray()}

src/components/collection/CollectionHelmet.jsx

@@ -0,0 +1,37 @@
+import { h } from "preact"
+import { Helmet } from "react-helmet"
+import { getAudiusHostname } from "../../util/getEnv"
+
+const CollectionHelmet = ({ collection }) => {
+  if (!collection) {
+    return null
+  }
+
+  const title = `${collection.name} by ${collection.ownerName} • Audius`
+  const description = `Listen on Audius: ${collection.name}`
+  const hostname = getAudiusHostname()
+  const url = `https://${hostname}/${collection.collectionURLPath}`
+  const isAlbum = collectionURLPath.toLowerCase().includes('album')
+  let type = isAlbum ? 'MusicAlbum' : 'MusicPlaylist'
+  const structuredData = {
+    "@context": "http://schema.googleapis.com/",
+    "@type": type,
+    "@id": url,
+    url: url,
+    name: collection.name,
+    description: description,
+  }
+
+  return (
+    <Helmet encodeSpecialCharacters={false}>
+      <title>{title}</title>
+      <meta name="description" content={description} />
+      <link rel="canonical" href={url} />
+      <script type="application/ld+json">
+        {JSON.stringify(structuredData)}
+      </script>
+    </Helmet>
+  )
+}
+
+export default CollectionHelmet

src/components/collection/CollectionPlayerContainer.jsx

@@ -10,6 +10,7 @@ import { PlayingState } from '../playbutton/PlayButton'
 import { isMobile } from '../../util/isMobile'
 import { PlayerFlavor } from '../app'
 import { formatGateways } from '../../util/gatewayUtil'
+import CollectionHelmet from './CollectionHelmet'
 
 const LISTEN_INTERVAL_SECONDS = 1
 
@@ -103,6 +104,10 @@ const CollectionPlayerContainer = ({
   if (flavor === PlayerFlavor.TINY) return null
 
   return (
+    <>
+      <CollectionHelmet
+        collectoin={collection}
+      />
     <CollectionPlayerCard
       activeTrackIndex={activeTrackIndex}
       backgroundColor={backgroundColor}
@@ -116,6 +121,7 @@ const CollectionPlayerContainer = ({
       seekTo={seekTo}
       isTwitter={isTwitter}
     />
+    </>
   )
 }
 

src/components/titles/Titles.jsx

@@ -21,18 +21,18 @@ const Titles = ({
 
   return (
     <div className={styles.titles}>
-      <div
+      <h1
         className={styles.title}
         onClick={onClickTitle}>
         {title}
-      </div>
-      <div
+      </h1>
+      <h2
         className={styles.artistName}
         onClick={onClickArtist}
       >
         {artistName}
         {isVerified && <IconVerified />}
-      </div>
+      </h2>
     </div>
   )
 }

src/components/titles/Titles.module.css

@@ -10,6 +10,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 18px;
+  margin: 0;
 }
 
 .title:hover {
@@ -24,6 +25,7 @@
   display: flex;
   align-items: center;
   overflow: hidden;
+  margin: 0;
 }
 
 .artistName:hover {

src/components/track/TrackHelmet.jsx

@@ -0,0 +1,34 @@
+import { h } from "preact";
+import { Helmet } from "react-helmet";
+
+const TrackHelmet = ({ track }) => {
+  if (!track) {
+    return null;
+  }
+
+  const title = `${track.title} by ${track.userName} • Audius`;
+  const description = `Listen to ${track.title} on Audius. ${track.userName} · Song`;
+  const hostname = getAudiusHostname()
+  const url = `https://${hostname}/${track.urlPath}`;
+  const structuredData = {
+    "@context": "http://schema.googleapis.com/",
+    "@type": "MusicRecording",
+    "@id": url,
+    url: url,
+    name: track.title,
+    description: description,
+  }
+
+  return (
+    <Helmet encodeSpecialCharacters={false}>
+      <title>{title}</title>
+      <meta name="description" content={description} />
+      <link rel="canonical" href={url} />
+      <script type="application/ld+json">
+        {JSON.stringify(structuredData)}
+      </script>
+    </Helmet>
+  );
+};
+
+export default TrackHelmet;

src/components/track/TrackPlayerContainer.jsx

@@ -7,6 +7,7 @@ import TrackPlayerTiny from './TrackPlayerTiny'
 import usePlayback from '../../hooks/usePlayback'
 import { PauseContext } from '../pausedpopover/PauseProvider'
 import TrackPlayerCard from './TrackPlayerCard'
+import TrackHelmet from './TrackHelmet'
 import { useSpacebar } from '../../hooks/useSpacebar'
 import { useRecordListens } from '../../hooks/useRecordListens'
 import { PlayingState } from '../playbutton/PlayButton'
@@ -120,26 +121,33 @@ const TrackPlayerContainer = ({
     did404
   }
 
+  let trackPlayer
   if (flavor === PlayerFlavor.COMPACT) {
-    return (
+    trackPlayer = (
       <TrackPlayerCompact
         {...props}
       />
     )
   }
-
-  if (flavor === PlayerFlavor.TINY) {
-    return (
+  else if (flavor === PlayerFlavor.TINY) {
+    trackPlayer = (
       <TrackPlayerTiny
         {...props}
       />
     )
   }
-
+  else {
+    trackPlayer = (
+      <TrackPlayerCard
+        {...props}
+      />
+    )
+  }
   return (
-    <TrackPlayerCard
-      {...props}
-    />
+    <>
+      <TrackHelmet track={track} />
+      {trackPlayer}
+    </>
   )
 }
 

src/components/track/TrackPlayerTiny.jsx

@@ -88,15 +88,15 @@ const TrackPlayerTiny = ({
         <div className={styles.playContainer}>
         </div>
         <div className={styles.infoContainer}>
-          <div
+          <h1
             className={cn(styles.info, {
               [styles.animating]: animating
             })}
             ref={infoRef}
             style={infoStyle}
           >
             {info}
-          </div>
+          </h1>
         </div>
         <div className={styles.logoContainer}>
           <AudiusLogoGlyph

src/components/track/TrackPlayerTiny.module.css

@@ -74,6 +74,7 @@
   letter-spacing: 0.01em;
   color: var(--neutral);
   white-space: nowrap;
+  margin: 0;
   margin-left: 24px;
 
   display: inline-block;