[TIL] SEO, Image Optimization

SEO

SEO(Search Engine Optimization)는 웹사이트나 웹페이지를 검색 엔진에서 더 잘 찾을 수 있도록 최적화하는 과정입니다
이는 웹사이트의 검색 엔진 순위를 향상시켜 더 많은 트래픽을 유도하는 것을 목표로 합니다

SEO를 진행하는 방법
적절한 메타 태그 사용: <title>, <meta description> 등의 HTML 메타 태그는 검색 엔진에 페이지의 내용을 알리는 중요한 요소입니다
정적 URL 사용: 검색 엔진은 정적 URL을 동적 URL보다 더 쉽게 이해하고 분석합니다
페이지 로딩 속도 개선: 이미지 최적화, 레이지 로딩, 비동기 스크립트 로딩 등을 통해 페이지 로딩 속도를 향상시킵니다
모바일 최적화: 반응형 디자인이나 별도의 모바일 페이지를 제공하여 모바일 사용자에게도 좋은 사용자 경험을 제공합니다
HTML 시맨틱 태그 사용: <header>, <footer>, <article> 등의 시맨틱 태그를 사용하여 컨텐츠의 구조를 명확히 합니다
Alt 텍스트를 통한 이미지 최적화: alt 속성을 사용하여 이미지에 대한 설명을 제공합니다, 이는 검색 엔진이 이미지의 내용을 이해하는 데 도움을 줍니다
JavaScript SEO: 동적으로 컨텐츠를 렌더링하는 경우, 검색 엔진이 이해할 수 있도록 서버 사이드 렌더링(SSR)이나 프리렌더링을 고려합니다
컨텐츠 접근성: 텍스트를 잘 구조화하고, 명확한 제목, 부제목을 사용하여 컨텐츠의 접근성을 높입니다.

 

 

Image Optimization

이미지 최적화는 웹사이트의 로딩 속도를 향상시키고, 그 결과 사용자 경험과 SEO를 개선하는 중요한 과정입니다
이미지가 페이지 로딩 속도에 큰 영향을 미치기 때문에 이를 효과적으로 관리하는 것이 중요합니다

이미지 최적화 방법
적절한 파일 형식 선택: JPEG, PNG, GIF 등의 파일 형식에 따라 압축률과 품질이 달라집니다
예를 들어, 사진은 JPEG로, 아이콘과 같은 단순한 그래픽은 PNG나 SVG로 저장할 수 있습니다
이미지 압축: 툴을 사용하여 이미지의 파일 크기를 줄입니다. 예로, ImageMagick, TinyPNG, GIMP 등이 있습니다
레이지 로딩 적용: 뷰포트에 나타나지 않은 이미지는 로딩을 미루어 초기 로딩 속도를 향상시킵니다
CSS 스프라이트 사용: 여러 작은 이미지를 하나의 큰 이미지로 만들고 CSS로 위치를 조정하여 네트워크 요청을 줄입니다
이미지 CDN 사용: 이미지를 빠르게 전달하기 위해 Content Delivery Network을 사용합니다
적응형 이미지: 사용자의 스크린 크기와 해상도에 맞게 다양한 크기의 이미지를 제공합니다. HTML의 srcset 속성이나 JavaScript를 사용할 수 있습니다
이미지 메타데이터 제거: 카메라 정보, 위치 정보 등 불필요한 메타데이터를 제거하여 파일 크기를 줄입니다
CSS 및 JS를 활용한 효과: 필요한 경우, 이미지 대신 CSS나 JS를 활용하여 효과를 줍니다. 이는 파일 크기를 줄이고 로딩 속도를 향상시킵니다
Alt 텍스트 및 ARIA 레이블 사용: 접근성을 높이기 위해 이미지에 적절한 alt 텍스트나 ARIA 레이블을 추가합니다