soom 숨의 블로그 frontend developer

190430 TIL Webmaster Conference Seoul by Google

Apr 30, 2019 » 1막, TIL (Today I Learned)

Webmaster Conference Seoul

image

Webmaster Conference Seoul

구글코리아에서 주최한 웹마스터 컨퍼런스를 다녀왔다.

어떻게하면 검색엔진에서 노출이 잘되게 할 수 있을지, 검색 친화적인 사이트를 어떻게 만들수 있을지 등의 유익한 정보를 얻을 수 있었다.

1. How Search Works - Dong Hwi Lee

  • 구글 검색 첫 단계: 크롤링 (구글봇) - 웹 크롤러
  • Google negivates the web by crawling
  • follow the links from page to page (사이트맵을 따라 가기도 함)

  • 크롤링 -> 인덱스 (색인) 작성 -> 알고리즘에 따라 색인 탐색 (200개 이상의 알고리즘, 하루에 하나씩 새로운 알고리즘 탄생) -> rank the result

  • 검색결과

image

검색 결과 리스트 = bluelinks

  • Googlebot이 CSS, JavaScript, Images, XHR에 잘 접근할 수 있도록 해야 검색이 잘됨

  • Googlebot이 태그 등을 잘 이해할 수 있도록.

  • AMP - Accelerated Mobile Pages lightweght and near-instantly loaded web pages = 모바일 사이트 최적화 오픈소스 AMP 관련 참고글

  • 웹사이트 검색이 잘되게 할때 3가지 : PWA, AMP..

    • 분야마다 목적에 따라 달라질 수 있음
    • e-commerce 는 데이터베이스에서 많은 사이트가 생성됨 1) 사이트맵&&링크 잘 활용 2) 쇼핑몰들의 이미지로 되어있는 부분들 텍스트로 바꿔서 만들기 3) 메타 데이터 (각 페이지마자) 간략한 상품정보가 결과에 잘 나올 수 있도록

2. Google Trends in Google Search - Gary Illyes

  • Google mission
  • Listen to the user
  • Follow Google’s guidelines
  • Google Assistant의 요청 70%가 자연어. 예전엔 키워드 위주였는데 (“비빔밥 맛집”) 요새는 (“비빔밥 맛집 소개시켜줘”)라고 한다고.. why they talk to the phone? because it’s easier to do than typing
  • g.co/searchconsole

3. Make Better Websites for Your Users - part1

