Skip to content

feat: 공유 링크 미리보기 노출을 위한 Open Graph 메타 설정 추가 (#168) #169

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wkdtnqls0506 merged 3 commits into from
Oct 18, 2025
Merged

feat: 공유 링크 미리보기 노출을 위한 Open Graph 메타 설정 추가 (#168) #169

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c7fed4b
feat(#168): SEO를 위한 OpenGraph 추가
wkdtnqls0506 Oct 18, 2025
d76b3e5
chore(#168): 프로젝트 리드미 수정
wkdtnqls0506 Oct 18, 2025
763fa12
fix(#168): 중복 GoogleAnalytics 태그 수정
wkdtnqls0506 Oct 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 6 additions & 31 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,11 @@
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
<img width="1200" height="1675" alt="Image" src="https://github.com/user-attachments/assets/8b8aa8bc-e6b4-4132-897e-dd0a307b8fde" />

## Getting Started
<img width="1200" height="1372" alt="Image" src="https://github.com/user-attachments/assets/9c6d198a-4f53-42d5-9f32-7e516dcb5d7d" />

First, run the development server:
<img width="1200" height="1606" alt="Image" src="https://github.com/user-attachments/assets/cfc0c6a3-da24-4c51-b5af-dcb0a7da4208" />

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
<img width="1200" height="1333" alt="Image" src="https://github.com/user-attachments/assets/a44c8994-c540-4d39-8cc7-91cf71007447" />

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
### 잇다의 기술스택

You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.

This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
<img width="2193" height="279" alt="Image" src="https://github.com/user-attachments/assets/4583e623-af60-4961-bc37-e844162a2442" />
Comment on lines +1 to +11
Copy link

@coderabbitai coderabbitai bot Oct 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

접근성 및 유지보수성 문제: 이미지 기반 README의 한계

README를 완전히 이미지로만 구성한 것은 다음과 같은 문제가 있습니다:

  1. 접근성 문제: 스크린 리더 사용자나 텍스트 기반 브라우저 사용자가 내용을 읽을 수 없습니다.
  2. 검색 불가: 텍스트 콘텐츠가 없어 검색 엔진이나 GitHub 검색에서 발견되기 어렵습니다.
  3. 대체 텍스트 부족: 모든 이미지의 alt 속성이 단순히 "Image"로만 되어 있어 의미를 전달하지 못합니다.
  4. 번역 불가: 다국어 지원이나 자동 번역이 불가능합니다.
  5. 유지보수성: 내용 수정 시 매번 이미지를 재생성해야 합니다.

이미지와 함께 핵심 정보를 텍스트로도 제공하는 것을 권장합니다.

다음과 같이 개선을 제안합니다:

-<img width="1200" height="1675" alt="Image" src="https://github.com/user-attachments/assets/8b8aa8bc-e6b4-4132-897e-dd0a307b8fde" />
+# 잇다 (EATDA)
+
+> 우리 동네 사라지면 안 되는 가게를 기록하고, 모두가 함께 응원하는 플랫폼
+
+<img width="1200" height="1675" alt="잇다 플랫폼 소개 및 주요 기능" src="https://github.com/user-attachments/assets/8b8aa8bc-e6b4-4132-897e-dd0a307b8fde" />

-<img width="1200" height="1372" alt="Image" src="https://github.com/user-attachments/assets/9c6d198a-4f53-42d5-9f32-7e516dcb5d7d" />
+## 시작하기
+
+<img width="1200" height="1372" alt="프로젝트 설치 및 실행 가이드" src="https://github.com/user-attachments/assets/9c6d198a-4f53-42d5-9f32-7e516dcb5d7d" />
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<img width="1200" height="1675" alt="Image" src="https://github.com/user-attachments/assets/8b8aa8bc-e6b4-4132-897e-dd0a307b8fde" />
## Getting Started
<img width="1200" height="1372" alt="Image" src="https://github.com/user-attachments/assets/9c6d198a-4f53-42d5-9f32-7e516dcb5d7d" />
First, run the development server:
<img width="1200" height="1606" alt="Image" src="https://github.com/user-attachments/assets/cfc0c6a3-da24-4c51-b5af-dcb0a7da4208" />
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
<img width="1200" height="1333" alt="Image" src="https://github.com/user-attachments/assets/a44c8994-c540-4d39-8cc7-91cf71007447" />
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
### 잇다의 기술스택
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
<img width="2193" height="279" alt="Image" src="https://github.com/user-attachments/assets/4583e623-af60-4961-bc37-e844162a2442" />
# 잇다 (EATDA)
> 우리 동네 사라지면 안 되는 가게를 기록하고, 모두가 함께 응원하는 플랫폼
<img width="1200" height="1675" alt="잇다 플랫폼 소개 및 주요 기능" src="https://github.com/user-attachments/assets/8b8aa8bc-e6b4-4132-897e-dd0a307b8fde" />
## 시작하기
<img width="1200" height="1372" alt="프로젝트 설치 및 실행 가이드" src="https://github.com/user-attachments/assets/9c6d198a-4f53-42d5-9f32-7e516dcb5d7d" />
<img width="1200" height="1606" alt="Image" src="https://github.com/user-attachments/assets/cfc0c6a3-da24-4c51-b5af-dcb0a7da4208" />
<img width="1200" height="1333" alt="Image" src="https://github.com/user-attachments/assets/a44c8994-c540-4d39-8cc7-91cf71007447" />
### 잇다의 기술스택
<img width="2193" height="279" alt="Image" src="https://github.com/user-attachments/assets/4583e623-af60-4961-bc37-e844162a2442" />
🤖 Prompt for AI Agents 
README.md around lines 1-11: the file currently uses only images (alt="Image")
which breaks accessibility, searchability, translation and maintainability;
replace or augment the images with real markdown text: add proper headings and
plain-text summaries for each image, provide meaningful alt text and short
captions, extract any textual content from images into markdown sections
(overview, tech stack, features, usage, contribution), ensure section headings
are in English/Korean or provide language tags for translations, and keep images
as supplementary assets referenced from the appropriate sections so future
updates can edit text without re-exporting images.

Binary file added public/images/opengraph-image.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
32 changes: 31 additions & 1 deletion src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,37 @@ import { UploadProvider } from "./story/register/_contexts";

export const metadata: Metadata = {
title: "잇다",
description: "Generated by create next app",
description:
"우리 동네 사라지면 안 되는 가게를 기록하고, 모두가 함께 응원하는 플랫폼 잇다",
openGraph: {
title: "잇다",
description:
"우리 동네 사라지면 안 되는 가게를 기록하고, 모두가 함께 응원하는 플랫폼 잇다",
images: "/images/opengraph-image.png",
type: "website",
siteName: "잇다",
url: "https://eatda.net/",
},
Comment on lines +23 to +31
Copy link

@coderabbitai coderabbitai bot Oct 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Open Graph 이미지 경로는 절대 URL을 사용해야 합니다.

현재 images 필드가 상대 경로("/images/opengraph-image.png")를 사용하고 있어 소셜 미디어 플랫폼(카카오톡, 페이스북, 링크드인 등)에서 이미지가 제대로 표시되지 않을 수 있습니다. Open Graph 프로토콜은 절대 URL을 요구합니다.

다음과 같이 수정하세요:

   openGraph: {
     title: "잇다",
     description:
       "우리 동네 사라지면 안 되는 가게를 기록하고, 모두가 함께 응원하는 플랫폼 잇다",
-    images: "/images/opengraph-image.png",
+    images: [
+      {
+        url: "https://eatda.net/images/opengraph-image.png",
+        width: 1200,
+        height: 630,
+        alt: "잇다 - 우리 동네 가게 응원 플랫폼",
+      },
+    ],
     type: "website",
     siteName: "잇다",
     url: "https://eatda.net/",
   },

추가 권장사항: Twitter/X 공유를 위한 twitter 메타데이터도 고려해보세요:

twitter: {
  card: "summary_large_image",
  title: "잇다",
  description: "우리 동네 사라지면 안 되는 가게를 기록하고, 모두가 함께 응원하는 플랫폼 잇다",
  images: ["https://eatda.net/images/opengraph-image.png"],
},
🤖 Prompt for AI Agents 
In src/app/layout.tsx around lines 23 to 31, the openGraph.images value uses a
relative path which can prevent social platforms from fetching the image; update
images to an absolute URL (https://eatda.net/images/opengraph-image.png) and
ensure the openGraph.url matches your production domain, and optionally add a
twitter metadata block (card, title, description, images as absolute URL(s)) to
support Twitter/X sharing.

keywords: [
"잇다",
"eatda",
"잇다 플랫폼",
"잇다 맛집",
"우리동네 맛집",
"동네 가게",
"로컬 맛집",
"숨은 맛집",
"사라지면 안 되는 가게",
"응원하는 가게",
"단골 가게",
"가게 이야기",
"맛집 기록",
"가게 추천",
"맛집 공유",
"가게 등록",
"소상공인",
"동네의 이야기",
],
};

export const viewport: Viewport = {
Expand Down