Merge pull request #29 from SIT-DigiCre/feat/metadata

Meiryo7743 · web-flow · commit b35da255b113 · 2025-05-20T09:46:30.000+09:00
Feat/metadata
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "@iconify-json/material-symbols": "1.2.18",
     "@iconify-json/simple-icons": "1.2.31",
     "@iconify/react": "5.2.1",
+    "@next/third-parties": "15.3.2",
     "@splidejs/react-splide": "0.7.12",
     "@splidejs/splide-extension-video": "0.8.0",
     "autoprefixer": "10.4.21",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/_components/Gallery.tsx b/src/app/_components/Gallery.tsx
@@ -6,9 +6,15 @@ import { Video } from "@splidejs/splide-extension-video";
 import "@splidejs/splide-extension-video/dist/css/splide-extension-video.min.css";
 
 const slideList = [
-  "/img/buff_zavas.webp",
-  "/img/credit_bread.webp",
-  "/img/kawaii_akizuki.webp",
+  {
+    src: "/img/buff_zavas.webp",
+    alt: "頭部がプロテイン飲料のザバスになった男性キャラクター2人を描いたイラスト。1人は白いワイシャツにネクタイとチョッキを着用し、腕を捲っている。もう1人は上裸でこちらを振り向きながら、筋肉を見せつけるようなガッツポーズをしている",
+  },
+  { src: "/img/credit_bread.webp", alt: "モデリングソフトで作った単位パン" },
+  {
+    src: "/img/kawaii_akizuki.webp",
+    alt: "3人の可愛らしい小さな女の子を描いたイラスト。3人とも白地にピンクやグレーのラインが入った不思議なデザインの服を着ている",
+  },
 ];
 
 export default function Gallery() {
@@ -28,10 +34,10 @@ export default function Gallery() {
         extensions={{ Video }}
       >
         {slideList.map((item) => (
-          <SplideSlide key={item}>
+          <SplideSlide key={item.src}>
             <img
-              src={item}
-              alt=""
+              src={item.src}
+              alt={item.alt}
               className="aspect-video object-cover"
             />
           </SplideSlide>
@@ -40,7 +46,7 @@ export default function Gallery() {
         <SplideSlide data-splide-youtube="https://www.youtube.com/watch?v=nnJ5ml6D2UE">
           <img
             src="/img/pv.webp"
-            alt="PV"
+            alt="デジクリ紹介PV 2024 【芝浦工業大学公認サークル】"
             className="aspect-video object-cover"
           />
         </SplideSlide>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -11,8 +11,8 @@ import {
   SimpleIconsYoutube,
 } from "@/components/Icon";
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import { Noto_Sans_JP } from "next/font/google";
+import { GoogleAnalytics } from "@next/third-parties/google";
+import { Inter, Noto_Sans_JP } from "next/font/google";
 import "./globals.css";
 
 const inter = Inter({
@@ -28,42 +28,82 @@ const notoSansJp = Noto_Sans_JP({
 
 const menuList = [
   {
-    icon: <SimpleIconsX className="h-[1.5rem] w-[1.5rem]" />,
+    icon: (
+      <SimpleIconsX
+        className="h-[1.5rem] w-[1.5rem]"
+        aria-hidden
+      />
+    ),
     title: "Twitter / X",
     href: "https://twitter.com/sitdigicre",
   },
   {
-    icon: <SimpleIconsYoutube className="h-[1.5rem] w-[1.5rem]" />,
+    icon: (
+      <SimpleIconsYoutube
+        className="h-[1.5rem] w-[1.5rem]"
+        aria-hidden
+      />
+    ),
     title: "YouTube",
     href: "https://www.youtube.com/@sitdigicre",
   },
   {
-    icon: <SimpleIconsGithub className="h-[1.5rem] w-[1.5rem]" />,
+    icon: (
+      <SimpleIconsGithub
+        className="h-[1.5rem] w-[1.5rem]"
+        aria-hidden
+      />
+    ),
     title: "GitHub",
     href: "https://github.com/SIT-DigiCre",
   },
   {
-    icon: <MaterialSymbolsMail className="h-[1.5rem] w-[1.5rem]" />,
+    icon: (
+      <MaterialSymbolsMail
+        className="h-[1.5rem] w-[1.5rem]"
+        aria-hidden
+      />
+    ),
     title: "お問い合わせ",
     href: "mailto:contact@digicre.net",
   },
   {
-    icon: <MaterialSymbolsArticle className="h-[1.5rem] w-[1.5rem]" />,
+    icon: (
+      <MaterialSymbolsArticle
+        className="h-[1.5rem] w-[1.5rem]"
+        aria-hidden
+      />
+    ),
     title: "デジコアブログ",
     href: "https://blog.digicre.net/",
   },
   {
-    icon: <MaterialSymbolsLogin className="h-[1.5rem] w-[1.5rem]" />,
+    icon: (
+      <MaterialSymbolsLogin
+        className="h-[1.5rem] w-[1.5rem]"
+        aria-hidden
+      />
+    ),
     title: "デジコア",
     href: "https://core3.digicre.net/",
   },
   {
-    icon: <MaterialSymbolsInfo className="h-[1.5rem] w-[1.5rem]" />,
+    icon: (
+      <MaterialSymbolsInfo
+        className="h-[1.5rem] w-[1.5rem]"
+        aria-hidden
+      />
+    ),
     title: "入部希望の方へ",
     href: "https://digicre.net/welcome/",
   },
   {
-    icon: <MaterialSymbolsSchool className="h-[1.5rem] w-[1.5rem]" />,
+    icon: (
+      <MaterialSymbolsSchool
+        className="h-[1.5rem] w-[1.5rem]"
+        aria-hidden
+      />
+    ),
     title: "芝浦工業大学",
     href: "https://www.shibaura-it.ac.jp/",
   },
@@ -86,7 +126,19 @@ export const metadata: Metadata = {
     title: "芝浦工業大学 デジクリ",
     siteName: "芝浦工業大学 デジクリ",
     description: "芝浦工業大学の公認サークル『デジクリ』の Web サイトです。",
-    images: "/ogp.png",
+    images: [
+      {
+        url: "/ogp.png",
+        width: 1200,
+        height: 630,
+        alt: "デジクリ Digital Creation Circle",
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    site: "@sitdigicre",
+    creator: "@sitdigicre",
   },
 };
 
@@ -97,6 +149,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="ja">
+      <GoogleAnalytics gaId="G-5GLTJ9X6XX" />
       <body className={`${notoSansJp.variable} ${inter.variable}`}>
         {children}
 
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,6 +1,7 @@
 import { DigicreLogo, MaterialSymbolsOpenInNew } from "@/components/Icon";
 import Markdown from "react-markdown";
 import Gallery from "./_components/Gallery";
+import type { Metadata } from "next";
 
 const contents = [
   {
@@ -48,6 +49,12 @@ const menu = [
   },
 ];
 
+export const metadata: Metadata = {
+  alternates: {
+    canonical: "https://digicre.net/",
+  },
+};
+
 export default function Home() {
   return (
     <main className="bg-sky">
diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
@@ -2,14 +2,15 @@ import type { SVGProps } from "react";
 
 export function MaterialSymbolsOpenInNew(props: SVGProps<SVGSVGElement>) {
   return (
-    // biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="1em"
       height="1em"
       viewBox="0 0 24 24"
+      role="img"
       {...props}
     >
+      <title>新しいタブで開く</title>
       <path
         fill="currentColor"
         d="M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h7v2H5v14h14v-7h2v7q0 .825-.587 1.413T19 21zm4.7-5.3l-1.4-1.4L17.6 5H14V3h7v7h-2V6.4z"
@@ -162,34 +163,17 @@ export function SimpleIconsGithub(props: SVGProps<SVGSVGElement>) {
   );
 }
 
-export function Digicre(props: SVGProps<SVGSVGElement>) {
-  return (
-    // biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 176 48"
-      width="1em"
-      height="1em"
-      {...props}
-    >
-      <path
-        d="M2 39h4v-1H0v8h6v-1H2v-6zm4 0h2v6H6zm4 1h2v6h-2zm0-2h2v1h-2zm14 2h2v6h-2zm0-2h2v1h-2zm-10 2v6h6v1h-4v1h6v-8h-8Zm6 5h-4v-4h4v4Zm14-4v-1h-3v-2h-2v2h-1v1h1v5h5v-1h-3v-4h3zm4-1v1h4v1h-6v4h8v-6h-6Zm4 5h-4v-2h4v2Zm6 0v-7h-2v8h4v-1h-2zm18-5v-2h-8v8h8v-3h-2v2h-4v-6h4v1h2zm8 0v6h8v-1h-6v-2h6v-3h-8Zm6 2h-4v-1h4v1Zm26-2v6h8v-6h-8Zm6 5h-4v-4h4v4Zm10-4h2v5h-2zm-4-1h-2v6h2v-5h4v-1h-4zm-16 0h2v6h-2zm0-2h2v1h-2zm-2 3v-1h-3v-2h-2v2h-1v1h1v5h5v-1h-3v-4h3zm-14-1v1h4v1h-6v4h8v-6h-6Zm4 5h-4v-2h4v2Zm-20-5h-2v6h2v-5h2v-1h-2zm82 0v6h8v-2h-2v1h-4v-4h4v1h2v-2h-8zm12 5v-7h-2v8h4v-1h-2zm-22-5h2v6h-2zm0-2h2v1h-2zm-2 2v-2h-8v8h8v-3h-2v2h-4v-6h4v1h2zm28 0v6h8v-1h-6v-2h6v-3h-8Zm6 2h-4v-1h4v1Zm-26-2h-2v6h2v-5h2v-1h-2zM29 14H4l3-6h25l-3 6zm-3 10h-6l-4 8H8l4-8H0l3-6h26l-3 6zm4-18h-4l2-6h4l-2 6zm-6 0h-4l2-6h4l-2 6zm38 8H52l3-6h10l-3 6zm-4 10H48l3-6h10l-3 6zm10 8h-8L72 8h8L68 32zM78 6h-4l2-6h4l-2 6zm-6 0h-4l2-6h4l-2 6zm44 26h-8l9-18h-8l-5 10h-8l8-16h24l-12 24zm48 0h-8l12-24h8l-12 24zm-10-8h-10l8-16h8l-5 10h2l-3 6z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
-
 export function DigicreLogo(props: SVGProps<SVGSVGElement>) {
   return (
-    // biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>
     <svg
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 176 48"
       width="1em"
       height="1em"
+      role="img"
       {...props}
     >
+      <title>デジクリ Digital Creation Circle</title>
       <path
         d="M2 39h4v-1H0v8h6v-1H2v-6zm4 0h2v6H6zm4 1h2v6h-2zm0-2h2v1h-2zm14 2h2v6h-2zm0-2h2v1h-2zm-10 2v6h6v1h-4v1h6v-8h-8Zm6 5h-4v-4h4v4Zm14-4v-1h-3v-2h-2v2h-1v1h1v5h5v-1h-3v-4h3zm4-1v1h4v1h-6v4h8v-6h-6Zm4 5h-4v-2h4v2Zm6 0v-7h-2v8h4v-1h-2zm18-5v-2h-8v8h8v-3h-2v2h-4v-6h4v1h2zm8 0v6h8v-1h-6v-2h6v-3h-8Zm6 2h-4v-1h4v1Zm26-2v6h8v-6h-8Zm6 5h-4v-4h4v4Zm10-4h2v5h-2zm-4-1h-2v6h2v-5h4v-1h-4zm-16 0h2v6h-2zm0-2h2v1h-2zm-2 3v-1h-3v-2h-2v2h-1v1h1v5h5v-1h-3v-4h3zm-14-1v1h4v1h-6v4h8v-6h-6Zm4 5h-4v-2h4v2Zm-20-5h-2v6h2v-5h2v-1h-2zm82 0v6h8v-2h-2v1h-4v-4h4v1h2v-2h-8zm12 5v-7h-2v8h4v-1h-2zm-22-5h2v6h-2zm0-2h2v1h-2zm-2 2v-2h-8v8h8v-3h-2v2h-4v-6h4v1h2zm28 0v6h8v-1h-6v-2h6v-3h-8Zm6 2h-4v-1h4v1Zm-26-2h-2v6h2v-5h2v-1h-2zM29 14H4l3-6h25l-3 6zm-3 10h-6l-4 8H8l4-8H0l3-6h26l-3 6zm4-18h-4l2-6h4l-2 6zm-6 0h-4l2-6h4l-2 6zm38 8H52l3-6h10l-3 6zm-4 10H48l3-6h10l-3 6zm10 8h-8L72 8h8L68 32zM78 6h-4l2-6h4l-2 6zm-6 0h-4l2-6h4l-2 6zm44 26h-8l9-18h-8l-5 10h-8l8-16h24l-12 24zm48 0h-8l12-24h8l-12 24zm-10-8h-10l8-16h8l-5 10h2l-3 6z"
         fill="currentColor"