검색 친화적인 사이트 만들기 - 태그/이미지/링크의 올바른 활용 - 석인혁 && 정동기

  • 검색엔진 최적화란? : 검색엔진이 사이트를 쉽게 수집하고 색인할 수 있도록 페이지를 관리하기
    • 매일 검색엔진 알고리즘이 달라지기 때문에 확신할 수 없음
    • site: 연산자로 구글에 색인된 사이트의 페이지를 확인할 수 있다.
    • "" 연산자로 검색어와 일치하는 문구를 가진 페이지를 찾을 수 있다.
  • example.com/robots.txt / User-agent: *Disallow: /
    • 검색에 노출되지 않도록하기
    • robots.txt 는 언제 사용? 검색엔진의 트래픽을 조절하는 용도 (사용자와 관계 없음)
      • 불필요한 활용 -> Disallow: /css/, Disallow: /*.js, Disallow: /images/
      • 사이트 구현에 필요한 부분 막지 않기
      • 올바른 활용 -> Disallow: /search/ , Disallow: /s?=
      • 불필요한 트래픽을 일으키는 부분만 차단
  • 태그의 올바른 활용
    • 검색엔진 타이틀은 title 에서 가져옴, 요약은 meta name="description"에서 가져옴
    • 타이틀 태그: 가장 효과적인 방법, bookmark에서도 활용되니께.. 타이틀만으로 페이지의 내용을 파악할 수 있어야함
    • Meta description 속성사용: 간결하고 명확한 요약정보, 웹페이지 다른 내용을 제공
      • 가능한 모든 페이지에 태그/속성 다르게 활용
  • 텍스트의 최대한 활용
    • 가능한 모든 정보는 텍스트로 구현 (검색엔진은 이미지를 읽을 수 없음)
    • IMG_20170527_185723.jpg -> google-campus-seoul.jpg 파일명으로도 추측가능하게 하는 것이 중요함 / 파일명, alt txt도 한국어로 해도 됨 / 파일명은 하이픈, 언더스코어 뭐 편한대로 쓰는 게 좋음
    • “모든” 사용자를 위한 콘텐츠 제작- 스크린리더
  • 콘텐츠 관리
    • 자이트가이스트 (2008) - directory 검색 - 네이버
    • 컨텐츠. 검색의 사용도는 점점 더 구체화되어 간다.(구글 캠퍼스 -> 구글 캠퍼스 이용 시간)
    • 현재는 사이트의 모든 페이지가 검색에 적용됨 (하부 페이지 포함)
    • 가능한 구체적으로 공유가 가능하도록 (웹 = 공개)
      • 이미지가 소중하다면… 우클릭 방지가 아니라 워터마크 쓰셈
      • 우클릭 방지는 사용자 불편만 초래
    • 키워드 활용
      • 문장의 활용. 키워드 남발이 아니라 문장 내에 그 키워드가 다 들어갈 수 있도록! (서술형)
    • 계속적인 콘텐츠 유지보수
      • 해커들이 사이트 심어놓음
      • site: http://expo2020-korea-or.kr / 하면 일본 사이트 뜸
      • CMS 최신 버전으로 유지해서 보안 유지
      • 앵커 attribute ref="nofollow" 속성 적용해서 링크 이득 취하지 않도록. 게시판에서 아무나 글 쓸 수 있는 경우…
      • 스팸방지도구 introducing reCAPTCHA v3, g.co/recaptcha/v3
      • 이미 오염된 사이트도 업데이트를 한 후 console에 업데이트 ㄱㄱ

4. Make Better Websites for Your Users - part2

보다 효과적인 사이트 관리 - URL 구조/보안/스피드/모바일

  • 사용자가 페이지의 내용을 파악할 수 있게 URL을 설정
    • ko.wikipedia.org/wiki/반응형_웹_디자인 - 한글도 가능
    • 대표되는 페이지 연결 - canonical tag를 이용하여 표준 URL을 알려줌으로써 중복된 페이지 제거
  • 링크의 올바른 활용
    • 여기를 클릭 하면 많이 안 누름.. -> 구조화 데이터 확인 앵커 텍스트를 활용하여 페이지의 내용을 미리 파악할 수 있도록. 내부링크 - 관련된 페이지에 링크 걸어주기

  • 다국어지원

    • BAD
      • 자동 번역의 무분별한 사용
      • URL 파라미터로 지역지정(site.com?loc=de)
      • link rel="alternate" hreflang="ko" href="~~" 등 사용해서 언어별 사이트 있는 것을 검색엔진에 알려줌
    • GOOD
      • ccTLD 사용
      • subdomain 활용
      • URL을 해당 언어로 구성
  • http:// vs. https://
    • https:// - 암호화 말고도 많은 기능이 있음(인증, 데이터무결성, 암호화) / 그게 보증이 안된 경우에 취약한 네트워크를 사용하면 hifacking 해서 해킹 당할 수 있음
    • HTTP = http over security layer
    • https는 검색 순위에 적용된다.
    • 차세대 웹을 위한 전제조건 : HTTP/2, PWA, Geolocation API
    • 인증서확인
    • 프로토콜 상대경로 사용하면 좀 더 편리하게 설정 가능
      • <a href = "http:// ~ "-> "//google.com”
      • 앞으로 어떤 프로토콜 나올지 모르니까 상대경로가 굳
    • 서버 설정 확인하기 ssllabs.com
  • 모바일 시대에 맞는 최적화
    • g.co/mobilefriendly -> Mobile FIRST Indexing (모바일 페이지를 우선적으로 색인함)
    • 모바일을 만들지 않으면 검색에서 제외될 수도 있음…
    • 반응형 웹디자인 Responsive Webdesign - 웹 표준
      • m.~ url 만드는 것은 두가지 사이트 운영하는 수고(한 콘텐츠 여러가지 버전의 페이지 제작 관리)
      • 속도 절감 - ugeragent 기반의 redirection이 발생하지 않아 오류를 줄이고, 로딩 속도도 빠르게
      • 검색엔진에 모바일 페이지의 존재를 알릴 필요가 없음
      • 왜 반응형인가? - 사용자가 동일한 url로 콘텐츠의 공유를 쉽게
  • 속도
    • 53% 사람이 페이지 로딩에 3초 이상 시간이 걸리면 페이지 방문을 포기하는 경향이 있음
    • PageSpeed insignts
  • g.co/SearchConsole

5. 한국에서 SEO로 살아남기 - 사람인 마케터 문태성

  • mts@saramin.co.kr
  • SEO101, Boile First Indexing, HTTPS 전체적용, Optimize A/B TEST를 통한 이탈률 감소/전환 증대
  • SEO Tip 업무 프로세스
    • 사일로 파괴
      • 관리자 수준에서의 부서간 협력 문화 구축 선행
    • SEO 프로세스 정리
      • SEO 정책 공유: 모든 작업자의 Wiki 문서 작성 / 동시다발적인 사이트 개편으로 인한 작업 사항의 롤백 및 재작업 방지
      • 수집 -> 색인 -> 검색노출 -> 유입 / 각 단계별로 개선 작업 진행
      • PM / FU(Follow Up) 구분하여 진행
    • SEO 작업 우선순위 선정
      • 콘텐츠의 질과양, 시의성/지속가능성, 현재검색유입/노출수, 검색키워드 공략가능도
    • 기술적 개선을 보조지표로 활용
      • SEO Stie checker 점수
      • SEMrush (우리 사이트를 크롤링해서 메타 태그 이런게 잘 되어있는지 판단해주는 사이트)
      • WMT 오류 리포트
      • site: 검색문서수
      • 단기적인 지표로 기술적 개선 지표 사용
    • 작업 컨텐츠별 성과관리
    • 구글 서치콘솔/Developers
    • SEO Trend 파악
      • 최근 이슈: AMP, Mobile First indexing 등
    • Q&A는 커뮤니티