Merge pull request #1442 from tubone24/ogp

netlify blobを使って保存
tubone24 · Mar 16, 2024 · 047b9aa · 047b9aa
2 parents a38f039 + d307fbd
commit 047b9aa
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 42 deletions.
diff --git a/functions/src/ogp.js b/functions/src/ogp.js
@@ -23,13 +23,19 @@ const font = opentype.loadSync("./functions/src/KaiseiTokumin-Bold.ttf");
 exports.handler = async (event, context) => {
   console.log(event);
   console.log(context);
+  const rawData = Buffer.from(event.blobs, "base64");
+  const data = JSON.parse(rawData.toString("ascii"));
   const queryStringParameters = event.queryStringParameters;
 
   const title = queryStringParameters.title?.toString() || "Hello, World!";
   const user = `by ` + (queryStringParameters.user?.toString() || "tubone24");
 
   try {
-    const ogp = getStore("ogp");
+    const ogp = getStore({
+      name: "ogp",
+      token: data.token,
+      siteID: "3751ef40-b145-4249-9657-39d3fb04ae81",
+    });
     const ogpArrayBuf = await ogp.get(`${encodeURIComponent(title)}`, {
       type: "arrayBuffer",
     });

diff --git a/src/components/SEO/index.spec.tsx b/src/components/SEO/index.spec.tsx
@@ -84,7 +84,9 @@ describe("SEO", () => {
     expect(twitterCreator).toBe("@meitante1conan");
     expect(twitterTitle).toBe("testTitle");
     expect(twitterDescription).toBe("testDescription");
-    expect(twitterImage).toBe("https://example.com/test.png");
+    expect(twitterImage).toBe(
+      "https://blog.tubone-project24.xyz/.netlify/functions/ogp?title=testTitle"
+    );
   });
   it("should render metadata (not article)", () => {
     render(
@@ -166,6 +168,8 @@ describe("SEO", () => {
     expect(twitterTitle).toBe("testTitle");
     expect(twitterCreator).toBe("@meitante1conan");
     expect(twitterDescription).toBe("testDescription");
-    expect(twitterImage).toBe("https://example.com/test.png");
+    expect(twitterImage).toBe(
+      "https://blog.tubone-project24.xyz/.netlify/functions/ogp?title=testTitle"
+    );
   });
 });
diff --git a/src/components/SEO/index.tsx b/src/components/SEO/index.tsx
@@ -97,48 +97,54 @@ const SEO = ({
   siteTitleAlt,
   isPost,
   tag,
-}: Props) => (
-  <Helmet>
-    <title>{title}</title>
+}: Props) => {
+  const ogpImageLink = `https://blog.tubone-project24.xyz/.netlify/functions/ogp?title=${encodeURI(
+    title
+  )}`;
+  return (
+    <Helmet>
+      <title>{title}</title>
 
-    {/* General tags */}
-    <meta name="description" content={description} />
-    <meta name="image" content={image} />
+      {/* General tags */}
+      <meta name="description" content={description} />
+      <meta name="image" content={image} />
 
-    {/* Schema.org tags */}
-    <script type="application/ld+json">
-      {JSON.stringify(
-        schemaOrgJSONLD({
-          url,
-          title,
-          siteTitleAlt,
-          isPost,
-          image,
-          description,
-          tag,
-        })
-      )}
-    </script>
+      {/* Schema.org tags */}
+      <script type="application/ld+json">
+        {JSON.stringify(
+          schemaOrgJSONLD({
+            url,
+            title,
+            siteTitleAlt,
+            isPost,
+            image,
+            description,
+            tag,
+          })
+        )}
+      </script>
 
-    {/* OpenGraph tags */}
-    <meta property="og:url" content={url} />
-    {isPost ? (
-      <meta property="og:type" content="article" />
-    ) : (
-      <meta property="og:type" content="website" />
-    )}
-    <meta property="og:title" content={title} />
-    <meta property="og:description" content={description} />
-    <meta property="og:image" content={image} />
-    <meta property="fb:app_id" content="280941406476272" />
+      {/* OpenGraph tags */}
+      <meta property="og:url" content={url} />
+      {isPost ? (
+        <meta property="og:type" content="article" />
+      ) : (
+        <meta property="og:type" content="website" />
+      )}
+      <meta property="og:title" content={title} />
+      <meta property="og:description" content={description} />
+      <meta property="og:image" content={image} />
+      <meta property="og:locale" content="ja_JP" />
+      <meta property="fb:app_id" content="280941406476272" />
 
-    {/* Twitter Card tags */}
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:creator" content="@meitante1conan" />
-    <meta name="twitter:title" content={title} />
-    <meta name="twitter:description" content={description} />
-    <meta name="twitter:image" content={image} />
-  </Helmet>
-);
+      {/* Twitter Card tags */}
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:creator" content="@meitante1conan" />
+      <meta name="twitter:title" content={title} />
+      <meta name="twitter:description" content={description} />
+      <meta name="twitter:image" content={ogpImageLink} />
+    </Helmet>
+  );
+};
 
 export default SEO;