From e321b0ea7b00f47a5c8552a057edaddbdb5a67ad Mon Sep 17 00:00:00 2001
From: Tarje Lavik <tarje.lavik@gmail.com>
Date: Sun, 10 Oct 2021 14:59:53 +0200
Subject: [PATCH] Add SEO to more pages, inluding [id]
---
.../fragments/humanMadeObjectFields.js | 1 +
web/pages/[...slug].js | 8 ++--
web/pages/aktorer/index.js | 41 +++++++++++--------
web/pages/hendelser/index.js | 25 +++++++++++
web/pages/id/[id].js | 29 +++++++++++--
web/pages/mirador/index.js | 25 +++++++++++
web/pages/register/index.js | 26 +++++++++++-
web/pages/ting/index.js | 30 +++++++++++++-
8 files changed, 159 insertions(+), 26 deletions(-)
diff --git a/web/lib/queries/fragments/humanMadeObjectFields.js b/web/lib/queries/fragments/humanMadeObjectFields.js
index b4c84fb..6eab557 100644
--- a/web/lib/queries/fragments/humanMadeObjectFields.js
+++ b/web/lib/queries/fragments/humanMadeObjectFields.js
@@ -97,6 +97,7 @@ export const humanMadeObjectFields = groq`
}
}
},
+ "excerpt": pt::text(referredToBy[0].body),
referredToBy[] {
...,
body[] {
diff --git a/web/pages/[...slug].js b/web/pages/[...slug].js
index da688c3..0116014 100644
--- a/web/pages/[...slug].js
+++ b/web/pages/[...slug].js
@@ -39,12 +39,12 @@ export default function Page({ data, preview }) {
// Client-side uses the same query, so we may need to filter it down again
const page = filterDataToSingleItem(previewData, preview)
+ // console.log(JSON.stringify(page, null, 2))
const openGraphImages = getOpenGraphImages(
page?.route[0]?.page?.image,
page?.route[0]?.page?.label,
)
- // console.log(JSON.stringify(page, null, 2))
// Notice the optional?.chaining conditionals wrapping every piece of content?
// This is extremely important as you can't ever rely on a single field
@@ -53,8 +53,10 @@ export default function Page({ data, preview }) {
return (
<Layout preview={preview} site={page?.siteSettings}>
<NextSeo
- title={`${page?.route[0]?.page?.label} - ${page?.siteSettings?.title}`}
- description={page?.route[0]?.page?.excerpt ?? page?.siteSettings?.title}
+ title={page?.route[0]?.page?.label}
+ titleTemplate={`%s | ${data?.siteSettings?.title}`}
+ defaultTitle={data?.siteSettings?.title}
+ description={page?.route[0]?.page?.excerpt}
canonical={`${process.env.NEXT_PUBLIC_DOMAIN}${process.env.NEXT_PUBLIC_BASE_PATH}/${page?.route[0].slug.current}`}
openGraph={{
url: `${process.env.NEXT_PUBLIC_DOMAIN}${process.env.NEXT_PUBLIC_BASE_PATH}/${page?.route[0].slug.current}`,
diff --git a/web/pages/aktorer/index.js b/web/pages/aktorer/index.js
index 845d411..ab52966 100644
--- a/web/pages/aktorer/index.js
+++ b/web/pages/aktorer/index.js
@@ -1,4 +1,5 @@
import Head from 'next/head'
+import { NextSeo } from 'next-seo'
import { imageBuilder } from '../../lib/sanity'
import { getAllActors } from '../../lib/api'
import { Grid, Avatar, Box, Heading, Flex, Badge, Container } from '@chakra-ui/react'
@@ -6,27 +7,35 @@ import Layout from '../../components/Layout'
import Link from '../../components/Link'
import PortableTextBlock from '../../components/PT/PortableTextBlock'
import { sortBy } from 'lodash'
+import { getOpenGraphImages } from '../../lib/utils'
export default function Actors({ data, preview }) {
- /* let actors = data.items.reduce((r, e) => {
- // get first letter of name of current element
- let group = e.label[0];
- // if there is no property in accumulator with this letter create it
- if(!r[group]) r[group] = {group, children: [e]}
- // if there is push current element to children array for that letter
- else r[group].children.push(e);
- // return accumulator
- return r;
- }, {})
-
- // since data at this point is an object, to get array of values
- // we use Object.values method
- let result = Object.values(actors) */
-
const sortedItems = sortBy(data.items, 'label.no')
-
+ const openGraphImages = getOpenGraphImages(
+ data?.siteSettings?.openGraph?.image,
+ data?.siteSettings?.title,
+ )
return (
<Layout preview={preview} site={data.siteSettings}>
+ <NextSeo
+ title="Aktører"
+ titleTemplate={`%s | ${data?.siteSettings?.title}`}
+ defaultTitle={data?.siteSettings?.title}
+ description={data?.siteSettings?.openGraph?.description}
+ canonical={`${process.env.NEXT_PUBLIC_DOMAIN}${process.env.NEXT_PUBLIC_BASE_PATH}/register`}
+ openGraph={{
+ url: `${process.env.NEXT_PUBLIC_DOMAIN}${process.env.NEXT_PUBLIC_BASE_PATH}/register`,
+ title: data?.siteSettings?.title,
+ description: data?.siteSettings?.openGraph?.description,
+ images: openGraphImages,
+ site_name: data?.siteSettings?.title,
+ }}
+ twitter={{
+ handle: '@UiB_UB',
+ site: '@UiB_UB',
+ cardType: 'summary_large_image',
+ }}
+ />
<Head>
<title>Aktører</title>
</Head>
diff --git a/web/pages/hendelser/index.js b/web/pages/hendelser/index.js
index c77ea39..1ea4414 100644
--- a/web/pages/hendelser/index.js
+++ b/web/pages/hendelser/index.js
@@ -1,13 +1,38 @@
import Head from 'next/head'
+import { NextSeo } from 'next-seo'
import { orderBy } from 'lodash'
import { getEvents } from '../../lib/api'
import Layout from '../../components/Layout'
import { Container, Heading, SimpleGrid } from '@chakra-ui/react'
import RenderMergedActivityStreamList from '../../components/ActivityStream/MergedActivityStreamList/RenderMergedActivityStreamList'
+import { getOpenGraphImages } from '../../lib/utils'
export default function Events({ data, preview }) {
+ const openGraphImages = getOpenGraphImages(
+ data?.siteSettings?.openGraph?.image,
+ data?.siteSettings?.title,
+ )
return (
<Layout preview={preview} site={data.siteSettings}>
+ <NextSeo
+ title="Hendelser"
+ titleTemplate={`%s | ${data?.siteSettings?.title}`}
+ defaultTitle={data?.siteSettings?.title}
+ description={data?.siteSettings?.openGraph?.description}
+ canonical={`${process.env.NEXT_PUBLIC_DOMAIN}${process.env.NEXT_PUBLIC_BASE_PATH}/register`}
+ openGraph={{
+ url: `${process.env.NEXT_PUBLIC_DOMAIN}${process.env.NEXT_PUBLIC_BASE_PATH}/register`,
+ title: data?.siteSettings?.title,
+ description: data?.siteSettings?.openGraph?.description,
+ images: openGraphImages,
+ site_name: data?.siteSettings?.title,
+ }}
+ twitter={{
+ handle: '@UiB_UB',
+ site: '@UiB_UB',
+ cardType: 'summary_large_image',
+ }}
+ />
<Head>
<title>Hendelser - {data.siteSettings.title}</title>
</Head>
diff --git a/web/pages/id/[id].js b/web/pages/id/[id].js
index 411b043..3f5d330 100644
--- a/web/pages/id/[id].js
+++ b/web/pages/id/[id].js
@@ -1,16 +1,18 @@
-import Layout from '../../components/Layout'
-import { getIdPaths, getType } from '../../lib/api'
import Head from 'next/head'
-import RenderDocument from '../../components/Documents/RenderDocument'
import { usePreviewSubscription } from '../../lib/sanity'
+import { getClient } from '../../lib/sanity.server'
+import { getIdPaths, getType } from '../../lib/api'
import {
groupFields,
humanMadeObjectFields,
pageFields,
siteSettings,
} from '../../lib/queries/fragments'
-import { getClient } from '../../lib/sanity.server'
import { linguisticDocumentFields } from '../../lib/queries/fragments/linguisticDocumentFields'
+import { NextSeo } from 'next-seo'
+import Layout from '../../components/Layout'
+import RenderDocument from '../../components/Documents/RenderDocument'
+import { getOpenGraphImages } from '../../lib/utils'
/**
* Helper function to return the correct version of the document
@@ -43,6 +45,8 @@ export default function Document({ data, preview }) {
const page = filterDataToSingleItem(previewData, preview)
// console.log(JSON.stringify(page, null, 2))
+ const openGraphImages = getOpenGraphImages(page?.item[0]?.image, page?.item[0]?.label.no)
+
// Notice the optional?.chaining conditionals wrapping every piece of content?
// This is extremely important as you can't ever rely on a single field
// of data existing when Editors are creating new documents.
@@ -50,6 +54,23 @@ export default function Document({ data, preview }) {
return (
<Layout preview={preview} site={page?.siteSettings}>
+ <NextSeo
+ title={`${page?.item[0]?.label.no} - ${page?.siteSettings?.title}`}
+ description={page?.item[0]?.excerpt}
+ canonical={`${process.env.NEXT_PUBLIC_DOMAIN}${process.env.NEXT_PUBLIC_BASE_PATH}/${page?.item[0]._id}`}
+ openGraph={{
+ url: `${process.env.NEXT_PUBLIC_DOMAIN}${process.env.NEXT_PUBLIC_BASE_PATH}/${page?.item[0]._id}`,
+ title: page?.item[0]?.label.no,
+ description: page?.item[0]?.excerpt,
+ images: openGraphImages,
+ site_name: page?.siteSettings?.title,
+ }}
+ twitter={{
+ handle: '@UiB_UB',
+ site: '@UiB_UB',
+ cardType: 'summary_large_image',
+ }}
+ />
<Head>
<title>
{`${page?.item[0]?.label?.no || page?.item[0]?.label}`} - {page.siteSettings.title}
diff --git a/web/pages/mirador/index.js b/web/pages/mirador/index.js
index 1f28b5f..76847f8 100644
--- a/web/pages/mirador/index.js
+++ b/web/pages/mirador/index.js
@@ -2,12 +2,37 @@ import { getSiteSettings } from '../../lib/api'
import Layout from '../../components/Layout'
import { Container } from '@chakra-ui/react'
import dynamic from 'next/dynamic'
+import { NextSeo } from 'next-seo'
+import { getOpenGraphImages } from '../../lib/utils'
const MiradorWithNoSSR = dynamic(() => import('../../components/MiradorViewer'), { ssr: false })
export default function Mirador({ data, preview }) {
+ const openGraphImages = getOpenGraphImages(
+ data?.siteSettings?.openGraph?.image,
+ data?.siteSettings?.title,
+ )
return (
<Layout preview={preview} site={data.siteSettings}>
+ <NextSeo
+ title="Hendelser"
+ titleTemplate={`%s | ${data?.siteSettings?.title}`}
+ defaultTitle={data?.siteSettings?.title}
+ description={data?.siteSettings?.openGraph?.description}
+ canonical={`${process.env.NEXT_PUBLIC_DOMAIN}${process.env.NEXT_PUBLIC_BASE_PATH}/register`}
+ openGraph={{
+ url: `${process.env.NEXT_PUBLIC_DOMAIN}${process.env.NEXT_PUBLIC_BASE_PATH}/register`,
+ title: data?.siteSettings?.title,
+ description: data?.siteSettings?.openGraph?.description,
+ images: openGraphImages,
+ site_name: data?.siteSettings?.title,
+ }}
+ twitter={{
+ handle: '@UiB_UB',
+ site: '@UiB_UB',
+ cardType: 'summary_large_image',
+ }}
+ />
<Container h="80vh" my="5" maxW="full">
<MiradorWithNoSSR
height="100%"
diff --git a/web/pages/register/index.js b/web/pages/register/index.js
index 323328c..84c700e 100644
--- a/web/pages/register/index.js
+++ b/web/pages/register/index.js
@@ -1,17 +1,41 @@
import Head from 'next/head'
+import { NextSeo } from 'next-seo'
import { getRegistry } from '../../lib/api'
import Layout from '../../components/Layout'
import { Badge, Heading, Container, List, ListItem, useColorModeValue } from '@chakra-ui/react'
import Link from '../../components/Link'
import { sortBy } from 'lodash'
+import { getOpenGraphImages } from '../../lib/utils'
export default function Register({ data, preview }) {
const tagColor = useColorModeValue('blackAlpha', 'red')
-
const sortedItems = sortBy(data.items, 'label.no')
+ const openGraphImages = getOpenGraphImages(
+ data?.siteSettings?.openGraph?.image,
+ data?.siteSettings?.title,
+ )
return (
<Layout preview={preview} site={data.siteSettings}>
+ <NextSeo
+ title="Register"
+ titleTemplate={`%s | ${data?.siteSettings?.title}`}
+ defaultTitle={data?.siteSettings?.title}
+ description={data?.siteSettings?.openGraph?.description}
+ canonical={`${process.env.NEXT_PUBLIC_DOMAIN}${process.env.NEXT_PUBLIC_BASE_PATH}/register`}
+ openGraph={{
+ url: `${process.env.NEXT_PUBLIC_DOMAIN}${process.env.NEXT_PUBLIC_BASE_PATH}/register`,
+ title: data?.siteSettings?.title,
+ description: data?.siteSettings?.openGraph?.description,
+ images: openGraphImages,
+ site_name: data?.siteSettings?.title,
+ }}
+ twitter={{
+ handle: '@UiB_UB',
+ site: '@UiB_UB',
+ cardType: 'summary_large_image',
+ }}
+ />
<Head>
<title>Register - {data.siteSettings.title}</title>
</Head>
diff --git a/web/pages/ting/index.js b/web/pages/ting/index.js
index f4e025a..e2574cb 100644
--- a/web/pages/ting/index.js
+++ b/web/pages/ting/index.js
@@ -1,13 +1,39 @@
-import { getAllHumanMadeObjects } from '../../lib/api'
import Head from 'next/head'
+import { NextSeo } from 'next-seo'
+import { Container, Heading } from '@chakra-ui/react'
+import { getAllHumanMadeObjects } from '../../lib/api'
import Layout from '../../components/Layout'
import Cards from '../../components/Cards'
-import { Container, Heading } from '@chakra-ui/react'
+import { getOpenGraphImages } from '../../lib/utils'
export default function Items({ data, preview }) {
const { items, siteSettings } = data
+ const openGraphImages = getOpenGraphImages(
+ data?.siteSettings?.openGraph?.image,
+ data?.siteSettings?.title,
+ )
+
return (
<Layout preview={preview} site={siteSettings}>
+ <NextSeo
+ title="Ting"
+ titleTemplate={`%s | ${data?.siteSettings?.title}`}
+ defaultTitle={data?.siteSettings?.title}
+ description={data?.siteSettings?.openGraph?.description}
+ canonical={`${process.env.NEXT_PUBLIC_DOMAIN}${process.env.NEXT_PUBLIC_BASE_PATH}/register`}
+ openGraph={{
+ url: `${process.env.NEXT_PUBLIC_DOMAIN}${process.env.NEXT_PUBLIC_BASE_PATH}/register`,
+ title: data?.siteSettings?.title,
+ description: data?.siteSettings?.openGraph?.description,
+ images: openGraphImages,
+ site_name: data?.siteSettings?.title,
+ }}
+ twitter={{
+ handle: '@UiB_UB',
+ site: '@UiB_UB',
+ cardType: 'summary_large_image',
+ }}
+ />
<Head>
<title>Ting – {siteSettings.title}</title>
</Head>
--
GitLab