[메모] 웹사이트 헤드와 HTML 이해하기 - 거북이 미디어 전략 연구소

이 포스팅에서는 웹사이트를 만드는 HTML에 대해서 간략하게 정리하고 웹사이트의 헤드 메타태그를 공부합니다

영업사원의 시각으로 웹사이트 헤드를 이해하려고 정리한 것이니 잘못된 것은 지적해주시면 수정하겠습니다

html 문서의 구조

html태그가 가장 상위 구조에 있고 웹사이트 헤드<head>와 바디<body>태그가 차상위 구조를 이룬다

HTML 웹사이트 문서의 기본 구조는 아래와 같다

<html>
<head>
메타 데이터들
</head>

<body>
본문 내 보여지는 문서
</body>
</html>

HTML 웹사이트 헤드(head)의 주요 구성 태그

거북이 미디어 전략 연구소의 헤드(head)를 살펴보니 자주 나오는 여러개 태그는 <meta name>, <meta property>, <link rel>, <script)의 4가지 였습니다

<meta name=”이름 정의” <content=”내용 정의”> 형식

일반적인 <meta> 정보로 사이트 제목, 요약, 서치콘솔 등에 대한 인증정보, 원본문서 여부(canonical), 검색로봇의 크롤링 허용 여부 등을 정의합니다

<meta property=”이름 정의” content=”내용 정의”> 형식

meta property는 소셜 미디어에서 주로 사용하기 위한 태그로 페이스북 주도로 개발됐습니다

경쟁사인 트위터는 이 <meta name> 태그를 이용합니다

<link rel=”속성값”>

<script> 태그 형식

이렇게 정의된 자바스크립트는 일반적으로 이미지 조정, 폼(form)에 대한 검증, 콘텐츠의 동적 변경 등에 사용됩니다.

거북이 웹사이트 헤드<head>의 메타 데이터 정리

기본 데이터들

<!DOCTYPE html> – 웹사이트 헤드 <head> 상단에 위치
<meta charset=”UTF-8″>: charset는 character set의 약자로 문자 인코딩 방식이 UTF-8이라는 것을 브라우저에 알려줌.
<head> 태그 : 해당 문서에 대한 정보인 메타 데이터(meta data)를 정의할 때 사용합니다.
<title>거북이 미디어 전략 연구소/<title>: 브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 알려줌
<link rel=”profile” href=”https://gmpg.org/xfn/11″> : profile은 url을 속성값으로 가져와 <meta> 요소의 content 속성에서 명시한 정보를 브라우저가 잘 이해할 수 있게 도와주는 규칙들이 포함된 문서의 url을 명시함
<html lang=”ko-KR” prefix=”og: https://ogp.me/ns#”> – 웹사이트 헤드<head> 상단에 위치. 한국에서 한글을 사용한다고 알려주고, 페이스북 등 소설미디어에서 사용 가능한 오픈 그래프 프로토콜을 정의함
※ prefix : prefix는 한 개 이상의 semantic vocabularies들을 specify하게 도와주는 속성(attribute)

<meta name> 계열

<meta name=”description” content=”미디어의 온라인 전략과 수익화를 고민합니다.”/>

메타 데이터인 웹 페이지에 대한 설명

<meta name=”robots” content=”follow, index”/>

검색 robotsdp 웹페이지를 색인하는 방식을 알려주는 것으로 follow는 이 페이지의 링크를 따라가라는 것이며, index는 이 페이지를 색인하라는 지시사항

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

viewport는 화면 상의 표시 영역

<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>

MS 익스플로러의 오래된 버전을 지원하기 위해 필요한 메타 태그

<meta http-equiv=”X-UA-Compatible” content=”IE=edge>는 모든 IE의 호환성 보기 모드를 무시하도록 해 정상적으로 출력할 수 있도록 함. 특히, 올드 버전의 IE를 사용하는 한국에서는 필수적임

“IE=edge,chrome=1”는 Chrome=1을 추가해 IE에서 Chromeframe을 사용하는 사용자에게도 콘텐츠가 보일 수 있도록 함. 2014년 크롬이 이 플러그인의 지원과 업데이트를 중단해 사실상 chrome=1은 필요 없음

※ equiv = equivalent(동등한, 등가물), compatible(호환이 되는, 양립할 수 있는), compatibility view(호환성 보기)

<meta name=”twitter:card” content=”summary_large_image”>

트위터에서 사이트를 보여주는 방식 중 하나로 summary, photo, palyer(영상)의 3가지가 있음

트위터는 페이스북이 주도한 오픈 그래프 메타 태그를 사용하지 않음

트위터 관련은 아래와 같이 4개 정도 추가 메타 데이터가 있음

<meta name=”twitter:title” content=”거북이 미디어 전략 연구소”>
<meta name=”twitter:description” content=”미디어의 온라인 전략과 수익화를 고민합니다.”>
<meta name=”twitter:site” content=”@gobooki”>
<meta name=”twitter:image” content=”https://gobooki.net/wp-content/uploads/2020/03/이쁜-거북이로고_페이스북-좋아요-광고용-1200×630-1.jpg”>

서치콘솔, 네이버 웹마스터도구 등 인증 데이터

<meta property> 계열

소셜 미디어에 제공되는 사이트 제목, 내용, url, 종류 등을 정의함. 아래에 <meta property> 정보를 모두 기재하진 않았지만 <meta property>라는 태그들이 보이면 대략 페이스북을 포함한 소셜미디어용이라고 판단하셔도 무방합니다

