NextJS / React의 SEO 친화적 인 헤드 구성 요소 만들기

Sep 13, 2025

어떻게

(이미지 크레디트 : PEXELS의 부정적인 공간)

반응은 강력한 JavaScript 라이브러리이며, 간단하고 기능을 구축하는 데 필요한 모든 조각을 포함하지 않습니다. 웹 사이트 레이아웃 ...에 NextJS는 서버 렌더링 된 응용 프로그램 및 웹 사이트를 쉽게 빌드 할 수있는 React 프레임 워크입니다.

NextJS에는 Webpack, Babel, Dynamic Routing 및 Prefetching과 같은 상자에서 여러 가지 도구와 기능이 있습니다. 가장 중요한 것은 NextJs가 매우 쉽게 Seo-Friendly임을 발견했습니다.

이 프레임 워크를 사용하면 서버 측 렌더링을 활용할 수 있으므로 앱 및 웹 사이트가 상당히 빠르게로드 될뿐만 아니라 검색 엔진이 크롤링 할 수있는 대리 웹 사이트를 훨씬 쉽게 만듭니다.

NextJS는 또한 사용하여 잘 세분화 된 사이트 아키텍처를 쉽게 만들 수 있습니다. 동적 라우팅 또는 사용자 정의 서버 라우팅 ...에 예를 들어, 귀하는 귀하의 웹 사이트를 / 기사 / / 제품 / / 서비스 / 더 나은 콘텐츠 구조화와 같은 다른 사일로로 쉽게 구분할 수 있습니다.

무엇보다도, 정말 유연한 온 페이지 최적화 기술을 구현하기 위해 구성 요소, 구성 요소 속성 및 구성 요소 상태, 구성 요소 속성 및 구성 요소 상태를 반응시키는 모든 것을 활용할 수 있습니다. 이 기사에서는 반응을 위해 잘 최적화 된 헤드 구성 요소를 세부적으로 구축 할 것입니다.

SEO의 헤드 요소의 중요성

이제이 헤드 구성 요소를 만드는 방법에 들어가기 전에 먼저 중요한 이유와 최적화가되는 이유에 대해 먼저 이야기 해 봅시다.

귀하의 웹 사이트의 헤드 요소는 기술 SEO에 관해서 가장 중요한 섹션 중 하나가 될 것입니다. 하나는 모든 웹 사이트 메타 데이터가 헤드에 설정됩니다. 이 태그에는 제목, 메타 설명, 페이지 키워드, 관련 작성자 정보 및 뷰포트 설정이 포함됩니다.

Head 요소는 귀하의 표준 URL 태그, 관련 Facebook Opengraph 태그 (OG 태그) 또는 트위터 카드 및 메타 로봇 태그와 같은 다른 중요한 태그를 설정하는 것도 책임을집니다. 이 태그 중 하나는 다른 정보를 Google 또는 소셜 네트워크에 전달하여 콘텐츠를 더 잘 이해하고 색인하고 공유 할 수 있도록 책임이 있습니다.

웹 사이트에서 부적절하게 구성된 메타 데이터가 부적절한 전반적인 웹 사이트 최적화에 재앙을 일으킬 수 있으며 랭킹을 확실히 원인이 될 수 있습니다.

웹 사이트에서 부적절하게 구성된 메타 데이터를 보유한 전반적인 웹 사이트 최적화에 재앙을 일으킬 수 있으며 랭킹을 확실히 원인이 될 수 있습니다.

예를 들어, 웹 사이트가 온 페이지 최적화 위치에서 직면 할 수있는 최악의 처벌 중 두 개는 '중복 타이틀 태그'벌금 및 '중복 메타 태그'벌금이 부과됩니다. 이 두 태그는 웹 사이트의 '엘리베이터 피치'를 Google에 제공 할 책임이 있습니다. 또한 웹 사이트가 Google 검색 결과에 표시 될 때 사용자가 볼 수있는 텍스트를 지정합니다.

귀하의 웹 사이트의 모든 페이지가 동일한 정확한 제목과 동일한 정확한 설명 세트가있는 경우 Google은 웹 사이트가 무엇인지 이해하는 데 어려운 시간을 가질 것입니다. 결과적으로 Google은 귀하의 웹 사이트에 너무 많은 관심을 기울이지 않을 것이며 확실히 권위 재산을 고려하지 않을 것입니다.

