정성스럽게 쓴 글이 구글에 검색이 잘 안 된다면 너무너무너무 슬프겠죠..? ㅠㅠ
내가 쓴 글이 구글 검색결과에 잘 나오게 하려면 Google Search Console을 잘 이용해야 하는데요!
이를 위해 구글에서 개발자들을 위한 세미나를 열어주었죠.. 물론 저도 참석했고요 :)
구글 스타트업 캠퍼스에서 열린 <웹 개발자들을 위한 잡다한 웹지식 세미나>를 다녀온 따끈따끈한 후기, 지금 바로 시작합니다 😁
구글 검색 꿀팁
- 큰 따옴표 이용 “위코드 후기” 따옴표 안에 입력한 문장과 정확히 일치하는 게시물만 보여줍니다.
- 검색어 제외(-) 선릉맛집 -강남 빼기 연산자뒤의 단어를 제외한 검색결과만 보여줍니다. 이 기능은 인스타그램 같은 sns에서 꼭 필요한 기능인데.. 언젠간 개발되겠죠 ?!
- 사이트 연산자[site:] site:naver.com 위코드 입력한 사이트에서만 원하는 키워드에 해당하는 검색결과만 보여줍니다.
다음과 같이 네이버에서 위코드를 검색한 결과만 보여줍니다.
- data range datarange:2019-11-01..2019-11-03를 설정하거나 검색결과-도구에서 날짜 지정하면 해당하는 날짜내의 검색결과만 보여줍니다.
- link:url link:www.naver.com 특정 페이지로 연결된 페이지를 검색해줍니다.
- 와일드 카드[*] 특정 키워드 사이에 들어갈 정확한 단어를 모를 때 사용할 수 있습니다. ex) 위코드 * 부트캠프
- 계산기 간단한 계산도 검색창에서 가능합니다. 평소에 자주 쓰는 방법인데 테라바이트 계산도 해줄지는 몰랐네요! ex) 1TB * (1.15^4)
- 특정 파일 타입 찾기 [filetype:] filetype과 키워드를 입력하면 해당하는 키워드의 해당하는 형식의 파일만 보여줍니다. ex) filetype:pdf 커피 지출 통계
- 언어/국가 변경 h1=[language code] gl=[country code] h1=ko&gl=kr 라고 입력하면 한국에서 한국어로 검색한 결과를 보여줍니다.
- bonus! answer to life and universe and everything 라고 검색하면 42 나옵니다 ㅋㅋ
소설 은하수를 여행하는 히치하이커들을 위한 안내서에 나오는 구절 중에 하나인데… 영화로 재밌게 봤는데도 이걸 기억하지 못했네요! 조만간 위코드 계정지기는 독서삼매경에 빠질 예정입니다~!
구글에 검색이 잘 되게 하려면?
시대가 변함에 따라, 구글 검색 알고리즘에도 변화가 생겼는데요! 현재 구글은 사이트 속도, https 사용 유무, 모바일 친화 여부 등을 포함해 다양한 조건들을 통해 검색랭킹을 결정합니다.
모바일 친화성 체크하기
- 모바일 친화성 테스트 페이지 아래의 페이지에 접속해서 페이지 주소를 넣으면 구글봇이 테스트한 결과가 나옵니다. 이를 통해 모바일 페이지에서 생길 문제를 알려주고, 내 사이트가 얼마나 모바일에 친화적인지 알 수 있습니다.
https://search.google.com/test/mobile-friendly?hl=ko
- search console url 검사도구 위의 사이트보다 좀 더 자세한 정보를 알려줍니다. 본인이 소유한 페이지주소를 입력하면 URL검사를 실행합니다. 이 때, url이 Google에 등록되지 않았다는 메시지가 나온다면 구글에 노출되지 않는다는 말이니까 조치를 취해야겠지요? :)
Https 사용하기
https는 HTTP Over Security Socket Layer! 즉, 보안이 강화된 http라고 보시면 됩니다.
그럼 왜 https를 쓸까요? 이유인즉슨, 인터넷사용자와 서비스 제공자가 안전하게 통신하기 위함입니다. 다시 말해..
- 제 3자가 중간에서 메시지 가로채지 못하도록
- 트래픽을 분석해서 사용자를 특정하지 못하도록
- https가 필수인 최신 웹기술을 사용하도록
이지요!
그렇지만 https를 쓰는 방법이 100% 안전한 방법은 아닙니다.
웹브라우저에서 웹 서버로 가는 통로에 메시지들은 암호화가 되어있지만 그 메시지가 전송되기 전에 제 3자가 메시지가 가로챌 수 있기 때문입니다. 이에 대한 해결방법으론 Trusted Recursive Resolver나 DNS over HTTPS를 이용 혹은 최소 데이터만 전송하는 방법이 있겠습니다.
http://hacks.mozilla.or.kr/2019/10/a-cartoon-intro-to-dns-over-https/
위의 Hacks 웹 기술 블로그를 참고하시면 이 과정에 대해 잘 나와있습니다!
Light House 사용하기
라이트하우스는 웹앱 품질 개선 도구입니다. 개발자도구 탭의 Audits를 클릭해보면 확인해볼 수 있습니다. 이를 통해 웹앱의 성능, 접근성, SEO를 검사할 수 있습니다.
그 밖에…
구글은 자바스크립트를 싫어한다???
JavaScript를 많이 쓰면 구글 검색노출이 잘 안된다는 뜬소문도 있었다봅니다..! 하지만 자바스크립트가 웹에서 점점 더 중요해짐에 따라 많은 것들을 지원하고 있습니다.
구글봇 41에서 현재는 에버그린으로 변화도 했고, 크롬이 새로운 버전을 출시하면 구글봇도 이에 따라 버전을 업그레이드합니다. 예를 들어.. 최근에는
- ES6+
- 새로운 web API
- Less polyfills
등등의 요소들을 지원하고 있지요!
구글봇이 궁금하다면 하단의 링크로 들어가시면 됩니다! bit.ly/evergreen-googlebot
다양한 랜더링 방식
- Universal Javascript 자바스크립트가 서버에서도, 클라이언트에서도 돌아갈 수 있게 하는 것을 옛날에 저렇게 불렀습니다.
- Server-side rendering 페이지가 자주 바뀌지 않는 경우는 pre-rendering이라고 해서 페이지가 바뀔 때 랜더링 되게 하는 방식입니다. 요즘 많이들 쓰는 방식이지요.
- SSR + hydration 서버사이드 랜더링 + 사용자의 인터랙션에 따라 페이지가 랜더링 되는 것입니다.
- Dynamic Rendering 구글봇이 들어올때와 사용자가 접속했을때 각각 다른페이지를 보여주는 방식입니다. 구글 측에선 굳이 이렇게 설정할 필요 없다고 하네요! 그냥 사용자가 보는 그대로를 구글봇에게 보여주면 된다고 합니다~!
Server Side Rendering(SSR)
프론트앤드 단에서 어떤 툴을 쓰느냐에 따라 서버사이드 랜더링을 하는 방법은 다양합니다 :)
리액트를 쓴다면?
- react-snap
- Next.js
뷰를 쓴다면?
- Vue-server-renderer
- prerender-spa-plugin
- Nuxt.js
앵귤러를 쓴다면?
- server.engine
하지만 구글은 SSR을 권장하지 않는다고 하네요..! 제가 아직 서버사이드랜더링 방식을 제대로 이해하지 못해서 그 이유에 대해선 조금 더 알아봐야 겠지만.. 구글에서의 SEO 때문에 SSR 방식을 선택한거라면 굳이 그럴 필욘 없을것도 같네요! (이 부분은 좀 더 조사한 후에 덧붙이겠습니다!!!!)
Lazy Loading
새 화면이 로드 될때마다 매번 이미지가 동시다발적으로 화면에 뜬다면 메모리 소모가 굉장히 큽니다. 그래서 이미지나 비디오를 로드할때는 lazy loading방식을 적용해야 하는데요!
위와 같은 방식으로 이미지를 로드하면 사용자의 intersection을 통해 표준화된 방식으로 lazy-loading된 콘텐츠를 볼 수 있게 됩니다.
http://bit.ly/native-lazyload
위의 페이지를 접속해보면 native lazy-loading 방식에 대해 자세히 나와있는데요.
크롬 75버전부터는 img와 video태그에 loading="lazy" 속성을 적용하면 레이지로딩을 native로 지원한다고 하네요!
발표하신 엔지니어 분께서 강조하신 부분을 다시금 정리하자면..
- 페이지를 이해하는데 필요한 서버 리소스들이 열려있어야 합니다.
- lazy-loading content를 이해할 수 있도록 만드는 게 중요합니다.
- 모바일 친화적으로 페이지를 만들어야 합니다.
페이지를 만들땐, 구글 검색이 어떻게 잘 될까를 고민하기 보다는 사용자에게 어떻게 좋게 보이는지를 고민해야 한다고 하네요! 사용자 친화적인 페이지를 만들면 구글은 그걸 따라간다고 했습니다!