본문 바로가기

개념/HTML

(3)
웹표준, Semantic HTML, 웹접근성 🤔웹표준이란 웹 표준이란 다양한 웹브라우저에서 동등하게 작동하게 하기 위한 권고사항이다. 이 '표준'이란 것은 w3(https://www.w3.org/)이란 기관에서 권고사항을 모아서 소개한다. 웹표준을 지키면 다양한 브라우저(사파리, 크롬, 파이어폭스, 엣지, 오페라)에서 동등하게 잘 작동하는 웹페이지를 만들 수 있다. 여기서 '동일'대신, '동등'을 사용한 이유는, 브라우저가 다르면, 완벽하게 동일하게 작동할 수는 없기 때문이다. 그래도 웹표준을 사용하면 동등한 수준의 필요 기능을 제공할 수 있어진다. 더불어, 이런 호환성 외에도 다양한 장점들이 있어 웹표준은 꼭 지키는 것이 좋다. 💡웹표준을 사용하면 유지 보수가 편해진다. (+코드 경량화, 트래픽 비용 감소) 웹 호환성을 확보할 수 있다. 검색 효..
meta 태그 캐시 초기화 - 카카오 공유 디버거 😫 meta태그 바꿨는데 왜 안바뀌는 건데 대체..! 예전에 카카오 공유화면 보면서 meta 태그를 설정하는데 캐시초기화가 안되는 바람에 여기저기 공유하고 용을 쓰면서 확인했던 기억이 있는데, 좋은 걸 알게되었다. "카카오 공유 디버거" 두둥! 카카오계정 로그인 여기를 눌러 링크를 확인하세요. accounts.kakao.com 🔥 걍 주소 넣고 버튼 누르면 끝 사용법이랄것도 없다..ㅎㅎ 이런식으로 공유할 url을 입력하고 캐시 초기화 버튼을 누르고, 다시 카톡으로 가서 링크를 공유하면, 바뀐 메타태그가 적용된 화면이 보인다. 디버그 를 눌러보면 meta 태그로 설정한 사항들을 표로 확인해 볼 수 있다. 완전 유용하다.
SEO를 위한 HTML 🤔 SEO란 SEO(검색 엔진 최적화)는 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정이다. 검색 랭크 개선이라고도 한다. 🔥 SEO에 영향을 주는 HTML 태그들 대표적으로 과 가 있다. 종류 설명 예시 - 안에 들어감. -되도록 간결하게 써야 overflow elipsis되는 경우를 피할 수 있다. (30자 이내) -핵심 키워드가 꼭 들어가되, 반복되지 않도록! - 안에 들어감. -SEO를 위한 meta태그는 name 속성을 가짐 -공유를 위한 meta태그는 property 속성을 가짐 -공유를 위한 property 값에는 "og(open graph)"가 붙음 사진 = 에어비앤비 메타 태그 종류들, (이 외에도 많다) 📌 meta 태그 종류와 주의사항 종류 설명 및 주의사항 og:url 페이..