기술 온 페이지 SEO에 대해 자세히 알아보십시오. , Speckyboy에서 내 접근 방식에 대한 자세한 정보를 참조하십시오 ...에

이제 머리 요소에 대해 조금 더 많이 이해 했으므로 두건 아래에 너무 중요한 이유는 반응을 위해 SEO 친화적 인 헤드 구성 요소를 만드는 방법을 살펴 보겠습니다.

SEO 친화적 인 헤드 구성 요소를 만듭니다

이 기사에서 자세히 설명하는 SEO 친화적 인 헤드 구성 요소는 NEXTJS에 구체적입니다. 그러나 다른 반응 프레임 워크를 사용하거나 반응을 사용하는 경우 사용할 수 있습니다. 반응 헬멧 NextJS 헤드 구성 요소 대신.

가장 먼저 할 일은 기본 헤드 구조를 설정하는 것입니다. 아래 코드는 예제로 사용될 수 있지만 적합한 것처럼 물건을 추가하거나 제거하는 것을 자유롭게 할 수 있습니다. 최소한의 최소한에서, 머리에는 제목 태그, 메타 설명 태그, 표준 URL 및 관련 사회 태그가 포함되어야합니다.

& lt; head & gt;
& lt; & lt; & lt; / title & gt;
& lt; meta name = "설명"content = ""/ & gt;
& lt; meta 속성 = "OG : 유형"content = "웹 사이트"/ gt;
& lt; meta name = "og : title"속성 = "og : title"content = ""/ & gt;
& lt; meta name = "og : 설명"속성 = "og : 설명"content = ""/ & gt;
& lt; meta 속성 = "og : site_name"content = ""/ & gt;
& lt; meta 속성 = "OG : URL"content = ""/ & gt;
& lt; meta name = "Twitter : 카드"컨텐츠 = "요약"/ & gt;
& lt; meta name = "Twitter : title"content = ""/ & gt;
& lt; meta name = "Twitter : 설명"content = {props.desc} / & gt;
& lt; meta name = "Twitter : 사이트"content = ""/ & gt;
& lt; meta name = "twitter : creator"content = ""/ & gt;
& lt; 링크 rel = "아이콘"유형 = "image / png"href = "/ static / 이미지 / favicon.ico"/ & gt;
& lt; 링크 rel = "Apple-Touch-icon"href = "/ static / images / favicon.ico"/ & gt;
& lt; 링크 rel = "스타일 시트"href = ""/ & gt;
& lt; meta 속성 = "og : 이미지"content = ""/ & gt;
& lt; meta name = "Twitter : 이미지"content = ""/ & gt;
& lt; 링크 rel = "Canonical"href = "/ & gt;
& lt; script type = "text / javascript"src = ""& gt; & lt; / script & gt;
& lt; / head & gt;

구성 요소를 설정하십시오

그런 다음 구성 요소에 대한 새 부분 파일을 작성하려고합니다. 부분 파일을 호출 할 수 있습니다 seo-meta.js. 또는 이와 유사합니다. 이 파일은이 파일을 보관해야합니다 파티 예배 규칙서.

시작 구성 요소는 다음과 같습니다.

 '다음 / 머리'에서 가져 오기 머리
const meta = (props) = & gt; (
& lt; head & gt;
& lt; & lt; & lt; / title & gt;
& lt; meta name = "설명"content = ""/ & gt;
& lt; meta 속성 = "OG : 유형"content = "웹 사이트"/ gt;
& lt; meta name = "og : title"속성 = "og : title"content = ""/ & gt;
& lt; meta name = "og : 설명"속성 = "og : 설명"content = ""/ & gt;
& lt; meta 속성 = "og : site_name"content = ""/ & gt;
& lt; meta 속성 = "OG : URL"content = ""/ & gt;
& lt; meta name = "Twitter : 카드"컨텐츠 = "요약"/ & gt;
& lt; meta name = "Twitter : title"content = ""/ & gt;
& lt; meta name = "Twitter : 설명"content = {props.desc} / & gt;
& lt; meta name = "Twitter : 사이트"content = ""/ & gt;
& lt; meta name = "twitter : creator"content = ""/ & gt;
& lt; 링크 rel = "아이콘"유형 = "image / png"href = "/ static / 이미지 / favicon.ico"/ & gt;
& lt; 링크 rel = "Apple-Touch-icon"href = "/ static / images / favicon.ico"/ & gt;
& lt; 링크 rel = "스타일 시트"href = ""/ & gt;
& lt; meta 속성 = "og : 이미지"content = ""/ & gt;
& lt; meta name = "Twitter : 이미지"content = ""/ & gt;
& lt; 링크 rel = "Canonical"href = "/ & gt;
& lt; script type = "text / javascript"src = ""& gt; & lt; / script & gt;
& lt; / head & gt;
)
기본 메타 내보내기

