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
'(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 |