twitter cards

Programming Language/HTML

[HTML]프로젝트가 끝나며 정리해본 메타태그(feat. OG, Twitter Cards)

멋사 프론트엔드 스쿨 6기 과정 중 첫 프로젝트(HTML + CSS)를 하던 중, SEO도 고려할 것이라는 조건이 걸려 있어서 찾던 중 메타태그를 적절히 활용해야 접근성 측면에서 성능이 개선된다는 사실을 알았다. 우리는 흔히 html파일을 만들고 !+Tab만 누르면 기본적으로 위와 같은 html 기본 골격을 가진 자동완성을 이용하곤 하지만, head 내에 위치한 meta태그를 보며, 인코딩 방식이 UTF-8이고, 뷰포트를 장치 화면 너비에 맞게 설정한다라는 사실 외에 meta 태그에 대한 궁금증을 품어본 적이 없었던 것 같다. 프로젝트에서는 충분히 메타태그를 공부할 시간없이 구글링을 통해 open graph를 이용해 단순히 해결했지만, 프로젝트가 끝난 김에, 사용했던 메타태그를 기반으로 짧게나마 정리해보..