결론: 사용자가 좋아해야 검색엔진도 좋아한다.
Search Engine Optimization
다양한 검색엔진에 우리가 제작한 사이트가 얼마나 빠르게 얼마나 상위에 노출되는가가 중요한 화두로 떠올랐고, 그를 위한 방법을 모아 웹사이트에 적용하는것을 검색엔진 최적화라고 한다.
마치 인스타그램에 #부트캠프 #3개월취업 #취업보장 붙여서 광고를 하듯...
사용자의 알고리즘에 최대한 걸려들기(?) 위해 검색엔진 최적화를 해줄 수 있다.
google, naver, daum 등 다양한 검색 SEO 적용 기법을 각각의 개발자 지원 사이트에서 설명하고 있고, 정책도 다 다르다. 예를 들어 google 같은 경우는 홈페이지 내 youtube 영상을 포함하면 좀 더 상위로 올가고, 이러한 정책의 기조도 매번 달라진다. (대행해주는 업체가 있을만큼 복잡하다.) 광고와 연결되어 금전적인 보상과 밀접한 관련이 있을 수 있기 때문에 중요하다.
구글의 검색엔진 맘에 들기위한 프로미스 101
<title> 태그를 통해 정확한 페이지 제목 정하기
- 한 가지 사이트에 소속되어 있다고 해서 단일한 내용으로 페이지 제목을 통일하는 것보다 페이지 마다 고유한 제목을 사용하면 검색 엔진은 각각의 페이지가 서로 어떻게 쓰임이 다른지 파악 할 수 있다
- 짧고 적절한 제목을 사용해야 한다. 예시처럼 제목이 너무 길거나 관련성이 낮은 것으로 판단되면 검색엔진은 검색 결과에 제목의 일부만 표시하거나 자동으로 생성된 다른 제목을 표시할 수도 있. 또한 사용자가 사용한 검색어나 사용기기에 따라 서로 다른 제목을 표시하는 경우도 있음
<html>
<head>
<title>에어비앤비: 휴가용 임대 숙소, 통나무집, 비치 하우스, 독특한 숙소 및 체험</title>
</head>
<body>
...
description 메타 태그 사용하기
- description 메타 태그에 쓰여진 내용을 페이지의 스니펫으로 사용할 수 있다. (경우에 따라 페이지 안의 텍스트 중에 사용자의 검색어와 잘 어울리는 텍스트가 있는 경우 이를 스니펫으로 선택할 수도 있다) 때문에 description의 내용이 100% 스니펫에 사용되는 것은 아니지만, Google에서 스니펫으로 사용할 텍스트를 찾지 못하는 경우도 있기 때문에 description 메타 태그를 각 페이지에 추가하는 것은 항상 추천됨!
<html>
<head>
<meta name="description" content="에어비앤비에서 세계 곳곳의 휴가용 임대 숙소, 통나무집, 비치 하우스, 독특한 숙소 및 체험을 찾아보세요. 호스트 분들이 있기에 가능합니다.">
</head>
<body>
...
- 각 페이지에 서로 다른 description 메타 태그가 있으면 site: 연산자를 사용한 검색 (사이트 내에서 해당 키워드를 검색 등 사용자가 특정 사이트 안에서 여러 개의 페이지를 가져올 수 있는 검색에 도움됨. 사이트의 모든 페이지 또는 여러 페이지에 단일한 description 메타 태그를 사용하는 경우는 피하자
heading 태그들 잘 쓰기
의미 있는 제목을 사용하여 중요한 주제를 표시하고 콘텐츠의 계층 구조를 만들어 사용자가 쉽게 문서를 탐색할 수 있도록 한다.페이지 내용 중 중요한 부분과 덜 중요한 부분이 무엇인지 생각해보고 제목 태그를 어디에 사용하는 것이 적절할지 결정한다. 다만 페이지에 제목 태그가 너무 많으면 사용자가 내용을 살펴볼 때 하나의 주제가 어디에서 시작되어 어디에서 끝나는지 결정하기 어려워지기 때문에, 꼭 필요한 곳에 의미에 맞게 사용하고 제목의 내용이 너무 길어지지 않게 작성해야 한다. (시멘틱 태그 잘 쓰라는 이야기네..)
의미있는 링크텍스트 작성하기
연결된 페이지의 기본적인 내용을 파악할 수 있는 텍스트를 작성해야 한다. '웹사이트', '쇼핑몰', '여기를 클릭하세요' 등 그 의미를 짐작하기 어려운 텍스트, 연결된 페이지와 아무런 관련이 없는 텍스트를 사용하는 경우, 텍스트의 내용이 연결된 url 주소 그 자체일 경우는 피하. 또한 일반적으로 링크를 작성할 때 외부 웹사이트와의 링크만 고려하기 쉬운데, 내부 링크용으로 앵커 텍스트를 사용하는 것을 고려해본다면 사용자 및 Google이 사이트를 탐색하기 더욱 쉬워진다는 사실! 이때 사용자를 생각하기 보다는 검색 엔진만을 고려하여 키워드로만 잔뜩 채워져 있거나 지나치게 긴 앵커 텍스트를 사용하는 경우는 지양하고, 사용자가 사이트 탐색에 도움이 되는 링크인지 고려해야 한다.(고려할게 많다~!)
! 재밌는 사실
링크태그의 크기 또한 영향을 미친다는거! 실제로 화면을 클릭해서 사용하는 사용자들도 있기때문에 너무 작은 링크태그는 접근성에 좋지 않고 검색엔진에서 적합성 측면에서 무시될 가능성이 있다.
The Open Graph protocol을 아시나요?
쉽게 말해 사이트를 공유했을 때 사이트에 대한 정보를 미리 확인할 수 있게 하는 정보!
SEO에서 링크의 중요성은 아무리 얘기를 해도 모자라다! 실제로 구글은 A라는 페이지에서 B라는 페이지로 연결하는 링크가 있으면 그 링크를 일종의 투표로 생각한다고 한다. 많이 투표된 페이지 즉, 많은 링크들이 가르키는 페이지는 중요한 페이지로 판단되며, 중요한 페이지로 판단되면 페이지 순위가 높아집니다. (마치 자바스크립트의 가비지 컬렉터가 참조 카운팅 방식을 이용해서 메모리를 살피는것처럼!)
sns는 간접적인 트래픽을 유발하고 방문자를 일으키는 좋은 수단이다. 때문에 좀 더 보기 좋은 링크를 만들어 방문을 유도하는것은 SEO에 매우 중요하다.
- Facebook이나 트위터, Discord와 같은 SNS에서 주로 사용
- 일반적인 공유 프로토콜로, 표준은 아니지만 워낙 광범위하게 사용되기 때문에 거의 표준처럼 작동함
- 메타태그에 프로토콜 속성을 넣어서 적용할 수 있음
- ogp.me 를 방문하면 프로토콜들을 볼 수 있음
<meta property="og:title" content="페이지 제목" />
<meta property="og:type" content="컨텐츠 타입" />
<meta property="og:url" content="페이지 주소" />
<meta property="og:image" content="페이지 썸네일 이미지 주소" />
<meta property="og:description" content="페이지 설명" />
SEO를 고려한 HTML <img>
<img> HTML 마크업을 사용하면 크롤러가 이미지를 찾고 처리할 수 있다. 또한 이미지에 loading="lazy" 속성을 사용하면 브라우저는 이미지가 뷰포트의 일정 거리 안으로 들어와야 불러온다. 거리는 브라우저가 정의(알아서 할게~)하는데, 이미지를 보게 될 것으로 충분히 예상 가능한 상황에만 불러옴으로써 불필요하게 네트워크와 저장소 대역폭을 낭비하지 않고 렌더링 성능을 향상할 수 있다.
이미지가 필요한 순간에 불러옴으로써 속도,성능개선 -> 사용자 경험 증가 -> 브라우저 검색엔진도 좋아함! ㅇㅇ
그 외에도 이미지 태그를 사용할 때 고려할 것 들
- 의미를 잘 담은 alt속성
- 간단하지만 설명이 담긴 파일 이름 사용
- 이미지를 링크로 활용하고자 할때 대체 텍스트를 제공
구글에서 만든 최적화 검사 툴 이용해보기
- 내가 검사하고싶은 페이지에 들어가 크롬 개발자도구를 열어 Lighthouse탭을 열기
- 카테고리를 선택하고 분석하기를 누르면 선택한 항목에 대한 분석결과를 알려준다.
SEO에 대한 검사 분석 결과. 2개의 link에 설명태그 없음 / 이미지에 alt속성이 없다고 한다.
해당 항목을 클릭하면 세부사항을 볼 수 있다.
우리나라 검색엔진은 어떨까
네이버 검색엔진 최적화 가이드
상당히 상세하게 잘 정리되어 있다! 네이버에서 상단에 노출되고싶다면 이런것들을 잘 지켜주라. 근데 따라야 하는 양이 어마무시하다.
다음 검색엔진 최적화 가이드
네이버처럼 SEO자체에 대한 가이드라인을 제시하기보다는 포괄적이고 애매한 내용들
느낀점
검색엔진은 사용자에게 최적의 내용을 빠르게 찾아주는 방식으로 작동하기 때문에 결론적으로 사용자 경험 | 웹 최적화 | 검색엔진 최적화가 다른 개념이 아니고 함께 묶어서 고려해야 한다는 의견이다.
검색엔진 최적화는 개발자단 뿐만 아니라 컨텐츠의 내용도 당연히 포함이 되는데, 우연히도 본인의 남자친구가 그런 업체들에게 광고글을 써주는 카피라이터여서 주워들은 바로는 컨텐츠에 들어가는 키워드나 가이드라인이 굉장히 세세하다고 하니 이를 위한 경쟁이 얼마나 치열한지 가늠할 수 있다. 결론적으로 기획부터 마케팅, 개발자 등 전략적인 협업을 통해야지 정말 제대로 된 검색엔진 최적화가 아닐까 싶다.
참고자료
https://cs.daum.net/faq/15/15649.html#31070
Daum 고객센터
서비스 이용에 필요한 도움말을 찾거나 직접 문의하실 수 있습니다.
cs.daum.net
https://searchadvisor.naver.com/guide
웹마스터 가이드 - 네이버 서치어드바이저
네이버 검색을 위한 웹마스터 가이드 입니다. 웹마스터 가이드 라인은, 네이버 검색이 콘텐츠를 발견하고 색인할수 있도록 웹사이트에 필요한 기본 요소들을 다룹니다. 모든 웹사이트는 다릅니
searchadvisor.naver.com
https://support.google.com/websearch/answer/2466433?hl=ko
더 정확한 웹 검색결과 얻기 - Google 검색 고객센터
도움이 되었나요? 어떻게 하면 개선할 수 있을까요? 예아니요
support.google.com
'Front-End Developer > Computer Science' 카테고리의 다른 글
| pull했더니 내가 하던게 다 날라갔네...? git reflog로 모든커밋 확인하기 (0) | 2022.07.17 |
|---|---|
| 깃 커밋 템플릿 만들어서 간편하게 커밋해보자! (1) | 2022.06.22 |
| 규모가 크지 않은 팀프로젝트의 git-flow전략(+인프런 강의영상) (0) | 2022.06.21 |
| 면접관님: 메세지 큐와 이벤트루프가 뭔지 아시나요? (+ 유투브) (2) | 2022.06.15 |
| 면접관님: 브라우저 렌더링 과정을 설명해보시겠어요?(+유투브) (0) | 2022.06.15 |