나는 내가 지나가는 것을 알게 될 것입니다 소품 또는 내 구성 요소에 속성. 우리는 이러한 속성을 사용하여 메타 태그를 채우고 있습니다.

구성 요소 가져 오기

기본 구성 요소를 설정하면 페이지로 가져올 수 있습니다. 페이지 상단에 다음을 포함하여 구성 요소를 가져올 수 있습니다.

 '../partials/seo-meta.js'에서 메타 가져 오기

이제 네이티브 NextJS 헤드 구성 요소를 사용하는 것처럼 렌더링 함수 내에 메타 구성 요소를 배치 할 수 있습니다.

구성 요소 속성을 만듭니다

이제 메타 구성 요소를 가져 와서 배치 했으므로 메타 데이터에 필요한 속성을 설정하려는 속성을 설정할 것입니다. 일반적으로 모든 페이지에 대해 제목, 설명 및 URL이 포함되어야하지만 필요에 따라 이미지 및 기타 데이터를 포함 할 수도 있습니다.

또한 CSS 및 JavaScript 파일의 등록 정보를 포함하여 필요에 따라 페이지에 조건부로로드 할 수 있습니다. 모든 속성 세트를 사용하면 구성 요소가 다음과 같이 보입니다.

 & lt; 메타
제목 = "이것은 제목입니다 | 웹 사이트 이름 "
desc = "이것은 설명입니다"
Canonical = "https://www.someurl.com"
CSS = '/ static / css / styles.css'
js = '/ static / js / scripts.js'
/ & gt;

NextJS가있는 정적 웹 사이트를 구축하는 경우 정적 콘텐츠로 속성을 채울 수 있어야합니다. 그러나 동적 경로에서 페이지를로드하고 동적 코드가있는 페이지 템플리트를 채우는 경우 이러한 속성을 동적으로 설정하려는 경우가 있습니다.

우리의 웹 사이트, 고유 명사 , WordPress API를 데이터 소스로 사용하지만 REST 또는 GRAPHQL API를 사용하여 아래 지침을 사용할 수 있습니다.

페이지를 요청할 때 해당 메타 데이터 및 페이지 데이터를 가져 오려면 GetInitialProps () 비동기 함수. 그런 다음 Google 및 기타 로봇이 정보를 크롤링 할 수 있도록 렌더링 기능 내의 동적 데이터를 사용할 수 있습니다.

데이터 소스와 몇 가지 다른 요소에 따라 초기 속성을 얻으려면 다른 접근 방식을 취할 수 있지만 시작하기위한 기본적인 접근 방식이 있습니다.

static async getInitialProps (CTX) {
const res = await fetch ( '// api.some-url.com/case_studies/?slug='+ ctx.req.params.slug)
const error_code = res.statuscode & gt; 200? res.statuscode : false;
const 데이터 = res.json ()을 기다리십시오.
url = 'https : //'+ ctx.req.headers.host + '/'+ ctx.req.params.slug
meta_title = 데이터를 기다리십시오  .meta_title
meta_desc = 데이터를 기다리십시오  .meta_desc.
반환 {
에러 코드,
   case_study : 데이터,
   meta_title : meta_title,
   meta_desc : meta_desc,
   URL : URL
}
}

이제 렌더링 함수 내에서 설정 한 속성에 액세스 할 수 있습니다. 코드에서 사용될 때 그들은 이런 식으로 보일 것입니다.

 & lt; 메타
title = {this.props.meta_title}
desc = {this.props.meta_desc}
Canonical = {this.props.url}
CSS = '/ static / css / styles.css'
js = '/ static / js / scripts.js'
/ & gt;

구성 요소의 속성을 사용하십시오

