HTML 기본 구조와 SEO(검색엔진 최적화)를 위한 메타 태그 작성법

오늘은 HTML의 기본 구조와 SEO(검색 엔진 최적화, Search Engine Optimization)를 위한 메타 태그 작성법에 대해 알아보겠습니다.

HTML 문서의 기본 구조는 다음과 같습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>웹사이트 제목</title>
    <meta name="description" content="웹사이트의 설명">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="웹사이트 제목" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="웹사이트 주소" />
    <meta property="og:image" content="이미지의 URL" />
    <meta property="og:description" content="웹사이트의 설명" />

    <!-- Twitter Card Meta Tags -->
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@사용자_트위터_아이디" />
    <meta name="twitter:title" content="웹사이트 제목" />
    <meta name="twitter:description" content="웹사이트의 설명" />
    <meta name="twitter:image" content="이미지의 URL" />

</head>
<body>
    <!-- 웹사이트 내용 -->
</body>
</html>

기본 구조 설명

<!DOCTYPE html>: 이 선언은 웹 브라우저에게 이 문서가 HTML5 문서임을 알려줍니다.
<html lang="ko">: 이 태그는 문서의 시작과 끝을 나타냅니다. lang 속성은 웹사이트의 주 언어를 나타냅니다.
<head>: 이 태그 안에는 HTML 페이지의 메타데이터가 들어갑니다.
<meta charset="UTF-8">: 이 태그는 웹 페이지의 문자 인코딩을 정의합니다.
<title>: 이 태그는 웹 페이지의 제목을 정의하며, 브라우저 탭에 표시되는 텍스트입니다.
<meta name="description" content="웹사이트의 설명">: 이 태그는 웹 페이지의 설명을 제공하며, 검색 엔진이 이 정보를 사용하여 검색 결과에 페이지를 표시하는 방법을 결정합니다.
<meta name="viewport" content="width=device-width, initial-scale=1">: 이 태그는 웹 페이지가 모바일 기기에서 어떻게 표시되는지 제어합니다. 이는 반응형 디자인에 중요한 역할을 합니다.
<body>: 이 태그 안에는 웹사이트의 본문 콘텐츠가 들어갑니다.

SEO 구조 설명

이제 SEO를 위한 메타 태그, Open Graph(OG) 태그와 Twitter 카드에 대해 알아보겠습니다. 이들은 각각 Facebook 및 Twitter에서 사이트를 공유할 때 어떻게 표시될지를 지정하는 데 사용됩니다.

<!-- Open Graph Meta Tags -->
<meta property="og:title" content="웹사이트 제목" />
<meta property="og:type" content="website" />
<meta property="og:url" content="웹사이트 주소" />
<meta property="og:image" content="이미지의 URL" />
<meta property="og:description" content="웹사이트의 설명" />

<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@사용자_트위터_아이디" />
<meta name="twitter:title" content="웹사이트 제목" />
<meta name="twitter:description" content="웹사이트의 설명" />
<meta name="twitter:image" content="이미지의 URL" />

Open Graph(OG) 메타 태그: 이 태그들은 웹 페이지가 소셜 미디어 사이트에서 어떻게 표시될지를 지정합니다. og:title, og:type, og:url, og:image, og:description 등을 사용하여 웹 페이지의 제목, 유형, URL, 이미지, 설명을 정의할 수 있습니다.
Twitter Card 메타 태그: 이 태그들은 웹 페이지가 Twitter에서 어떻게 표시될지를 지정합니다. twitter:card, twitter:site, twitter:title, twitter:description, twitter:image 를 사용하여 웹 페이지의 유형, 사이트, 제목, 설명, 이미지를 정의할 수 있습니다.

위의 코드를 복사하고, "웹사이트 제목", "웹사이트의 설명", "웹사이트 주소", "이미지의 URL", "@사용자_트위터_아이디" 등의 텍스트를 웹사이트에 맞게 교체하면 됩니다.