바이오 대표

[HTML] HEAD = 웹사이트 description, meta 태그 본문

Front_end

[HTML] HEAD = 웹사이트 description, meta 태그

바이오 대표 2021. 8. 8. 15:04

HEAD 태그는 웹사이트의 모든 정보를 담고 있다. Web browser (구글, 네이버,,,) 에게 해당 사이트를 설명해주는 역할이다.

HEAD 태그는 보이지 않는 사이트 설정들을 바꿔준다!! (중요)

 

기본 형식 

<head>
  <title>
    <meta name ="",  content "">
    <meta property="og:title, type, URL, ...">
  </title>
 </head>

 

예시) 

<!DOCTYPE html>  
<html lang="kr"> <!-- help search engine know what is the language of the website -->
    <head>
        <link
            rel = "shortcut icon"
            href = "https://pngimg.com/uploads/triangle/triangle_PNG30.png"
        />
        <title>your title go here</title>
        <!-- 아래 꼭 넣어줘야 한다  -->
        <meta charset="utf-8" />
        <!-- google이 가져올 수 있는 데이터  : how to render the textt-->
        <meta name = "description" content = "This is yeji's website"/>    
    </head>
    <body>
        <h1>
            You can show your contents here :) 
        </h1>
    </body>
</html>

↓

사이트 헤드 아이콘이 바뀐 것을 확인 할 수 있다.

 

참고)

meta tag = 부가적인 요소 라는 뜻 (content, name attribute를 가짐)
charset = 한글 등 문자 표시하게 해줌
language = 사이트에 사용되는 언어 표기 (검색엔진에게 알려줌)
og: = 카카오톡에서 사용하는 정보들 (og:url, og:image, og:description)

저작자표시

'Front_end' 카테고리의 다른 글

[HTML] <form> <label></label><input/></form>_예시)달력  (0) 2021.08.08
[HTML] <form> <label></label><input/></form>_예시)계정  (0) 2021.08.08
[HTML] Visual Studio Code Theme (Set up & Error 띄우기)  (0) 2021.08.08
[HTML] 기본 서식 Head & Body  (0) 2021.07.04
[HTML] 태그 속성 (Attribute) - 링크, 이미지  (0) 2021.06.30
'Front_end' Related Articles more