Improve social media presence

KasperiP commented 1 year ago

The links to Testausserveri could be improved on several platforms by adding OpenGraph and Twitter meta tags. Currently, only projects have OpenGraph meta tags, but in my opinion, the main page should also be visually appealing on social media. For example, a graphic of Testausserveri could be displayed when the page is linked. 😸

Reference:

Eldemarkki commented 1 year ago

If we migrate to the Next.js App Router (currently beta, but soon stable), there is a pretty nice Metadata API that can be used for this.

https://beta.nextjs.org/docs/api-reference/metadata

antoKeinanen commented 1 year ago

I implemented something like this for a project I was working on. It could also work well here.

export default function Meta({
  title,
  description,
  image,
  url,
  contentType,
}: Meta) {
  if (!url && typeof window !== "undefined") {
    url = window.location.href;
  }

  return (
    <Head>
      {/* Content metadata */}
      <title>{title}</title>
      <meta name="description" content={description} />
      <meta property="description" content={description} />

      {/* Open Graph metadata*/}
      <meta property="og:title" content={title} />
      <meta property="og:url" content={url} />
      <meta property="og:type" content={contentType || "website"} />
      <meta property="og:description" content={description} />
      <meta property="og:image" content={image} />

      {/* Twitter metadata */}
      <meta name="twitter:title" content={title} />
      <meta property="twitter:url" content={url} />
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:description" content={description} />
      <meta name="twitter:image" content={image} />
    </Head>
  );
}

KasperiP commented 1 year ago

As @Eldemarkki already mentioned app router has new metadata API and since app router is now stable I don't see any point using the old way.

ahnl commented 1 year ago

FYI:

OpenGraph already implemented in following routes:

Testausserveri / testausserveri.fi

Improve social media presence #93