SEO Improvements (#983)

* [site,seo][xs]: add custom _document with lang prop, add description to meta tags, make title larger

* [site,seo][xs]: add apple touch icon, add alt props to images

* [site,seo][xs]: add icon to default seo

* [site,seo][s]: implement next-sitemap

* [site,seo][s]: review page titles

* Rebuild package-lock.json files

* Regenerate package-lock

package-lock.json

@@ -40048,7 +40048,7 @@
     },
     "packages/components": {
       "name": "@portaljs/components",
-      "version": "0.2.0",
+      "version": "0.3.1",
       "dependencies": {
         "@githubocto/flat-ui": "^0.14.1",
         "@heroicons/react": "^2.0.17",

package.json

@@ -1,6 +1,8 @@
 {
   "name": "portaljs",
-  "workspaces": ["./packages/*"],
+  "workspaces": [
+    "./packages/*"
+  ],
   "version": "0.0.0",
   "license": "MIT",
   "scripts": {

site/.gitignore

@@ -35,3 +35,8 @@ yarn-error.log*
 
 # markdowndb
 markdown.db
+
+# seo
+robots.txt
+sitemap-0.xml
+sitemap.xml

site/components/Features.tsx

@@ -58,7 +58,7 @@ export default function Features() {
           >
             <div className="absolute -inset-px rounded-xl border-2 border-transparent opacity-0 [background:linear-gradient(var(--quick-links-hover-bg,theme(colors.sky.50)),var(--quick-links-hover-bg,theme(colors.sky.50)))_padding-box,linear-gradient(to_top,theme(colors.blue.300),theme(colors.blue.400),theme(colors.blue.500))_border-box] group-hover:opacity-100 dark:[--quick-links-hover-bg:theme(colors.slate.800)]" />
             <div className="relative overflow-hidden rounded-xl p-6">
-              <img src={feature.icon} alt="" className="h-24 w-auto" />
+              <img src={feature.icon} alt={feature.title} className="h-24 w-auto" />
               <h2 className="mt-4 font-display text-base text-primary dark:text-primary-dark">
                 <span className="absolute -inset-px rounded-xl" />
                 {feature.title}

site/components/MDXPage.tsx

@@ -12,7 +12,6 @@ export default function MDXPage({ source, frontMatter }) {
         return <LayoutComponent {...frontMatter}>{children}</LayoutComponent>;
     };
 
-
     return (
         <Layout>
             <MDXRemote {...source} components={{ DocsPagination, NextSeo, Hero }} />

site/content/config.js

@@ -1,7 +1,7 @@
 const config = {
-  title: 'PortalJS',
+  title: 'PortalJS - The JavaScript framework for data portals.',
   description:
-    'PortalJS is a framework for rapidly building rich data portal frontends using a modern frontend approach. PortalJS can be used to present a single dataset or build a full-scale data catalog/portal.',
+    'PortalJS is a framework for rapidly building rich data portal frontends using a modern frontend approach.',
   theme: {
     default: 'dark',
     toggleIcon: '/images/theme-button.svg',
@@ -36,6 +36,10 @@ const config = {
   ],
   footerLinks: [],
   nextSeo: {
+    additionalLinkTags: [
+      { rel: 'icon', href: '/favicon.ico' },
+      { rel: 'apple-touch-icon', href: '/icon.png', sizes: '120x120' },
+    ],
     openGraph: {
       type: 'website',
       title:

site/content/guide/index.md

@@ -1,6 +1,8 @@
 ---
 showToc: false
 showSidebar: false
+title: "Markdown-based Websites Guide"
+disableTitle: true
 ---
 
 <Hero title="Markdown-based Websites" subtitle="Create markdown-based website, update it, add collaborators and discover markdown superpowers" />
@@ -79,4 +81,4 @@ Below is a screenshot of how the final website will look like:
 - Visit the site! Yay! Your changes are live! 🎉
 
 > [!tip]
-> Read full tutorial [[edit-a-website-locally|here!]]
+> Read full tutorial [[edit-a-website-locally|here!]]

site/content/howtos/index.md

@@ -1,4 +1,6 @@
-# Guides and tutorials
+---
+title: Guides and Tutorials
+---
 
 - [[howtos/analytics|How to add web analytics?]]
 - [[howtos/seo|How to customize page metadata for SEO?]]

site/layouts/default.tsx

@@ -6,7 +6,7 @@ export default function DefaultLayout({ children, ...frontMatter }) {
           {/* Default layout */}
           {!frontMatter.layout && (
             <>
-              <h1>{frontMatter.title}</h1>
+              {!frontMatter.disableTitle && <h1>{frontMatter.title}</h1>}
               {frontMatter.author && (
                 <div className="-mt-6">
                   <p className="opacity-60 pl-1">{frontMatter.author}</p>

site/layouts/docs.tsx

@@ -13,7 +13,7 @@ export const DocsLayout: React.FC<any> = ({ children, ...frontMatter }) => {
               <time dateTime={created}>{formatDate(created)}</time>
             </p>
           )}
-          {title && <h1>{title}</h1>}
+          {!frontMatter.disableTitle && title && <h1>{title}</h1>}
         </div>
       </header>
       <section>{children}</section>

site/next-sitemap.config.js

@@ -0,0 +1,5 @@
+/** @type {import('next-sitemap').IConfig} */
+module.exports = {
+  siteUrl: process.env.SITE_URL || 'https://portaljs.org',
+  generateRobotsTxt: true,
+}

site/package-lock.json

@@ -50,6 +50,7 @@
       "devDependencies": {
         "@tailwindcss/typography": "^0.5.9",
         "autoprefixer": "^10.4.14",
+        "next-sitemap": "^4.1.8",
         "postcss": "^8.4.22",
         "prettier": "^2.8.7",
         "remark": "^14.0.2",
@@ -229,6 +230,12 @@
       "resolved": "https://registry.npmjs.org/@braintree/sanitize-url/-/sanitize-url-6.0.2.tgz",
       "integrity": "sha512-Tbsj02wXCbqGmzdnXNk0SOF19ChhRU70BsroIi4Pm6Ehp56in6vch94mfbdQ17DozxkL3BAVjbZ4Qc1a0HFRAg=="
     },
+    "node_modules/@corex/deepmerge": {
+      "version": "4.0.43",
+      "resolved": "https://registry.npmjs.org/@corex/deepmerge/-/deepmerge-4.0.43.tgz",
+      "integrity": "sha512-N8uEMrMPL0cu/bdboEWpQYb/0i2K5Qn8eCsxzOmxSggJbbQte7ljMRoXm917AbntqTGOzdTu+vP3KOOzoC70HQ==",
+      "dev": true
+    },
     "node_modules/@docsearch/css": {
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/@docsearch/css/-/css-3.5.0.tgz",
@@ -7087,6 +7094,15 @@
         "node": "*"
       }
     },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/minipass": {
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
@@ -7330,6 +7346,39 @@
         "react-dom": ">=16.0.0"
       }
     },
+    "node_modules/next-sitemap": {
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/next-sitemap/-/next-sitemap-4.1.8.tgz",
+      "integrity": "sha512-XAXpBHX4o89JfMgvrm0zimlZwpu2iBPXHpimJMUrqOZSc4C2oB1Lv89mxuVON9IE8HOezaM+w4GjJxcYCuGPTQ==",
+      "dev": true,
+      "funding": [
+        {
+          "url": "https://github.com/iamvishnusankar/next-sitemap.git"
+        }
+      ],
+      "dependencies": {
+        "@corex/deepmerge": "^4.0.43",
+        "@next/env": "^13.4.3",
+        "fast-glob": "^3.2.12",
+        "minimist": "^1.2.8"
+      },
+      "bin": {
+        "next-sitemap": "bin/next-sitemap.mjs",
+        "next-sitemap-cjs": "bin/next-sitemap.cjs"
+      },
+      "engines": {
+        "node": ">=14.18"
+      },
+      "peerDependencies": {
+        "next": "*"
+      }
+    },
+    "node_modules/next-sitemap/node_modules/@next/env": {
+      "version": "13.4.10",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-13.4.10.tgz",
+      "integrity": "sha512-3G1yD/XKTSLdihyDSa8JEsaWOELY+OWe08o0LUYzfuHp1zHDA8SObQlzKt+v+wrkkPcnPweoLH1ImZeUa0A1NQ==",
+      "dev": true
+    },
     "node_modules/next-themes": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.2.1.tgz",

site/package.json

@@ -6,6 +6,7 @@
     "dev": "npm run mddb && next dev",
     "build": "next build",
     "prebuild": "npm run mddb && node ./scripts/fix-symlinks.mjs",
+    "postbuild": "next-sitemap",
     "start": "next start",
     "mddb": "mddb content"
   },
@@ -52,6 +53,7 @@
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.9",
     "autoprefixer": "^10.4.14",
+    "next-sitemap": "^4.1.8",
     "postcss": "^8.4.22",
     "prettier": "^2.8.7",
     "remark": "^14.0.2",

site/pages/_app.tsx

@@ -47,7 +47,12 @@ function MyApp({ Component, pageProps }) {
       defaultTheme={siteConfig.theme.default}
       forcedTheme={siteConfig.theme.default ? null : 'light'}
     >
-      <DefaultSeo defaultTitle={siteConfig.title} {...siteConfig.nextSeo} />
+      <DefaultSeo
+        defaultTitle={siteConfig.title}
+        description={siteConfig.description}
+        titleTemplate="PortalJS - %s"
+        {...siteConfig.nextSeo}
+      />
 
       {/* Global Site Tag (gtag.js) - Google Analytics */}
       {siteConfig.analytics && (

site/pages/_document.tsx

@@ -0,0 +1,13 @@
+import { Html, Head, Main, NextScript } from 'next/document';
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}

site/pages/blog.tsx

@@ -3,10 +3,12 @@ import computeFields from '@/lib/computeFields';
 import clientPromise from '@/lib/mddb';
 import { BlogsList, SimpleLayout } from '@portaljs/core';
 import * as fs from 'fs';
+import {NextSeo} from 'next-seo';
 
 export default function Blog({ blogs }) {
   return (
     <>
+      <NextSeo title="Blog posts" />
       <Layout>
         <SimpleLayout title="Blog posts">
           <BlogsList blogs={blogs} />