메타 태그
메타 태그란 <meta> 로 작성하는 HTML 태그로 메타데이터를 나타낸다. 메타데이터는 데이터를 설명하는 데이터를 말한다.
즉, <meta> 는 HTML 데이터를 설명하는 데이터를 갖는 태그다.
<head> 안에 문서를 설명하는 <meta> 를 넣는다. 메타 태그는 닫는 태그가 없다.
메타 태그의 특성은 해당 링크를 통해 확인할 수 있다. 그리고, 메타 태그에 name 으로 설정 가능한 값들은 해당 링크를 통해 확인할 수 있다.
OG 태그 는 아래와 같이 사용하고, OOO 자리는 원하는 속성을, XXXX 자리에는 속성에 해당하는 값을 입력하면 된다.
<meta property="og:OOO" content="XXXX">Twitter 태그도 아래와 같이 OOO 자리에는 원하는 속성을, XXXX 자리에는 속성에 해당하는 값을 입력하면 된다.
<meta name="twitter:OOO" content="XXXX" >og:: 오픈 그래프라고 하는 페이스북에서 만든 메타데이터 형식 -> 미리보기를 보여줄 때 사용한다.
그리고 디버거를 활용하면 태그를 제대로 설정했는지 빠르게 확인할 수 있다.동적인 OG 태그 (Twitter 태그도 동일)
웹 페이지 데이터 요청 시 HTML이 최초로 만들어지고 난 뒤, 추가로 데이터를 요청하고 받아와서 동적으로 OG 태그를 만드는 것은 불가능하다. 위의 예를 보면, 브라우저가 최초로 사이트에 데이터 요청할 때, data?.title 의 값은 undefined 인 상태로 HTML을 받고, 이후 브라우저가 데이터를 요청해서 data?.title 값이 채워진다. 하지만, SNS 공유에서 링크 미리 보기를 만들 때는 한 번의 요청으로 받아온 데이터를 기준으로 미리 보기를 만들고 끝나기 때문에 content=undefined 인 상태로 링크 미리 보기를 만들어서 미리 보기가 보이지 않거나 원하는 데이터를 볼 수 없다.
그렇기에 이런 경우에는 data?.title 에 해당하는 데이터를 먼저 받고 나서 HTML을 생성해야 한다. 이를 위해서 프론트엔드 서버에서 데이터를 받아서 HTML을 생성한 뒤 전달하거나, 소스 코드를 빌드하는 단계에서 미리 데이터를 받아 HTML을 생성하는 방법이 있다.
<head>
<meta property="og:title" content={data?.title}>
</head><head> 태그
페이지에 대한 정보를 담고 있는 태그다. 주로 이 페이지에 대한 데이터를 담고 있는데, 화면에 보여 주기보다는 웹 브라우저가 읽어서 처리하는 용도다.
<head>
<meta charset="utf-8">
<title>코드잇 캠핑장</title>
<link rel="stylesheet" href="style.css">
<link rel="favicon" href="favicon.ico">
</head>시맨틱 태그
<div>와 기능은 똑같지만, 의미가 담겨있는 태그들을 '시맨틱 태그'라고 한다. 엄격한 사용법이 있는 건 아니고, 작성하는 사람의 의도가 중요하다. 시맨틱 태그를 잘 활용하면 검색 엔진 최적화(SEO)나 접근성(Accessibility)을 높이는데 도움이 된다.
| 태그 이름 | 용도 |
|---|---|
| <header> | 영역 위쪽에서 로고나 제목, 메뉴 같은 걸 담고 있는 도입부 |
| <main> | 사이트의 본격적인 내용으로 페이지에서 딱 한 번만 사용 가능 |
| <footer> | 영역 아래쪽에서 여러 가지 연락처나 관련 정보를 담고 있음 |
| <article> | 하나의 완성된, 독립적인 내용을 나타내는 영역 |
| <sectrion> | 어떤 것의 일부분을 나타내는 영역 |
| <figure> | 이미지와, 이미지 설명을 담고 있는 영역 |
