Onchain SVG NFTS的Twitter卡-DEV365 开发者社区

我最近有两个项目，我想鼓励用户发布一条推文，该推文将显示OnChain SVG NFT的图像。 Twitter不能提供一种简单的方法来提示用户发布图像，除非您让用户对其Twitter帐户进行身份验证。但是您页面上的OpenGraph Meta标签将附加一张带有开发人员选择的图像的Twitter卡，以链接到您网站的任何推文。

这是告诉用户屏幕页面屏幕截图的优越替代方法，但是如果您想要共享的图像内容是SVG，那么您会有糟糕的时光。

让我们看一下与an onchain SVG NFT on OpenSea链接的推文。

此处没有显示图像，因为链接URL上的OpenGraph Metatag包括SVG图像作为twitter:image metatag的内容：

为了获得图像以显示进料，我们需要为受支持的图像类型提供URL。我不知道受支持的类型是什么，但是我确实知道不支持SVG，而JPG和PNG是。因此，如果我们只有SVG映像，并且希望用户能够在Twitter上共享该图像而无需屏幕截图，而无需登录其Twitter帐户，则我们需要用png或jpg的链接替换元数据中引用的SVG图像图像的版本。

我不特别喜欢管理服务器，当然不想为此功能创建整个SVG-> PNG资产管道。如果您使用nextJ或类似框架，事情会更加复杂 - Twitter机器人不会执行客户端JS，因此具有支持的图像URL的元数据需要呈现服务器端。

让我们看看如何使用NextJS的getServerSideProps和NFT索引服务SimpleHash解决此问题，该服务在NFT数据中提供了很好的覆盖范围，并在其索引中提供了serving cached images specifically for OpenGraph的使用。

getServersideProps

这不是NextJS教程，因此，如果您不熟悉NextJS SSR和getServerSideProps，则应查看NextJS文档。简而言之，getServerSideProps允许我们编写在服务器上执行的一些代码，并将该代码的返回值传递给了在特定URL上使用的NextJS页面组件，从而允许服务器呈现动态代码，而不是客户端。。

这对我们很有用，因为我们需要服务器渲染元数据，以便Twitter知道在推特链接到您的网站时要显示什么。如果您尝试在React组件的render方法中运行相同的代码，则Twitter的bot不会索引结果。

我们将浏览使用getServerSideProps渲染动态元数据的NextJS页面组件的简化示例。

让我们从一个简单的骨架开始，该页面代表在动态路线上显示的单个NFT。我们将其设置为期望NFT的imageUrl支柱：

// app/pages/[nftContractAddress]/[nftTokenId].tsx

import type { GetServerSideProps } from "next";
import Head from "next/head";

interface MetaTagData {
  imageUrl: string;
}

export default function NFTDetailPage({ imageUrl }: MetaTagData) {

  return(
    <>
      <Head>
        {/* our metatags will go here */}
      </Head>
      {/* rest of markup */}
    </>
  );
}

使用该骨架，我们接下来可以添加到我们的getServerSideProps实现的同一文件中。该代码将在服务器上运行，并且需要返回满足页面键入道具的对象。现在，我们将使用占位符图像：

export const getServerSideProps: GetServerSideProps<MetaTagData> = async (context) => {
  return {
    props: {
      imageUrl: "https://placekitten.com/600/400",
    },
  };
};

图像获取

使用我们的骨架，我们现在可以用Twitter支持的图像来代替我们的占位符，该图像表示在请求的动态URL处表示NFT。

SimpleHash对此非常有用 - 他们的API将URL返回JPG，他们托管了Twitter很乐意显示，并且专门针对此OpenGraph进行了优化。您需要一个API键（最多免费的每月请求）。

我们将合同地址和nft下的nft的令牌ID删除，致电SimpleHash API，然后返回一个包含API响应中优化图像URL的对象：

// app/pages/[nftContractAddress]/[nftTokenId].tsx

export const getServerSideProps: GetServerSideProps<MetaTagData> = async (
  context
) => {
  const { nftContractAddress, nftTokenId } = context.params;
  const data = await fetch(
 `https://api.simplehash.com/api/v0/nfts/ethereum/${nftContractAddress}/${nftTokenId}`,
    {
      headers: {
        "X-API-KEY": process.env.NEXT_PUBLIC_SH_KEY!,
      },
    }
  )
    .then((resp) => resp.json())
    .catch((e) => {
      console.error(e);
    });


  return {
    props: {
      imageUrl: data?.previews?.image_opengraph_url || "",
    },
  };
};

此函数将在服务器上执行，并将返回值传递给我们的页面组件作为道具。接下来，我们将使用这些值显示告诉Twitter的metatags，以呈现我们的NFT进纸的图像。

metatags

如果您不熟悉OpenGraph Metatags，则应查看文档，以确切了解您需要显示哪些标签以及可用的选项。目前，我们将进行铁编码一些值，并展示如何使用我们收集的imageUrl。

回到我们的页面组件标记中，让我们添加一些metatags：


// app/pages/[nftContractAddress]/[nftTokenId].tsx

import type { GetServerSideProps } from "next";
import Head from "next/head";

interface MetaTagData {
  imageUrl: string;
}

export default function NFTDetailPage({ imageUrl }: MetaTagData) {

  return(
    <>
      <Head>
        <meta property="twitter:card" content="summary_large_image" />
        <meta property="twitter:url" content="https://mysite.com" />
        <meta property="twitter:title" content="NFT" />
        <meta property="twitter:description" content="This is an NFT" />
        {/* <!-- Dynamic Image Here             vvvvvv --> */}
        <meta property="twitter:image" content={imageUrl} />
      </Head>
      {/* rest of markup */}
    </>
  );
}

// `getServerSideProps` implementation...

缓存

根据您的项目，可以缓存API响应并提供缓存数据，而不是为每个请求查询SimpleHash API，这可能也是一个好主意。这将有助于使您的API请求受到限制，并在数据缓存后更快地为您的页面提供。

我发现Vercel的Redis产品和kv软件包非常简单地设置。

我们需要创建一个客户端并检查缓存是否适当的数据，如果发现命中率，请返回缓存的JSON。否则，我们请求API并将其写入缓存以获取后续请求：

  const store = createClient({
    url: process.env.KV_REST_API_URL!,
    token: process.env.KV_REST_API_TOKEN!,
  });

  const props = await store.hgetall(`${nftContractAddress}-${nftTokenId}`);

  if (props) {
    return {
      props: props as unknown as MetaTagData,
    };
  }

// .... API request

  await store.hset(`${nftContractAddress}-${nftTokenId}`, {
    imageUrl: data?.previews?.image_opengraph_url || "",
  });

装运它

我们完成了！这篇博客文章比编写代码本身花费的时间要长得多。这不是一个令人震惊的功能，但是如果您希望OnChain Art在Twitter和其他社交网络上展示，这感觉就像是完成该目标而无需设置自己的图像转换管道的最佳方法。

这是链接到NFT页面的推文，与我们之前看到的链接到OpenSea的推文相比：

出于调试目的，metatags.io是一个很棒的网站，它将爬网，并向您展示您的链接如何在各种社交平台上出现。

我喜欢OnChain NFTS，令人沮丧的是，在Twitter上使OnChain Art展示需要一些额外的工作。希望这可以帮助您帮助我在Twitter上看到更多OnChain Art。

您可以在@sammybauch上关注我，如果您也喜欢OnChain NFTS，请查看我的OnChain Projects Blitpop和Blockclock，并留意即将推出的一些新系列！</p>