<meta property=”og:locale” content=”ko_KR”> : 오픈 그래프 메타 태그. locale는 지역과 사용 언어를 정의함. Ko는 한글, KR은 South Korea를 의미함 ※ locale : (사건 등의) 현장
<meta property=”og:title” content=”거북이 미디어 전략 연구소”>
<meta property=”og:description” content=”미디어의 온라인 전략과 수익화를 고민합니다.>
<meta property=”og:url” content=”https://gobooki.net/”>
<meta property=”og:site_name” content=”거북이 미디어 전략 연구소”>
<meta property=”og:type” content=”website”> : 오픈 그래프 메타 태그. 사이트가 웹사이트라는 것을 선언
<meta property=”og:image:width” content=”1200″> : 오픈 그래프 메타 태그. 이미지 넓이를 1200 pixel로 선언
<meta property=”og:image:height” content=”634″>: 오픈 그래프 메타 태그. 이미지 길이를 634 pixel로 선언 ※ 페이스북 최적화 이미지는 1200×630
<meta property=”fb:admins” content=”페이스북 어드민 번호”> : 페이스북 페이지가 있을 경우 어드민 번호를 밝힘

<link rel> 계열

<link rel=”canonical” href=”https://gobooki.net/” />

해당 웹사이트 url의 정본(canonical)을 정의함. 모바일과 데스크톱 url을 다르게 운영하거나, 중복된 url이 많을 경우 <link rel=”canonical”>을 사용해 원본 url을 알려줌

<link rel=”next” href=”https://gobooki.net/page/2/” />

구글은 더 이상 사용하지 않는 SEO 방법

필요 없으니 삭제해도 될 듯

기타 <link rel>

<link rel=”icon” href=”https://gobooki.net/wp-content/uploads/2020/03/cropped-거북이-로고-정사각형-1-32×32.jpg” sizes=”32×32″ /> : 로고 아이콘 파일

<script> 계열

<script type=”application/ld+json” class=”rank-math-schema”> 이하 생략 : schema 데이터

참고 : HTML이란 무엇인가

HTML은 HyperText Markup Language의 약자로 하이퍼텍스트를 가장 중요한 특징으로 하는 마크업이라는 형식을 가진 컴퓨터 프로그래밍 언어를 말한다

HTML은 웹브라우저에 표시되는 웹페이지를 만들어달라고 컴퓨터에 요청하는 언어로 편집기에 입력한 내용을 웹브라우저(뷰어)가 읽어서 화면에 표시하게 합니다

※ hypertext

하이퍼텍스트(Hypertext)는 hyper라는 건너편, 초월이라는 단어와 text가 합성된 언어로 사용자가 한 문서에서 다른 문서로 즉시 접근할 수 있는 링크를 의미한다

※ markup
마크업은 태그 등을 이용해 문서나 데이터 구조를 명기하는 언어의 한 종류다
마크업 언어로는 HTML과 XML이 대표적이다

태그(Tag)란 무엇인가

HTML의 가장 기본적인 문법으로 요소(element)라고도 부른다
시작 태그에 속성(attribute) 속성이 에 추가되어 특정한 기능을 제공한다

<strong> 진한 글자 </strong>
에서 <strong>과 </strong>을 태그라 하고 앞에 있는 태그를 시작 태그, 뒤에 “/”가 있는 태그를 종료 태그라고 한다

<a> 태그

a는 anchor의 약어로 anchor는 연결된 텍스트가 링크라는 것을 브라우저에 알려주는 태그다 . 시작태그 및 종료태그와 함께 중요한 태그임

속성(attribute)이란 무엇인가

HTML에서 속성은 시작 태그에 추가되어 특정한 기능을 제공한다

“<a href=”https://gobooki.net/>거북이 미디어 전략 연구소</a>”를 입력하면 아래와 같은 링크를 생성하게 된다.

이 링크는 거북이 미디어 전략 연구소가 링크라는 것을 브라우저에 알려주고 https://gobooki.net/라는 웹사이트 주소를 a태그 내의 속성을 통해 알려주게 된다

거북이 미디어 전략 연구소

href는 Hypertext REFrence의 약자로 링크된 페이지의 URL을 명시해주는 속성이다

html <!– –> 주석 태그

<!– –> 태그는 html 소스 코드 내에 주석(comment)을 삽입할 때 사용

주석이란 소스 코드에 개발자가 해당 코드를 이해하기 쉽게 돕는 설명이기에 브라우저 화면에 나오진 않지만 다른 사람들이 코드를 수정하거나 분석할 때 참고하기 위함

메타 태그(meta tag)란 무엇인가

해당 문서의 제목, 내용, 저작자 등의 정보를 가지고 있음

메타 태그 속성은 http-equiv, name, content 3가지 속성이 있음(누군가는 charset와 함께 4가지라고 함)

http-equiv=”항목 이름”

웹 브라우저가 서버에 명령을 내리는 속성으로 name 속성을 대신하여 사용 가능하며

equiv는 equivalent(동등한)와 같은 의미를 가짐

content=”정보 값”

meta 정보의 내용을 지정합니다.

name=”정보 이름”

meta 정보의 이름을 정할 수 있으며 특별한 지정이 없으면 http-equiv 와 같은 기능

(끝)

거북이 미디어 전략 연구소장

거북이 미디어 전략 연구소장은 미디어의 온라인 수익화와 전략에 주요 관심을 가지고 있습니다.

저는 Publisher side에서 2015년부터 모바일과 PC 광고를 담당했습니다. 2022년부터 국내 포털을 담당하게 됐습니다.