| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 |
- 상태관리
- FRONT
- type
- VUE
- 리액트
- vue-cli-service
- develop
- 이미지
- frontend
- 시멘틱태그
- components
- vscode
- axios
- form
- Chart
- error
- JavaScript
- 프론트엔드개발
- err
- antd
- 프론트엔드
- NeXT
- Package
- npm
- Download
- 리액트기초
- react
- TradingVIew
- CSS
- useState
- Today
- Total
개발쬬
Next React 구글 구조화 데이터 설정하기 본문
한참 SEO 를 이것저것 찾아보던 중 발견한 궁금증이 생겼다.
대체 이렇게 카테고리별로 깔끔하게 노출되는 웹사이트는 어떻게 만드는거지?
특히나 구글에서는 대형 사이트들은 이런 UI를 가지고 있는 경우가 100 이면 100이였다.
그래서 여기저기 찾아보다가 발견한 구글 검색 센터!
구글 검색 센터
최적화된 SEO 환경을 만들기 위해 참고하는 사이트 입니다. 구글 검색엔진 최적화 기초부터, 크롤링, 색인, 순위 등 다양한 정보를 참고할 수 있다고 한다~ 한마디로 검색엔진 최적화 + 눈에 띄는 UI를 제공해 사이트를 개선시킨다는것에 목적을 가지고 있다고 한다
검색엔진 최적화 개선 문서 | Google 검색 센터 | Documentation | Google for Developers
검색엔진 최적화 문서를 살펴보고 Google 검색에서 사이트의 검색 가능성을 높이는 방법을 알아보세요.
developers.google.com
구조화 데이터 정의
Google 검색은 페이지의 콘텐츠를 파악하기 위해 노력합니다. 페이지에 구조화된 데이터를 포함하면 Google에 페이지 의미에 관한 확실한 단서를 제공하여 내용을 파악하는 데 도움이 됩니다. 구조화된 데이터는 페이지에 관한 정보를 제공하고 페이지 콘텐츠를 분류하기 위한 표준화된 형식으로 예를 들어 레시피 페이지의 경우 재료, 조리 시간, 온도, 칼로리 등이 여기에 해당합니다.
왜 페이지에 구조화된 데이터를 추가하나요?
구조화된 데이터를 추가하면 사용자에게 더욱 눈길을 끄는 검색결과를 제공하여 웹사이트와 더 많이 상호작용하도록 유도할 수 있으며, 이를
리치 결과
라고 합니다. 사이트에 구조화된 데이터를 구현한 웹사이트의 우수사례를 살펴보면 다음과 같습니다.
구조화된 데이터가 작동하는 방식
기타 세부정보를 설명하는 구조화된 JSON-LD 데이터가 있는 경우 "리치 결과"를 표시할 수 있다.
구글에서 제시한 예시 코드
<html>
<head>
<title>How To Make Banana Bread</title>
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Recipe",
"name": "Banana Bread Recipe",
"description": "The best banana bread recipe you'll ever find! Learn how to use up all those extra bananas.",
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": 4.7,
"ratingCount": 123
},
"video": {
"@type": "VideoObject",
"name": "How To Make Banana Bread",
"description": "This is how you make banana bread, in 5 easy steps.",
"contentUrl": "https://www.example.com/video123.mp4"
}
}
</script>
</head>
<body>
</body>
</html>
(참고하기 좋은) 데이터 마크업 예시
다양한 마크업 정보가 나온다. 구조화 데이터를 실제 적용해보니 유형별로 다양하게 설정이 가능했다.
레시피, 정보, 이미지 등 내가 원하는 구조가 있다면 아래 마크업 예시를 참고해서 만들어주면 된다!
(요즘은 AI가 많이 발달했기 때문에 그냥 GPT한테 설명해 달라고 해도 될 듯?)
Google 검색에서 지원하는 구조화된 데이터 마크업 | Google 검색 센터 | Documentation | Google for De
검색결과에 표시되는 방식의 예를 포함하여 Google 검색에 표시될 수 있는 구조화된 데이터 지원 기능을 살펴보세요. 사이트가 Google 검색의 리치 결과에 표시되도록 구조화된 데이터를 추가하는
developers.google.com
구조화 데이터 우수사례
실제 구조화 데이터를 설정하고 나서 얼만큼 개선이 되었는지, 도달률에 대한 내용까지 상세하게 나와있다.
확인해보면서 어떤식으로 적용하는게 좋을지 팀원과 고민해보면 굉장히 좋을 것 같다.
검색엔진 최적화 우수사례 및 성공사례 | Google 검색 센터 | Google for Developers
검색엔진 최적화 우수사례와 성공사례를 둘러보고 Google 검색으로 내 웹사이트에서 더 많은 사용자에게 도달하는 방법을 직접 확인해 보세요.
developers.google.com
리치결과 테스트 사이트
작업이 끝난 구조화 데이터를 배포한 후, 잘 적용이 되어있는지 확인할 수 있는 사이트다.
정상적으로 색인과 구조화 데이터가 감지가 되면, 테이블 데이터로 보여주며 모바일/웹 환경 모두 확인이 가능하다. 따로따로
리치 검색결과 테스트 - Google Search Console
페이지에서 리치 검색결과를 지원하나요? 올바른 URL이 아닙니다.테스트에 사용할 에이전트Google 검사 도구 스마트폰Google 검사 도구 데스크톱테스트에 사용할 에이전트Google 검사 도구
search.google.com
Next 에서 적용하려면
head 안에 script 파일을 생성 한 후, 정리된 스키마 파일을 넣어주었다.
각자 노출하고 싶은 데이터가 다를테니 꼭 사이트를 숙지하고 여러 테스트를 거친 후 사용해보시길!
경로 : app > layout.tsx
<script
type="application/ld+json"
dangerouslySetInnerHTML={{
__html: JSON.stringify(ORGANIZATION_SCHEMA), // 스키마 파일은 별도로 보관
}}
/>
'쬬는 개발중' 카테고리의 다른 글
| 불투명한 비디오 웹사이트에 사용하기 (mov,webm) + ffmpeg 확장자 / 파일 사이즈 압축 팁 (0) | 2025.07.21 |
|---|---|
| Next metadata generateMetadata 활용하기 정적/동적 API 할당 (0) | 2025.07.21 |
| heroicons 유형별로 불러오는 방법 (solid/outline/mini/micro) (0) | 2025.07.17 |
| cmd + d 단축키 추가하기 드래그 된 영역 아래로 복사 기능 (0) | 2025.07.09 |
| 2025 AWS SUMMIT 생성형 AI # 당근페이 브로쿼리 아키텍처 (1) | 2025.05.14 |