마지막 단계는 패스가 전달 된 속성을 사용하도록 구성 요소를 설정하는 것입니다. 제목과 설명과 같은 일부 속성은 모든 페이지에서 설정 될 것이지만 CSS와 JS와 같은 다른 사용자는 조건부 일 수 있습니다. 구성 요소 에서이 작업을 고려하고 싶습니다.

이 예에서는 인수를 사용하여 구성 요소에 속성을 전달하고 있습니다. 소품 ...에 그런 다음 이름을 사용하여 개별 소품에 액세스 할 수 있습니다. topstitle. 또는 굴절하다 ...에

조건부 블록을 설정할 때 다음과 같이 접근 방식을 취할 수 있습니다.

 {
props.css & amp; & amp;
& lt; 링크 rel = "스타일 시트"href = {$ {props.css}`} / gt;
}

이렇게하면 CSS가 설정되어 있지 않으면 페이지에 빈 링크 태그를 설정하지 않습니다. 이 동일한 방법은 JavaScript 파일에 사용할 수 있습니다.

머리 구성 요소를 채우면 다음과 같이 보입니다.

 '다음 / 헤드'에서 가져 오기 머리
const meta = (props) = & gt; (
& lt; head & gt;
& lt; 타이틀 & gt; {props.title} & lt; / title & gt;
& lt; meta name = "설명"content = {props.desc} / gt;
& lt; meta 속성 = "OG : 유형"content = "웹 사이트"/ gt;
& lt; meta name = "og : title"속성 = "og : title"content = {props.title} / gt;
& lt; meta name = "og : 설명"속성 = "og : 설명"content = {props.desc} / gt;
& lt; meta 속성 = "og : site_name"content = "적절한 명사"/ & gt;
& lt; meta 속성 = "og : URL"content = {`$ {props.canonical}`} / gt;
& lt; meta name = "Twitter : 카드"컨텐츠 = "요약"/ & gt;
& lt; meta name = "twitter : title"content = {props.title} / & gt;
& lt; meta name = "Twitter : 설명"content = {props.desc} / & gt;
& lt; meta name = "Twitter : 사이트"content = "@ propernounco"/ & gt;
& lt; meta name = "Twitter : creator"content = "@ propernounco"/ & gt;
& lt; 링크 rel = "아이콘"유형 = "image / png"href = "/ static / 이미지 / favicon.ico"/ & gt;
& lt; 링크 rel = "Apple-Touch-icon"href = "/ static / images / favicon.ico"/ & gt;
{
props.css & amp; & amp;
& lt; 링크 rel = "스타일 시트"href = {$ {props.css}`} / gt;
}
{
props.mage? (
& lt; meta 속성 = "og : 이미지"content = {`$ {props.image}`} / gt;
) : (
& lt; meta 속성 = "og : 이미지"content = "https://www.propernoun.cohttps://cdn.thefastcode.com/static/images/proper-noun-social.png"/ & gt;
)
}
{
props.image 및 amp; & amp;
& lt; meta name = "twitter : 이미지"content = {`$ {props.image}`} / gt;
}
{
소품 & amp; & amp;
& lt; 링크 rel = "Canonical"href = {$ {props.canonical}`} / gt;
}
{
props.js & amp; & amp;
& lt; script type = "text / javascript"src = {`$ {props.js}`} & gt; & lt; / script & gt;
}
& lt; / head & gt;
)
기본 메타 내보내기

자세히보기 :

분리 가능한 반응 성분을 개발하십시오
최고의 JavaScript Apis의 14.
15 필수 JavaScript 도구를 사용해야합니다

NextJS / React의 SEO 친화적 인 헤드 구성 요소 만들기

SEO의 헤드 요소의 중요성

SEO 친화적 인 헤드 구성 요소를 만듭니다

구성 요소를 설정하십시오

구성 요소 가져 오기

구성 요소 속성을 만듭니다

구성 요소의 속성을 사용하십시오

어떻게 - 가장 인기있는 기사

Pureref : 이미지 참조 도구 사용 방법

마우스로 제어 된 시차 배경 효과 생성

JavaScript 코드 분할에 대해 알아야 할 모든 것

Zbrush에서 인간의 코를 조각하는 방법 : 4 쉬운 단계

아이들을 위해 애니메이션을 배우기

오일에서 브러시 스트로크를 개선하십시오

인증 착용 된 k-2so droid

현금 흐름을 효과적으로 관리하는 5 가지 방법

카테고리