프론트엔드 학습 일지 - [9. 메타데이터]

이준호·2022년 11월 13일
0

메타데이터에 대한 개념을 학습하고 배운 내용을 작성해보았습니다.
수업을 들었을 때, 집중력을 잃어버리는 문제가 있었고
화면에 직접 결과물로 나타나는 요소가 아니어서 그런지 배움에 어려움이 있었지만,
작성하고 나면서 메타데이터를 작성하는 방법을 이해하게 되었습니다.


[ 메타데이터 ]

메타데이터 : <head>에 들어가는 태그들을 의미하며, HTML문서를 설명하는 데이터.

사용하는 이유?
: 검색엔진이 메타데이터를 우선 수집,
어떤 데이터인지 어떤 설명인지, 어떤 주요한 문서의 정보들인지 분류해야 되는데
이것을 메타데이터를 사용해서 분류시킴.

<title> : 문서 제목. 웹페이지에서 북마크할 때 title값이 이름으로 들어감.
<head>태그에 딱 하나만 들어가며, 웹페이지에서 북마크할 때 이름으로 이 값이 들어감.

< 페이지 제목이 중요한 이유? >
페이지 제목이 SEO(검색엔진 최적화)에 큰 영향을 끼치며 페이지의 순서를 결정하는 구성요소중 하나입니다. 즉 내용물이 비슷한 웹페이지여도 이름을 더 잘 짓는 쪽이 상위결과에 노출됩니다.

  • 주의사항
    단어를 나열하는 형태의 제목X —> 검색순위가 내려감. 검색엔진이 타이틀을 광고페이지로 인식하는 경우가 많음.
    짧더라도 웹페이지 소개할 수 있는 짧은 문장 넣을 것.

[ meta태그와 속성 ]

<meta> : 문서 레벨 메타데이터 요소. <meta>를 <head>에 여러 개 나열 가능

<meta>의 속성

  • name, content : 두 속성이 같이 사용됨. 사용시 문서의 메타데이터를 각각 이름-값 쌍으로 제공
<!-- meta 태그에 name 속성이 있으면 content 속성도 같이 써 줄것. -->
<meta name=“(이름)” content=“(값)”>

(HTML 명세가 정의하는 표준 메타데이터 이름)
검색엔진이 문서정보를 좀 더 용이하게 수집, 분류 위한 추가정보

< name 속성에 들어가는 표준 메타데이터 이름 >
(링크)https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta/name
https://wikidocs.net/164662

  • application-name : 웹페이지 전체를 아우를 수 있는 이름
	<meta name=“application-name” content=“Facebook”>
  • author : 문서 저작자
	<meta name=“author” content=“Me”>
  • description : 페이지에 대한 짧고 정확한 요약(검색할 때 설명으로 나오는 부분)
    특정 브라우저는 이 값을 즐찾 페이지의 기본 설명값으로 저장.
	<meta name=“description” content=“저의 일지를 담은 글입니다.”>
  • generator : 페이지를 생성한 소프트웨어의 식별자
  • keywords : 문서를 설명할 수 있는 키워드들을 나열하는 형태
    (인스타그램의 해시 태그 기능을 연상하면 됨.)
	<meta name="keywords" 
          content="메타데이터, meta, HTML, 프론트엔드, 웹 개발">
  • referrer : 다른 웹페이지 방문 시 다녀온 흔적을 남길 수 있는 것 설정
  • viewport : (모바일만)뷰포트의 초기 사이트에 대한 힌트
    (뷰포트 : 전체 브라우저 중 웹페이지를 볼 수 있는 영역)
	<meta name=“viewport” 
          content=“width=device-width, initial-scale=1.0”>
  <!-- width=device-width : 웹페이지의 뷰포트 너비를 기기화면의 너비로. -->
  <!-- Initial-scale : 초기비율. 장치 너비와 뷰포트 비율이 안 맞아 
						보기 불편할 때 사용하여 비율 재정의 -->

charset : 문자 인코딩. 라틴문자 외의 다른 나라의 수 많은 문자 출력
권장 ) <head>첫번째 정보, <title> 바로 밑에 위치시키기

<link> : 외부 리소스 연결(스타일 시트, 파비콘 등).
(파비콘 : 웹페이지 탭에 사용되는 아이콘. 주로'.ico'확장자의 이미지 파일 사용)

  • 사용되는 속성
    • rel : (relationship) 연결하려는 파일과 현재 파일의 관계 명시
    • href : (hypertext reference) 연결하려는 파일의 경로
  <!-- 스타일시트(css파일) 적용 -->
  <link rel=“stylesheet” href=“main.css”>
  <!-- 파비콘 적용 -->
  <link rel="icon" href="images/favicon.ico">

[ MIME 타입 ]

MIME type : 어떤파일인지 해석할 수 없을 때 타입을 명시해 주는 것
(문법)
“(파일 대분류)/(파일 확장자)”
Ex ) type=“text/css” : (불러오는 파일이 어떤 유형인지 모를떄.) 해당 파일이 css로 이루어진 텍스트 파일임을 인지.

[ CSS, JavaScript 관련 태그 ]

<style> : 스타일 정보 요소. css적용

<head>
    <meta charset="UTF-8">
    <title>Facebook - dashboard</title>
    <style>
      p {color: red;}
    </style>
  </head>
  <body>
    <h1>style 태그</h1>
    <p>
      이 글은 빨간색으로 칠해집니다.
    </p>
  </body>

<script> : JavaScript 적용. Src 속성으로 JavaScript 불러오거나 태그 내용으로 JavaScript 직접 작성 가능.
<body>안에도 작성 가능하나 로딩시간이 길어지므로 마지막에 쓸 것.

  <!-- 외부의 JavaScript 불러오기 -->
  <script src="javascript.js"></script>
  
  <!-- <script> 내부에 인라인 스크립트 작성 -->
  <script>
    alert("Hello World!");
  </script>
profile
저의 개발일지를 담은 블로그입니다.

0개의 댓글