해당 블로그 시리즈는 정직하게 배워보는 Next js 시리즈로써 총 10부작으로 이루어져 있습니다.
Next.js공식 홈페이지에서 이야기하는 내용을 최대한 이해하기 쉽고 직관적이게 구성하였습니다.

HTML title 태그

우리는 많은 양의 웹을 띄워놓는 브라우저에서 우리가 어떤 웹사이트에 들어갔는지 확인하기 위해서 확인하는 것이 있다.

바로 html 의 title 태그.

이런 title 태그는 head 태그 내부에 존재하는데, 이런 태그들을 Metadata Contents라고 한다

검색 엔진은 이 Metadata를 이용해서 한 눈에 해당 페이지는 어떤 정보를 담는 페이지인지 사용자들에게 보여준다.

이런 metadata들은 Search Engine Optimize에 중요한 요소가 되된다.

만약 우리가 create-react-app에서 title을 변경한다고 해보자.

그럼 우리는 우선 index.hmtl 파일을 찾을 것이다.
그리고 <head><head> 태그 내에 있는 <title></title> 태그를 바꾼다.

혹은

npm 으로 react-helmet 을 설치한다.
react-helmet을 이용해서 변경한다.

그럼 create-next-app에서 바꾼다고 생각해보자.

index.html 파일을 찾으려고 해도 보이지 않을 것이다.

그렇다.

nextjs는 create-react-app과는 다르게 index.html 파일이 없다.

그래서 next에서는 <head> 태그 내의 데이터를 조작하기 위한 방법이 따로 있다.

Head 컴포넌트

만약 게시판을 만든다고 가정해보자.

그럼 해당 게시글을 클릭해서 들어갈 때 마다 상단 탭의 내용은 게시판의 제목으로 바뀌어야 한다는 서비스를 만든다고 하면 next.js 가 갖고있는 <Head> 컴포넌트를 사용하면 된다.

import Head from 'next/head'

그리고 위에서 가정한 게시판은 아마 다음과 같은 형태를 띄고 있을 것이다.

그리고 meta 태그를 viewport도 지정해보자.

import Head from "next/head";

export default function Post({post}) {
  return (
    <>
      <Head>
        <title>{post.title}</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <h1>{post.title}</h1>
      <p>{post.description}</>
    </>
  );
}

그리고 오픈 그래프를 이용해서 sns에 url을 올리면 미리보기가 가능한 Open Graph 메타 설정도 next가 제공하는 <Head> 컴포넌트 하나로 가능하다.

저작자표시 동일조건

'📺 Front End > - React, Next.js' 카테고리의 다른 글

[Next.js] Next.js에서 이미지와 동영상을 저장하고 사용해보자. (0)	2020.12.30
[Next js] Next의 Dynamic Routing과 Link 컴포넌트를 이용해서 아주 간단한 게시판 만들기. (0)	2020.12.29
[정직하게 배워보는 Next js] 페이지를 연결하기 위한 Link-Component그리고 Pre-Fetch (0)	2020.12.29
[정직하게 배워보는 Next js] create-next-app에서 만난 첫 번째 핵심 pages. 그리고 동적 라우팅 (0)	2020.12.29
[정직하게 배워보는 Next js] create-next-app으로 Next 개발 환경 세팅하고 next js에 대해서 알아보자. (0)	2020.12.28

Wonit

[정직하게 배워보는 Next.js] Next.js에서 head 태그를 조작하는 멋진 방법

0. 목차

1. create-next-app으로 next 개발 환경 세팅하기

2. create-next-app에서 만난 첫 번째 핵심 pages. 그리고 동적 라우팅

3. 페이지를 연결하기 위한 Link-Component 그리고 Pre-Fetch

Dynamic Routing과 Link를 이용해 간단한 게시판을 만들어보자.

4. Next.js에서 head 태그를 조작하는 멋진 방법

번외 & 실습) 이미지와 동영상을 저장하고 사용해보자.

5. 웹의 발전 과정으로 보는 SSG와 SSR

6. next의 두 번째 핵심 Pre-Rendering

7. SSG로 검색 엔진 최적화 노리기

8. 정직하게 배워보는 Next.js 시리즈를 마치며..

HTML title 태그

Head 컴포넌트

'📺 Front End > - React, Next.js' 카테고리의 다른 글

댓글

티스토리툴바

[정직하게 배워보는 Next.js] Next.js에서 head 태그를 조작하는 멋진 방법

0. 목차

1. create-next-app으로 next 개발 환경 세팅하기

2. create-next-app에서 만난 첫 번째 핵심 pages. 그리고 동적 라우팅

3. 페이지를 연결하기 위한 Link-Component 그리고 Pre-Fetch

Dynamic Routing과 Link를 이용해 간단한 게시판을 만들어보자.

4. Next.js에서 head 태그를 조작하는 멋진 방법

번외 & 실습) 이미지와 동영상을 저장하고 사용해보자.

5. 웹의 발전 과정으로 보는 SSG와 SSR

6. next의 두 번째 핵심 Pre-Rendering

7. SSG로 검색 엔진 최적화 노리기

8. 정직하게 배워보는 Next.js 시리즈를 마치며..

HTML title 태그

Head 컴포넌트

'📺 Front End > - React, Next.js' 카테고리의 다른 글

관련글

댓글

티스토리툴바