fix: meta not respecting social variables, customized title

docs/seo.md

@@ -0,0 +1,30 @@
+# SEO
+
+## Web performance
+
+Optimizing websites for speed is one of our core reasons for pursuing a headless approach with WordPress. Since 2018, [page speed has been a factor for Google](https://developers.google.com/web/updates/2018/07/search-ads-speed) in ranking both paid search and ads. In 2021, it took on increased prominence in organic results with an increased emphasis on [Core Web Vitals and page experience](https://developers.google.com/search/blog/2021/04/more-details-page-experience).
+
+Next.js does much of this for us out of the box, but there are a few things to be aware of with our implementation.
+
+- Using [next/image](https://nextjs.org/docs/api-reference/next/image) to generate responsive images. For more, read our image handling docs.
+- Using [next/link](https://nextjs.org/docs/api-reference/next/link) to handle transitions between pages.
+
+## Per page meta tags
+
+The primary way we tackle this is to combine the [WordPress Yoast SEO plugin](https://yoast.com/wordpress/plugins/seo/) with [next-seo](https://github.com/garmeeh/next-seo) to allow editors to populate each page with unique meta tags optimized for both search and social networks.
+
+Inside of our [Meta component](../website/src/components/Meta.js), we merge together defaults defined in `lib/constants.js` and merge in passed in yoast data pulled from graphql via globals context.
+
+## Sitemaps and RSS Feeds
+
+One approach to sitemaps is to [generate them in Next](https://www.npmjs.com/package/next-sitemap). You can similarly create a feed using [some custom code](https://ashleemboyer.com/how-i-added-an-rss-feed-to-my-nextjs-site) and the feed npm package.
+
+We find however that WordPress already does a great job at this, including specific support for features like Google News indexing through a variety of well tested plugins. We've therefore implemented a lightweight proxy that grabs sitemap files from WordPress, serving them on your domain direct to search engines. Inside of [next.config.js](../website/next.config.js) we set a couple rewrites that point any requests to `*sitemap.xml` or `feed*` and retrieve them from the WordPress origin. We rewrite any absolute links so that they point to your next.js public domain.
+
+## Further reading
+
+- [Lighthouse SEO audits](https://web.dev/lighthouse-seo/)
+- [Next.js introduction to SEO](https://nextjs.org/learn/seo/introduction-to-seo/importance-of-seo)
+- Next.js 12 [bot aware ISR fallback](https://nextjs.org/blog/next-12#bot-aware-isr-fallback)
+- [Core web vitals report](https://support.google.com/webmasters/answer/9205520?hl=en)
+- [Vercel Analytics](https://vercel.com/analytics)

website/src/components/Meta.js

@@ -1,43 +1,52 @@
 import GlobalsContext from 'contexts/GlobalsContext';
 import { META } from 'lib/constants';
-import { nextLoader } from 'lib/image-loaders';
 import { NextSeo } from 'next-seo';
 import Head from 'next/head';
 import { useContext } from 'react';
 
 export default function Meta({ title, description, image, seo }) {
   const globals = useContext(GlobalsContext);
 
+  // make sure image is absolute
+  function imagePath(imageUrl) {
+    // if relative, make absolute so that twitter doesn't complain
+    if (
+      imageUrl.indexOf('http://') === -1 &&
+      imageUrl.indexOf('https://') === -1
+    ) {
+      imageUrl = META.url + imageUrl;
+    }
+
+    return imageUrl;
+  }
+
+  // if passing in a title string, append default append if defined in META.
+  let generatedTitle = title ? `${title} ${META.titleAppend}` : '';
+
+  // populate SEO settings with either our SEO values if present, otherwise passed in specifics
   let seoSettings = {
-    title: seo?.title || title ? `${title} ${META.titleAppend}` : '',
+    title: seo?.title || generatedTitle,
     description: seo?.metaDesc || description,
     openGraph: {
-      title: seo?.title || title,
-      description: seo?.opengraphDescription || seo?.metaDesc,
+      title: seo?.opengraphTitle || seo?.title || title,
+      description:
+        seo?.opengraphDescription || seo?.metaDesc || description,
     },
   };
 
+  // check for passed in image from SEO object or image param. Otherwise check for global fallback
   let imageUrl;
 
-  // check for passed in image from SEO object or image param. Otherwise check for global fallback
   if (seo?.opengraphImage?.sourceUrl || image) {
-    imageUrl = nextLoader({
-      src: seo?.opengraphImage?.sourceUrl || image,
-      width: 1200,
-      height: 628,
-    });
+    imageUrl = seo?.opengraphImage?.sourceUrl || image;
   } else if (globals?.seo.openGraph?.defaultImage?.sourceUrl) {
-    imageUrl = nextLoader({
-      src: globals.seo.openGraph.defaultImage.sourceUrl,
-      width: 1200,
-      height: 628,
-    });
+    imageUrl = globals.seo.openGraph.defaultImage.sourceUrl;
   }
 
   if (imageUrl) {
     seoSettings.openGraph.images = [
       {
-        url: META.url + imageUrl,
+        url: imagePath(imageUrl),
         width: 1200,
         height: 628,
       },
@@ -72,6 +81,27 @@ export default function Meta({ title, description, image, seo }) {
           sizes="180x180"
         />
         <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+        {seo?.twitterTitle && (
+          <meta
+            property="twitter:title"
+            content={seo.twitterTitle}
+            key="meta_twitter_title"
+          />
+        )}
+        {seo?.twitterDescription && (
+          <meta
+            property="twitter:description"
+            content={seo.twitterDescription}
+            key="meta_twitter_description"
+          />
+        )}
+        {seo?.twitterImage?.sourceUrl && (
+          <meta
+            property="twitter:image"
+            content={imagePath(seo.twitterImage.sourceUrl)}
+            key="meta_twitter_image"
+          />
+        )}
       </Head>
       <NextSeo {...seoSettings} />
     </>