Theo's Typesafe Cult•16mo ago

Twitter link previews with t3?

Hey gang, Andrew with river here. I am trying to setup link previews for some of the routes in our application, the open graph link previews are working (ex: https://app.getriver.io/events), but they do not work for twitter links (following the documentation)

import Head from "next/head";

type MetaTagsProps = {
  title: string;
  description: string;
  route: string;
  image?: string;
};

const MetaTags = (props: MetaTagsProps) => {
  const host =
    process.env.NODE_ENV === "production"
      ? "https://app.getriver.io"
      : "http://localhost:3000";
  const image = `${host}/Icon_Neon%20Green.png`;
  const url = `${host}${props.route}`;

  console.log("META TAGS", props, "IMAGE", props.image ?? image);
  return (
    <Head>
      {/* Twitter */}
      <meta name="twitter:card" content="summary" />
      <meta name="twitter:title" content={props.title} />
      <meta name="twitter:description" content={props.description} />
      <meta name="twitter:image" content={image} />

      {/* Open Graph */}
      <meta property="og:title" content={props.title} />
      <meta property="og:description" content={props.description} />
      <meta property="og:image" content={props.image ?? image} />
      <meta property="og:url" content={url} />
      <meta property="og:type" content="website" />
    </Head>
  );
};

export default MetaTags;

import Head from "next/head";

type MetaTagsProps = {
  title: string;
  description: string;
  route: string;
  image?: string;
};

const MetaTags = (props: MetaTagsProps) => {
  const host =
    process.env.NODE_ENV === "production"
      ? "https://app.getriver.io"
      : "http://localhost:3000";
  const image = `${host}/Icon_Neon%20Green.png`;
  const url = `${host}${props.route}`;

  console.log("META TAGS", props, "IMAGE", props.image ?? image);
  return (
    <Head>
      {/* Twitter */}
      <meta name="twitter:card" content="summary" />
      <meta name="twitter:title" content={props.title} />
      <meta name="twitter:description" content={props.description} />
      <meta name="twitter:image" content={image} />

      {/* Open Graph */}
      <meta property="og:title" content={props.title} />
      <meta property="og:description" content={props.description} />
      <meta property="og:image" content={props.image ?? image} />
      <meta property="og:url" content={url} />
      <meta property="og:type" content="website" />
    </Head>
  );
};

export default MetaTags;

This is the component I am using. Link previews work for everything except twitter... 🤔 Anyone had problems or experience with this?

4 Replies

BigLungOP•16mo ago

https://app.getriver.io/events

Events Page

Browse upcoming and past events.

BigLungOP•16mo ago

notice how link preview works for discord, but not for twitter 🤔

Sturlen•16mo ago

seems like all the tags are there and Opengraph.xyz also agrees that it should be working with twitter: https://www.opengraph.xyz/url/https%3A%2F%2Fapp.getriver.io%2Fevents might be a temporary twitter issue

OpenGraph

OpenGraph - Preview Social Media Share and Generate Metatags

OpenGraph is the easiest way to preview and generate open graph meta tags for any website.

BigLungOP•16mo ago

I found the issue. I just forgot one of the meta tags for twitter it looks like??? Here is the working Meta tags component for future reference

import Head from "next/head";

type MetaTagsProps = {
  title: string;
  description: string;
  route: string;
  image?: string;
};

const MetaTags = (props: MetaTagsProps) => {
  const host =
    process.env.NODE_ENV === "production"
      ? "https://app.getriver.io"
      : "http://localhost:3000";
  const logo = `${host}/Icon_Neon%20Green.png`;
  const image = props.image ?? logo;
  const url = `${host}${props.route}`;

  return (
    <Head>
      {/* Twitter */}
      <meta name="twitter:card" content="summary_large_image" />{" "}
      <meta name="twitter:site" content="https://twitter.com/getriver_io" />
      <meta name="twitter:title" content={props.title} />
      <meta name="twitter:description" content={props.description} />
      <meta name="twitter:image" content={image} />

      {/* Open Graph */}
      <meta property="og:title" content={props.title} />
      <meta property="og:description" content={props.description} />
      <meta property="og:image" content={image} />
      <meta property="og:url" content={url} />
      <meta property="og:type" content="website" />
    </Head>
  );
};

export default MetaTags;

import Head from "next/head";

type MetaTagsProps = {
  title: string;
  description: string;
  route: string;
  image?: string;
};

const MetaTags = (props: MetaTagsProps) => {
  const host =
    process.env.NODE_ENV === "production"
      ? "https://app.getriver.io"
      : "http://localhost:3000";
  const logo = `${host}/Icon_Neon%20Green.png`;
  const image = props.image ?? logo;
  const url = `${host}${props.route}`;

  return (
    <Head>
      {/* Twitter */}
      <meta name="twitter:card" content="summary_large_image" />{" "}
      <meta name="twitter:site" content="https://twitter.com/getriver_io" />
      <meta name="twitter:title" content={props.title} />
      <meta name="twitter:description" content={props.description} />
      <meta name="twitter:image" content={image} />

      {/* Open Graph */}
      <meta property="og:title" content={props.title} />
      <meta property="og:description" content={props.description} />
      <meta property="og:image" content={image} />
      <meta property="og:url" content={url} />
      <meta property="og:type" content="website" />
    </Head>
  );
};

export default MetaTags;

Gaming

Programming

Twitter link previews with t3?