멋사 프론트엔드 스쿨 6기 과정 중 첫 프로젝트(HTML + CSS)를 하던 중, SEO도 고려할 것이라는 조건이 걸려 있어서 찾던 중
메타태그를 적절히 활용해야 접근성 측면에서 성능이 개선된다는 사실을 알았다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
</body>
</html>우리는 흔히 html파일을 만들고 !+Tab만 누르면 기본적으로 위와 같은 html 기본 골격을 가진 자동완성을 이용하곤 하지만,
head 내에 위치한 meta태그를 보며, 인코딩 방식이 UTF-8이고, 뷰포트를 장치 화면 너비에 맞게 설정한다라는 사실 외에
meta 태그에 대한 궁금증을 품어본 적이 없었던 것 같다.
프로젝트에서는 충분히 메타태그를 공부할 시간없이 구글링을 통해 open graph를 이용해 단순히 해결했지만,
프로젝트가 끝난 김에, 사용했던 메타태그를 기반으로 짧게나마 정리해보고자 한다.
메타태그란?
웹 브라우저나 검색 엔진 등에게 웹 페이지에 대한 정보를 제공하는 역할을 하며, 사용자에겐 보이지 않지만, 문서의 메타데이터를 설명하고 해석하는 데 사용되는 태그이다.
+ 메타데이터 프로토콜:
메타데이터를 교환하고 공유하기 위한 규칙과 프로토콜을 정의하여, 다른 시스템이나 애플리케이션 간에 메타데이터를 일관되게 해석하고 활용할 수 있습니다.
일반적으로 메타데이터 프로토콜은 메타데이터를 표현하기 위한 표준 형식이나 구조를 정의하고 이는 메타데이터의 필드, 데이터 유형, 표기법 등을 포함할 수 있다.
메타태그의 역할
- 웹페이지 정보 제공 :
메타태그는 웹 페이지의 제목, 설명, 키워드와 같은 정보를 제공하는데, 검색 엔진이 웹페이지를 색인화할 때, 중요한 역할을 한다. - 검색 엔진 최적화(SEO):
메타태그를 적절하게 사용하면 검색 엔진에서 웹 페이지를 더 잘 인식하고 검색 결과에 노출시킬 수 있다. 예를 들어,<title> 태그는 검색 결과에 표시되는 페이지 제목을 정의하며,<meta name="description"> 태그는 검색 결과에 표시되는 페이지 설명을 정의한다. - SNS 공유 :
메타태그를 사용하여 웹 페이지가 소셜 미디어에서 공유될 때 어떻게 표시되는지 제어할 수 있습니다. Open Graph 프로토콜을 사용하는<meta property="og:...">태그들은 소셜 미디어에서 페이지 제목, 설명, 이미지 등을 지정할 수 있다.
메타태그의 중요성
- 검색 엔진 최적화: 메타태그는 검색 엔진에서 웹 페이지를 색인화하고 검색 결과에 노출시키는 데 영향을 미치는데, 적절한 메타태그를 사용하여 웹 페이지를 검색 결과 상위에 노출시키는 데 도움이 된다.
- 사용자 경험 개선: 메타태그를 통해 웹 페이지의 제목, 설명 등을 명확하게 제공하면 사용자가 검색 결과에서 웹 페이지를 선택할 때 정보를 쉽게 파악할 수 있다.
- 소셜 미디어 공유: 소셜 미디어에서 웹 페이지가 공유될 때 메타태그를 사용하여 페이지가 어떻게 표시되는지 제어할 수 있다. 이를 통해 공유된 링크의 가시성과 유용성을 높일 수 있다.
Open Graph란?
페이스북에서 만든 웹 페이지의 메타데이터를 정의하기 위한 프로토콜로, 웹 페이지가 소셜 미디어 플랫폼에서 공유될 때 정보를 제어하고 보다 풍부한 미리보기를 제공하기 위해 사용된다고 한다.
OG 주요 태그
<meta property="og:type" content="website" /> // type: 웹 페이지 유형 지정(website / article / viedo /audio / music.song / music.album / book / profile 등)
<meta property="og:title" content="티스토리 블로그 예시" /> // title: 웹 페이지 제목 지정
<meta property="og:description" content="티스토리 블로그 예시 페이지입니다." /> // description: 웹 페이지의 설명 지정
<meta property="og:image" content="https://example.com/images/blog-cover.jpg" /> // image: 웹 페이지의 대표 이미지 URL을 지정하여, 웹 페이지가 공유될 때 사용됨
<meta property="og:image:width" content="1200" /> // image:width: 대표 이미지의 가로 크기
<meta property="og:image:height" content="630" /> // image:height: 대표 이미지의 가로 크기
<meta property="og:url" content="https://yourblog.tistory.com" /> // url: 웹 페이지의 Url 지정
<meta property="og:article" content="https://yourblog.tistory.com/articles/123" /> // article: 웹 페이지가 기사나 글 관련된 내용임을 지정
<meta property="og:video" content="https://example.com/videos/sample-video.mp4" /> // video: 웹 페이지와 관련된 동영상 URL 지정
<meta property="og:audio" content="https://example.com/audio/sample-audio.mp3" /> // audio: 웹 페이지와 관련된 오디오 파일 지정Twitter Card란?
트위터에서 웹 페이지를 공유할 때 사용되는 메타데이터 프로토콜로, Twitter Card를 사용하면 웹 페이지가 트위터 피드에 공유될 때 더 풍부한 정보와 미리보기를 제공할 수 있다.
Twitter Card 주요 태그
<meta name="twitter:card" content="summary_large_image" /> // card: summary_large_image 카드 유형을 지정
<meta name="twitter:title" content="티스토리 블로그 예시" /> // title: 웹 페이지 제목 지정
<meta name="twitter:description" content="티스토리 블로그 예시 페이지입니다." /> // description: 웹 페이지의 설명 지정
<meta name="twitter:image" content="https://example.com/images/blog-cover.jpg" /> // image: 웹 페이지의 대표 이미지 URL을 지정하여, 웹 페이지가 공유될 때 사용됨
<meta name="twitter:site" content="@YourTwitterAccount" /> // site: 트위터 계정의 사용자명 지정
<meta name="twitter:creator" content="@YourTwitterAccount" /> // creator: 웹 페이지의 작성자 트위터 계정 사용자명 지정Etc
기타 프로토콜(?)
그렇다면,
위에서 언급한 Open Graph와 Twitter Card가 가장 많이 쓰이는 편인데, 문득 궁금해져서 일부 친숙한 플랫폼들은 어떤 프로토콜을 사용하고 있는지 궁금해서 찾아봤다.
인스타그램
인스타그램도 OG 프로토콜을 사용하는데, 이와 더불어형식의 메타태그도 확인할 수 있다.
찾아보니, 메타 자사에서 만든 프로토콜인 것으로 보인다.
틱톡
틱톡은 OG와 twitter card를 동시에 사용하고 있는 것으로 보이고, 다른 특징은 찾을 수 없었다.
티스토리
티스토리도 OG와 twitter card를 동시에 사용하고 있는 것으로 보이고, 다른 특징은 찾을 수 없었다.
꿀팁
물론 메타태그에 어떤 속성들이 있는지 다 알고 만드는 것이 가장 좋지만, 일부 요소들만 삽입하면 메타태그들을 생성해주는 좋은 사이트가 있다.
메타태그 생성사이트
위 링크를 통하면 1번째 사진과 같이 나오는데, 본인이 메타태그를 만들고 싶은 사이트 주소, 이미지, 제목과 설명을 입력 뒤
GET CODE 클릭시 2번째 사진과 같이 메타태그를 긁어갈 수 있다.
(예시는 이번 프로젝트 때 만든, 마켓칼리 클론코딩이다.)
주의사항
메타태그에 img의 경로를 적절히 첨부했는데도, 공유 시에 사진이 안 뜨는 경우가 발생했고, 2가지 문제가 있었다.
1. SVG
이미지의 퀄리티를 위해서, 프로젝트에서 사용했던 이미지들은 기본적으로 SVG였는데,
OG에서는 svg를 지원하지 않는다.
(참고1: 인디웹
참고2: 공식사이트 )
2. 캐시(Cache)
이미지를 SVG에서 PNG로 고쳤는데도, 문제가 해결되지 않았다.
결론부터 말하자면, 캐시된 데이터로 인해 변경사항이 즉시 반영되지 않을 수가 있다.
이를 위해, 카카오 캐시제거 사이트를 이용해 캐시를 제거하여 해결했다.
위 2가지 문제를 해결한 결과,
문제를 해결할 수 있었다.
메타태그 데이터에 대해 짧게나마 정리해봤는데, 조금 더 친해지는 시간이 필요한 것 같다.
