TIL #13 - section과 article 의 차이, SEO - og태그 적용, 이미지 스프라이트

TIL #13 - section과 article 의 차이

 

 

 

 

🧑‍💻 오늘 나는 무엇을 배웠는가?

• section과 article 의 차이
• SEO (검색 엔진 최적화)
• 이미지 스프라이트

 

 

 

 

❓ section과 article의 차이

 

 

✔️ section

- 서로 관계있는 문서를 분리하기 위해 사용됨.

- 페이지와 같은 관련 문서들을 모음.

 

 

만약 section을 사용하려는 공간이 논리적인 관계가 없다면 div로 대체할 수 있음.

 

 

✔️ article

 

- 독립적이고 홀로 사용가능한 문서에 사용됨.

- 주로 뉴스 기사, 댓글, 블로그 글, 게시판 영역 같은 곳에 사용됨

 

 

 

 

 

 

 

🐳 이렇게 적용해볼거에요

 

나는 지금 하는 프로젝트에서 큰 단위로 묶을때 section을 사용했다.

 

게시판 글 같은 경우도 그런데 이런 곳에는 article을 쓰는 것이 더 적절하다는 것을 새로 배웠다.

 

앞으로는 section과 artcle을 적절하게 사용해봐야겠다.

 

 

 

---

 

❓ SEO (검색 엔진 최적화)란?

 

 

검색 엔진 결과 페이지에서 웹페이지 또는 웹사이트의 상위 노출도를 높이는 작업을 SEO(Search Engine Optimization)라고 합니다.

 

이 방식은 모든 사이트에서 적용되는 것은 아니고 구글에서 주로 사용되는 방식입니다.

 

일례로 네이버에서는 별로 효과가 없는 방식이라고 합니다. 이는 검색 엔진의 차이 때문이죠.

 

 

 

SEO에 중요한 태그들이 있는데 다음과 같습니다.

 

- title

- description

- robots

- canonical

- OG 태그 (오픈 그래프)

 

 

이중에서 관심이 가는 태그는 오픈 그래프 태그였습니다.

 

 

우리가 보통 카톡방 같은데서 사이트를 고유할 때 밑에 나오는 미리보기 같은 것이 나오는데,

 

이것을 정의할 수 있는 태그가 OG 태그 입니다.

 

 

굉장히 흥미롭더라고요.

 

가끔 저도 이렇게 지인에게 보낼때가 있는데 이 태그를 사용해서 저 화면을 조정할 수 있다는 사실에 지금 진행중인 프로젝트에 바로 적용해보았습니다.

 

 

지금 배포되어있는 프로젝트의 index.html에 제가 원하는 대로 구성을 해보고 git push 를 해보았습니다.

 

두근거리는 마음으로 카톡창에 보내보니

 

 

 

 

오잉 안바뀌었습니다! ?? 적용이 왜 안되지? 

 

 

 

🐳 이렇게 해결했어요

 

 

이 문제는 바로 카카오톡에서 서비스 효율을 높이기 위해 캐시하여 띄워주기 때문입니다.

 

따라서 아까 사용했던 그 데이터가 그대로 사용되었던 것이지요.

 

https://developers.kakao.com/tool/debugger/sharing

카카오계정

 

 

이것을 해결하기 위해서는 위 카카오 사이트에 들어가서 원하는 사이트의 캐시를 초기화 시켜주면됩니다.

 

 

 

제 사이트를 입력하고 캐시 초기화 버튼을 눌러줍니다!!!

 

 

이후 다시 카톡방으로 링크를 보내보면,

 

 

이렇게 잘 뜨는 것을 확인할 수 있습니다 ㅎㅎ

 

 

이미지는 보통 1200 x 630을 사용한다던데 전 잘리더라고요.

 

그래서 800 x 400으로도 해봤지만 그대로 였습니다. 둘다 2대1 비율이여서 당연한 결과이겠죠...? 🤭

 

 

너비를 줄이면 사진이 뭉게져서 추후에 새로운 사진을 사용해서 넣어줬습니다.

 

 

 

오늘 안 주제 덕분에 프로젝트를 공유할 때 좀 더 보기 좋게 구성할 수 있게 만들 수 있었네요

 

 

 

 

 

---

 

❓ 이미지 스프라이트

 

이미지 스프라이트는  여러개의 이미지를 하나의 이미지로 만들어 놓는 기법을 말합니다.

 

 

이 기법을 사용하면 얻는 이점이 있습니다.

 

 

1. 이미지 로딩 속도가 향상됩니다.

 

2. HTML 마크업이 간결해지고 스크린 리더의 탐색 속도가 향상됩니다.

 

3. 하나의 파일만 관리하면 되어서 편리합니다.

 

 

 

위와 같은 이유로 이미지 크기가 커서 렌더링 속도가 늘려질 경우의 개선 방법 중 하나로 사용됩니다.

 

 

 

 

 

---

🤔 이런 고민과 문제점들이 있었어요

 

 

 

오늘 공지사항 상세페이지를 만들어야 하는데 이걸 페이지로 만들지 컴포넌트로 따로 만들어서 현재 페이지에서 렌더링 하는 식으로 할 지 고민되더라고요?

 

근데 컴포넌트 방식을 사용하면 제가 구성한 파일 구조상 단반향 데이터로 보내는 규칙을 어기게 되기 때문에 적절한 방법 같지 않았어요.

 

그래서 결국 따로 페이지를 만들기로 결정하였고,

 

 

 

 

위와 같이 각 게시물의 파라미터를 url로 만들어서 게시글에 접근할 수 있게 구성해봤습니다.