![[Javascript] 메타<meta>태그란? / 메타태그로 성능 개선하기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcSkXIt%2FbtsLC5vnxWt%2F4TAlKeE8WFbLblm5Xe7N40%2Fimg.png)
안녕하세요! 오늘은 meta 태그에 대해 설명해볼까 합니다!
meta태그 덕분에 이번 바닐라 플젝에서 성능 개선 측면에서 효과를 많이 봤거덩요ㅎㅎㅎ
그럼 시작해보겠습니다!
✅ 메타 태그란?
메타 태그(Meta Tag)는 HTML 문서의 <head> 안에 포함되어 페이지에 대한 정보를 검색 엔진과 브라우저에게 전달하는 역할을 하는 태그입니다. 사용자에게 직접적으로 보이지 않지만 웹 성능 최적화와 SEO(검색 엔진 최적화) 측면 에서 아주 중요한 역할을 하죠.
지금은 이렇게 간단히 정의해두고, 어떻게 최적화가 가능한지는 차차 설명드리겠습니다!
✅ 메타 태그의 기본 구조
우선 메타 태그의 기본 구조를 알아보겠습니다! 메타태그는 HTML 코드 안에 작성이 되는데
HTML 문서에서 메타 태그는 아래와 같은 형식으로 작성됩니다.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="이 웹 페이지의 설명을 여기에 작성합니다.">
<meta name="keywords" content="키워드1, 키워드2, 키워드3">
<meta name="author" content="작성자 이름">
</head>
참고로 메타 태그는 <head> 태그 내부에 작성되어야 합니다!
✅ 메타태그로 웹 성능 최적화?
이제 이러한 메타 태그로 웹 성능을 어떻게 최적화 한다는 건지! 자세하게 알아보도록 하겠습니다ㅎㅎ
메타 태그는 웹 페이지의 리소스 로드 우선순위를 조정할 수 있습니다. 그러니까 가장 중요한 정보를 가장 먼저 불러오는거죠? 그래서 브라우저는 메타 태그를 통해 어떤 리소스를 먼저 가져와야 하고, 어떤 데이터는 나중에 로드해도 되는지 판단하게 됩니다.
예를 들어! 웹사이트의 대표 이미지나 주요 스타일 시트를 preload 메타 태그로 지정하면 브라우저가 이를 가장 먼저 로드합니다. 이렇게 하면 사용자가 페이지를 열었을 때 중요한 콘텐츠가 가장 먼저 표시되기 때문에 로딩 속도가 빠르다고 느끼게 되고, 해당 사이트의 첫 인상이 좋아지게 되는 것 이죠..!
또한, 반응형 웹을 지원하는 viewport 메타 태그도 있는데요! 이 뷰포트 메타 태그를 통해 사용자의 화면마다 웹 사이트의 최적화된 화면을 제공할 수 있습니다. 이 덕분에 사용자는 확대/축소 없이 적절한 크기의 레이아웃을 볼 수 있기 때문에 좋은 UX를 가지게 되고, 브라우저는 불필요한 리소스 로드를 피하기 때문에 페이지 로딩이 최적화 되는 것 이죠..!
메타 태그 내부에도 많은 태그들이 있는데 이렇게 성능을 최적화 하기 위한 태그들도 존재 하는 것 이죠.
✅ 메타태그로 검색 엔진 최적화?(SEO)
메타 태그는 검색 엔진에게 페이지의 핵심 정보를 전달하여 검색 순위를 향상시키는 데 중요한 역할을 합니다.
쉽게 설명을 해보자면..! 우리가 무언가를 검색했을 때 1페이지에 바로 보이는 검색 결과가 내가 찾던 그 정보이면서, 양질의 컨텐츠여야 해당 검색 엔진을 사용하는 사용자들이 만족감을 느끼겠죠??
그렇기 때문에 모든 검색 엔진들은 양질의 컨텐츠를 1페이지에 배치하고 싶어 합니다. 그냥 막 AI로 작성해서 복붙한 글이 아닌 사용자가 정성스럽게 작성한 글, 잘 만들어진 웹사이트 등을 말이죠??
그렇기 때문에 검색 엔진에 올라오는 컨텐츠들을 검색 엔진 자체적으로 검사(?)를 하는데 그 때 검색 엔진에 있는 수 많은 정보들을 크롤링 하여 크롤링을 한 내용을 바탕으로 양질의 컨텐츠 순위를 매겨 1순위로 노출 시키고 하는 것 입니다.
근데 우리가 웹 사이트를 만들고 나서 웹 사이트에 올렸을 때, 물론 크롤러가 잘 크롤링 하긴 하지만 우리 웹 사이트에 대한 올바른 제목과 올바른 설명을 작성해두면 크롤러가 좀 더 확실한 정보를 얻게 되고, 또 한 그런 것을 미리 작성해둔 우리 사이트를 좀 더 좋은 사이트로 인식 할 가능성이 높겠죠?? => 이렇게 해서 검색 했을 때 우리 사이트가 상단에 위치한다면 SEO를 성공한 것 이기도 하구요!
그렇기 때문에 우리는 메타태그를 적는 것 입니다!!
✅ Open Graph 메타 태그
Open Graph protocol
The Open Graph protocol enables any web page to become a rich object in a social graph.
ogp.me
공식 문서(못생김)
제가 이번 프로젝트에서 사용한 메타 태그의 실제 구성을 보여드리자면!
요렇게 되어 있습니다! 파란 네모 부분이 직접 추가한 메타 태그 들인데 property에 "og:"이 붙어있는 것 보이시나요?
저 "og:"가 붙어 있는 메타 태그들이 Open Graph 태그 입니다.
Open Graph 태그란!
메타 태그의 한 종류로, 웹 페이지에 메타 데이터를 추가해서 sns에서 공유될 때, 콘텐츠의 제목, 설명, 이미지, 링크 등을 정확히 보여주는 역할을 합니다. 즉, sns에서 콘텐츠를 효과적으로 공유하기 위해 만들어졌다고 할 수 있죠! Facebook이 처음 개발한 표준으로 현재는 링크드인, 슬랙, 노션, 카카오톡 등 많은 sns에서 사용중입니다.
그래서 어떻게 사용이 된다는거지..? 라고 하신다면
이번 프로젝트에서 메타 테그가 적용 된 저희 사이트의 공유 예시를 보여드리겠습니다.
이렇게 사용자가 누군가에게 공유를 했을 때 보여지는 정보들을 담을 수 있는게 Open Graph의 태그 입니다!
어떤 링크를 공유했을 때, 저런 정보가 나오지 않고
이제 하나 하나 뜯어보며 설명해볼까요?
🌐 description
<meta name="description" content="LionPlace는 예약, 리뷰 및 방문 기록을 관리할 수 있는 플랫폼입니다.">- 역할: 페이지의 간략한 설명을 검색 엔진에 제공하는 태그입니다.
- 사용 목적:
- 이 설명은 검색 엔진 결과 페이지(SERP)에 표시되며, 사용자에게 페이지의 목적을 알립니다.
- SEO(검색 엔진 최적화) 측면에서 중요하며, 잘 작성된 설명은 클릭률(CTR)을 높일 수 있습니다.
이 파란 네모 부분이 discription 부분 입니다!
🌐og:title
<meta property="og:title" content="LionPlace | 주문하기" />- 역할: sns에 공유 되었을 때 제목을 보여줍니다.
- 사용 목적:
- 소셜 미디어에서 페이지가 공유될 때, 이 제목이 콘텐츠의 제목을 표시하기 위해.
🌐 og:description
<meta property="og:description" content="LionPlace에서 예약과 방문 리뷰를 한곳에서 관리하세요!">- 역할: 설명을 설정합니다.
- 사용 목적:
- 소셜 미디어에서 콘텐츠를 공유할 때, 제목 아래에 표시되는 요약 정보로 활용됩니다.
- 간결하면서도 콘텐츠의 가치를 전달하는 설명을 작성해 클릭률을 높이는 데 도움을 줍니다.
🌐og:image
<meta property="og:image" content="/meta-img.png">- 역할: 공유 이미지를 설정합니다.
- 사용 목적:
- 소셜 미디어에서 링크를 공유할 때, 대표 이미지로 표시됩니다.
이렇게 까지가 제가 이번 프로젝트에서 가장 중요하다고 생각하여 넣은 부분입니다..!
✅ 실제로 개선됨..!
실제로 meta 태그를 넣지 않고 저희 사이트를 lighthouse로 성능 측정 해보았을 때 검색 엔진 최적화부분이 91점이 나왔었는데,
meta태그를 넣어서 최적화를 시키니...?
무려 100점이 나왔습니다ㅎㅎㅎㅎㅎㅎ
저희 사이트.... 이제 1페이지에 뜨는걸까요...?ㅋㅋㅋㅋㅋㅋㅋ
✅ 마무리
이렇게 메타 태그는 웹 성능과 SEO 개선, 그리고 소셜 미디어 최적화까지 다양한 방면에서 중요한 역할을 한다는 것을 알 수 있습니다. 단순히 추가하는 몇 줄의 코드일지 모르지만, 메타 태그는 웹사이트의 첫인상을 결정하고, 사용자와 검색 엔진 모두에게 긍정적인 UX를 제공하게 됩니다!! 그러니 중요하게 생각해야겠죠??ㅎㅎ
이번 프로젝트에서 메타 태그를 통해 실제로 성능 점수가 향상되고, SEO 최적화 지표도 눈에 띄게 개선된 것을 보면서 메타 태그의 중요성을 다시 한번 느꼈습니다. 😊 앞으로도 모든 프로젝트에서 메타 태그를 꼼꼼히 설정해 최적화된 웹사이트를 만드는 습관을 가져야겠다고 다짐했습니다..!
마지막으로, 메타 태그 설정은 한 번으로 끝나는 작업이 아닙니다!!! 사이트의 목적에 맞게 지속적으로 관리하고 업데이트하는 것이 중요합니다!
이런 식 으로 말이죠ㅎㅎㅎ
그럼 오늘 글 읽어주셔서 감사합니다! 안녕~
'🖥️개발 > 🐥JavaScript' 카테고리의 다른 글
| 노마드코더 - 바닐라JS로 크롬 앱 만들기(간단 계산기 만들기) (0) | 2022.09.30 |
|---|---|
| 노마드코더 - 바닐라JS로 크롬 앱 만들기(function-2) (0) | 2022.09.29 |
| 노마드코더 - 바닐라JS로 크롬 앱 만들기(function-1) (0) | 2022.09.19 |
| 노마드코더 - 바닐라JS로 크롬 앱 만들기(object) (0) | 2022.09.19 |
| 노마드코더 - 바닐라JS로 크롬 앱 만들기(변수 / null, undefined / array) (0) | 2022.09.15 |