feat: 공유 링크 미리보기 노출을 위한 Open Graph 메타 설정 추가 (#168)#169
Merged
wkdtnqls0506 merged 3 commits intomainfrom Oct 18, 2025
Merged
Conversation
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
💡 Enable Vercel Agent with $100 free credit for automated AI reviews |
워크스루README의 주요 텍스트 섹션을 모두 이미지 임베드로 교체하고, 앱 레이아웃의 metadata를 확장해 Open Graph 필드와 키워드 배열을 추가했습니다. 변경 사항
예상 코드 리뷰 노력🎯 3 (Moderate) | ⏱️ ~20 minutes 레이아웃 메타데이터 확장과 문서 대체가 주된 변경으로, 서로 다른 파일에 걸친 논리 추가가 있어 중간 수준 검토가 필요합니다. 시
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
🎨 Storybook Preview: https://685a32a1c0bbd269fdb67af4-ymtzhmntio.chromatic.com/ |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/app/layout.tsx (1)
76-76: 중복된 GoogleAnalytics 컴포넌트 제거 필요GoogleAnalytics 컴포넌트가 두 번 선언되어 있습니다:
- Line 76:
<html>태그 내부 (올바른 위치)- Line 113:
</body>태그 이후 (중복 및 잘못된 위치)이는 다음과 같은 문제를 발생시킵니다:
- 중복 추적: 모든 이벤트가 두 번 기록되어 분석 데이터가 부정확해집니다.
- 잘못된 HTML 구조:
</body>태그 이후에 콘텐츠가 오는 것은 유효하지 않은 HTML입니다.Line 113의 중복 선언을 제거해주세요.
다음 diff를 적용하여 중복을 제거하세요:
</div> </body> - <GoogleAnalytics gaId='G-H7HEQSEBC7' /> </html>Also applies to: 113-113
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
public/images/opengraph-image.pngis excluded by!**/*.png
📒 Files selected for processing (2)
README.md(1 hunks)src/app/layout.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/nextjs-folder-structure.mdc)
All files must use TypeScript.
Files:
src/app/layout.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: test
🔇 Additional comments (1)
src/app/layout.tsx (1)
32-51: SEO 키워드 구성이 잘 되어 있습니다한국어 검색을 위한 키워드가 포괄적으로 잘 구성되어 있습니다. 브랜드명, 플랫폼 특성, 주요 기능이 모두 포함되어 있어 검색 엔진 최적화에 도움이 될 것입니다.
Comment on lines
+1
to
+11
| <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" /> |
There was a problem hiding this comment.
접근성 및 유지보수성 문제: 이미지 기반 README의 한계
README를 완전히 이미지로만 구성한 것은 다음과 같은 문제가 있습니다:
- 접근성 문제: 스크린 리더 사용자나 텍스트 기반 브라우저 사용자가 내용을 읽을 수 없습니다.
- 검색 불가: 텍스트 콘텐츠가 없어 검색 엔진이나 GitHub 검색에서 발견되기 어렵습니다.
- 대체 텍스트 부족: 모든 이미지의 alt 속성이 단순히 "Image"로만 되어 있어 의미를 전달하지 못합니다.
- 번역 불가: 다국어 지원이나 자동 번역이 불가능합니다.
- 유지보수성: 내용 수정 시 매번 이미지를 재생성해야 합니다.
이미지와 함께 핵심 정보를 텍스트로도 제공하는 것을 권장합니다.
다음과 같이 개선을 제안합니다:
-<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.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/app/layout.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/nextjs-folder-structure.mdc)
All files must use TypeScript.
Files:
src/app/layout.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: test
🔇 Additional comments (3)
src/app/layout.tsx (3)
21-22: 설명(description) 필드가 잘 구성되었습니다.플랫폼의 목적을 명확하게 전달하는 한국어 설명으로 SEO에 적합합니다.
32-51: 키워드 배열이 잘 구성되었습니다.플랫폼의 핵심 기능과 타겟 사용자를 포괄하는 관련성 높은 키워드들로 SEO에 효과적입니다.
76-76: 이전 리뷰에서 제기된 GoogleAnalytics 중복 문제가 해결되었습니다.현재 코드에서는 GoogleAnalytics 컴포넌트가 한 번만 렌더링되고 있어 중복 문제가 없습니다.
Comment on lines
+23
to
+31
| openGraph: { | ||
| title: "잇다", | ||
| description: | ||
| "우리 동네 사라지면 안 되는 가게를 기록하고, 모두가 함께 응원하는 플랫폼 잇다", | ||
| images: "/images/opengraph-image.png", | ||
| type: "website", | ||
| siteName: "잇다", | ||
| url: "https://eatda.net/", | ||
| }, |
There was a problem hiding this comment.
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
✅ 이슈 번호
close #168
🪄 작업 내용 (변경 사항)
📸 스크린샷
💡 설명
수정전
🗣️ 리뷰어에게 전달 사항
📍 트러블 슈팅
Summary by CodeRabbit
릴리스 노트
문서
개선사항