(3D)Dev Deep Dive/Templates & Guides

[Template] SEO 향상을 위한 Header 템플릿

728x90

SEO가 무엇인지 궁금하다면?

[SEO] 서비스의 검색 엔진 순위를 높여보자, 헤더에 SEO 적용하기

SEO(검색 엔진 최적화)는 웹사이트의 검색 엔진 순위를 높이기 위한 중요한 요소 입니다. 웹사이트를 아무리 잘 만들어 두어도 검색이 되지 않는다면 사용자는 쉽게 들어오지 않을 것이고, 결국

time-map-installer.tistory.com

Head 태그 안에 이런 식으로 만들어 보는건 어때요?

head 태그 안에 이러한 정보들을 넣으면 SEO를 향상시키는데 좋습니다.

몇 가지 추가 예시를 넣어두었고, 이를 참고하여 작성하면 되겠습니다.

<head>
    <!-- 웹 페이지의 타이틀을 정의. 이는 검색 엔진 결과 페이지와 브라우저 탭에서 표시됨 -->
    <title>당신의 웹사이트 | 웹 개발에 대한 모든 것</title>

    <!-- 웹 페이지의 문자 인코딩을 정의 -->
    <meta charset="UTF-8">
    <!-- 웹 페이지의 설명을 제공. 이는 검색 엔진에서 페이지의 간략한 요약으로 사용됨 -->
    <meta name="description" content="프론트엔드 개발에 대해 배우세요. HTML, CSS, JavaScript 등의 기본 개념부터 최신 트렌드에 이르기까지, 모든 것을 한 곳에서 배울 수 있습니다.">
    <!-- 웹 페이지의 주요 키워드를 정의 -->
    <meta name="keywords" content="프론트엔드 개발, 웹 개발, HTML, CSS, JavaScript">
    <!-- 웹 페이지가 모바일 기기에서 올바르게 보이도록 설정 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 검색 엔진에 페이지를 어떻게 색인화하고 추적할지 지시 -->
    <meta name="robots" content="index, follow">

    <!-- Open Graph (Facebook) 메타데이터를 정의. 이는 페이지가 소셜 미디어 플랫폼에서 어떻게 보일지 결정 -->
    <meta property="og:title" content="당신의 웹사이트 | 웹 개발에 대한 모든 것">
    <meta property="og:description" content="프론트엔드 개발에 대해 배우세요. HTML, CSS, JavaScript 등의 기본 개념부터 최신 트렌드에 이르기까지, 모든 것을 한 곳에서 배울 수 있습니다.">
    <meta property="og:image" content="URL_TO_YOUR_IMAGE">
    <meta property="og:url" content="YOUR_WEBSITE_URL">
    <meta property="og:type" content="website">

    <!-- Twitter 메타데이터를 정의. 이는 트윗에 페이지가 포함될 때 어떻게 보일지 결정 -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="당신의 웹사이트 | 웹 개발에 대한 모든 것">
    <meta name="twitter:description" content="프론트엔드 개발에 대해 배우세요. HTML, CSS, JavaScript 등의 기본 개념부터 최신 트렌드에 이르기까지, 모든 것을 한 곳에서 배울 수 있습니다.">
    <meta name="twitter:image" content="URL_TO_YOUR_IMAGE">

    <!-- 웹사이트의 아이콘을 정의 -->
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
</head>

어? meta 안에 name과 property가 있네요? 어떤 차이가 있는건가요?

name 속성은 일반적으로 HTML 문서의 메타데이터를 정의하는 데 사용됩니다.

예를 들어, 웹 페이지의 설명, 키워드, 저자, 뷰포트 설정 등을 정의하는 데 사용됩니다.

name 속성은 검색 엔진이 웹 페이지의 콘텐츠를 이해하고 색인화하는 데 도움이 됩니다.

반면에 property 속성은 Open Graph 프로토콜에서 사용됩니다.

이 프로토콜은 주로 소셜 미디어 플랫폼 (예: Facebook)에서 웹 페이지의 정보를 정확하게 추출하고 표시하는 데 사용됩다.

property 속성은 og:title, og:description, og:image 등과 같은 Open Graph 프로퍼티를 정의하는 데 사용됩니다.

따라서 property와 name 속성 모두 메타데이터를 정의하는 데 사용되지만, 그들이 사용되는 컨텍스트와 목적이 다르다는 것을 기억해야 합니다.

Next.js에서 meta tag를 활용하고 싶다면?

방법은 간단합니다. <head> 태그 대신 <Head> 태그를 이용하면 된다고 합니다.

Learn | Next.js

Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more.

nextjs.org

End

728x90

저작자표시 비영리 변경금지

'(3D)Dev Deep Dive > Templates & Guides' 카테고리의 다른 글

[GitHub] Git에서 팀 단위로 협업하기 (0)	2023.07.14
[Design] 피그마 그리드 템플릿 (0)	2023.06.05
[Template] JavaScript(Node.js) Template for Baekjoon (0)	2023.05.17
[Template] ESLint Template for FrontEnd Developers (0)	2023.05.13
[Template] Prettier Template for FrontEnd Developers (0)	2023.05.13

Contents

새소식

인기 검색어