프론트엔드 개발자로 성장하기

웹페이지를 페이스북이나 카카오톡 같은 SNS에서 공유할 때,미리보기에 멋진 썸네일과 설명이 함께 보이도록 만들 수 있습니다.그 핵심이 바로 오픈그래프(Open Graph) 설정입니다.이번 글에서는 HTML에 오픈그래프 태그를 적용하는 방법과SNS에서 잘 보이게 하기 위한 팁들을 정리해봤어요.🔹 head 태그 안에서 할 수 있는 기본 설정이 description은 화면에는 표시되지 않지만,검색 엔진이나 일부 SNS에서 페이지를 요약할 때 사용됩니다.대형 서비스같은 경우 각자 요구하는 meta 태그가 있습니다.  🔹 오픈그래프(Open Graph)란?웹페이지를 소셜 그래프(social graph) 안의 **풍부한 미디어 객체(rich object)**로 만들어주는 프로토콜 📌 공식 사이트: https:..

웹사이트를 운영하거나 프론트엔드 개발을 하다 보면,방문자가 얼마나 오는지, 어떤 페이지를 많이 보는지 궁금해지곤 하죠.그럴 때 꼭 필요한 도구가 바로 **Google Analytics(구글 애널리틱스)**입니다.이번 포스팅에서는 개인 블로그나 포트폴리오 페이지에 GA를 처음 연결하는 방법을 정리해봤습니다. ✅ 1. 구글 애널리틱스(GA)란?웹사이트에 누가, 언제, 어디서, 어떻게 들어왔는지를 추적하고 시각화해주는 도구입니다.무료로 제공되며, GA4 버전이 현재 기준 최신 버전입니다.(2023년부로 기존 UA는 중단되었습니다.) ✅ 2. GA4 연결 순서 요약🟢 Step 1: 구글 애널리틱스 접속👉 구글 애널리틱스 접속 링크 Redirecting... analytics.google.com 🟢 Step..