카테고리 보관물: Front-End Development

다국어 사이트를 위한 SEO 처리. (구글 검색엔진 최적화)

아래 방법은 검색엔진이 당신의 다국어 사이트를 잘 검색하기 위해서 권장하는 방법들 입니다.

[페에지 언어가 명확한지 확인]
  • Google에서는 페이지에 표시된 콘텐츠만 사용하여 언어를 결정합니다.
    lang 속성 같은 코드 수준 언어 정보는 사용되지 않습니다.
[각 언어 버전을 쉽게 찾을 수 있는지 확인]
  • 쿠키를 사용하여 페이지의 번역을 표시하면 안된다.
  • 사용자가 인식하는 언어를 기반으로 자동 리디렉션을 피하세요.
    리디렉션은 사용자 및 검색엔진이 사이트의 모든 버전을 보지 못하게 차단합니다.
    예) apple.com 검색시 영문, apple.co.kr 접속시 -> apple.com/kr 로 리디렉션
  • 페이지의 각 언어 버전을 상호 링크하는 방법을 고려해 보세요.
[URL 선택을 신중하게 고려]
  • Google에서는 페이지의 콘텐츠를 사용하여 언어를 결정하지만, URL은 실제 사용자에게 페이지의 콘텐츠에 대한 유용한 정보를 제공합니다.
  • URL은 fr을 하위 도메인 또는 하위 디렉토리로 사용하여 프랑스어 콘텐츠를 명확하게 나타냅니다.
    – http://example.ca/fr/vélo-de-montagne.html 또는 http://fr.example.ca/vélo-de-montagne.html 권장.
    – 파라메터 방식은 비추.
[URL 구조]
다른 지역으로 손쉽게 사이트의 일부를 지역 타겟팅할 수 있는 URL 구조 사용을 고려해 보세요

URL 구조
장점
단점
ccTLD
example.ie
  • 명확한 지역 타겟팅
  • 서버 위치가 중요하지 않음
  • 간편한 사이트 분리
  • 많은 비용 필요(가용성이 제한될 수 있음)
  • 추가 인프라 필요
  • 경우에 따라 ccTLD 요구사항이 엄격함
gTLD를 포함하는 하위 도메인
de.example.com
  • 간편한 설정
  • 웹마스터 도구 지역 타게팅 사용 가능
  • 다양한 서버 위치 허용
  • 간편한 사이트 분리
  • 사용자가 URL만으로 지역 타겟팅을 인식하지 못할 수 있음(예: ‘de’가 언어인지 국가인지 확실하지 않음)
gTLD를 포함하는 하위 디렉토리
example.com/de/
  • 간편한 설정
  • 웹마스터 도구 지역 타게팅 사용 가능
  • 저렴한 유지 관리비(동일 호스트)
  • 사용자가 URL만으로 지역 타겟팅을 인식하지 못할 수도 있음
  • 단일 서버 위치
  • 사이트의 분리가 어려움
URL 매개변수 site.com?loc=de
  • 권장하지 않음
  • URL 기반 세분화가 어려움
  • 사용자가 URL만으로 지역 타겟팅을 인식하지 못할 수도 있음
  • 웹마스터 도구에서 지역 타겟팅 불가능

지역 타겟팅이 항상 정확하지는 않으므로 사이트의 ‘잘못된’ 버전을 방문하는 사용자를 고려해야 합니다.이러한 방법 중 하나로 사용자가 지역 또는 언어를 선택할 수 있도록 모든 페이지에 링크를 표시할 수 있습니다.

[중복 콘텐츠 및 국가별 사이트]

다른 지역에 대한 콘텐츠를 다른 언어로 제공하는 웹사이트는 같거나 유사하지만 다른 URL에서 사용할 수 있는 콘텐츠를 만드는 경우가 있습니다. 이는 콘텐츠가 서로 다른 국가의 다른 사용자를 위한 경우 대개 문제가 되지 않습니다. 각각 다른 사용자 그룹에 대해 고유한 콘텐츠를 제공하는 것이 좋지만 불가능한 경우도 있습니다. robots.txt 파일 크롤링을 허용하지 않거나 “noindex” robots 메타 태그를 사용하면 일반적으로 중복을 ‘숨길’ 필요가 없습니다. 하지만 다른 URL에서 동일한 사용자에게 동일한 콘텐츠를 제공하는 경우(예: example.de/ 및 example.com/de/가 독일에 있는 사용자를 위해 독일어 콘텐츠를 표시하는 경우), 선호 버전 및 리디렉션을 선택하거나 rel=canonical 링크 요소를 적절하게 사용해야 합니다. 또한 rel-alternate-hreflang에 대한 가이드라인에 따라 검색자에게 올바른 언어 또는 지역 URL을 제공해야 합니다.

[결론]
보편적으로 수행되는 방법은 아래와 같습니다.
  • example.com/de/ 형태로 다국어 사이트 URL을 구성한다.
  • rel-alternate-hreflang 해당 컨텐츠 언어를 설정해준다.
  • 한 언어에 제한된 크롤링을 막기 위해 쿠키를 사용하여 페이지의 번역을 표시하시 하면 안되고,
    URL또는 사용자가 언어를 선택하도록 한다.
[참고]

브라우저에서 플러그인 설치 여부 확인 방법.

자바스크립트에서 플러그인 설치여부 확인 가능합니다.
물론 브라우저가 알 수 있는 레지스트리 등록이 되어 있어야 되겠죠.

[브라우저 확인 방법]
브라우저 내장 속성중에 navigator.plugins은 브라우저에서 사용가능한 플러그인 목록을 리턴합니다.

Major 브라우저인 파이어폭스, 크롬, 사파리, 오페라 모두 지원하며,
IE는 11부터 지원합니다. (이전브라우저는 window.ActiveXObject으로 ActiveX설치여부 확인)

아래 화면은 고투마이PC에서 등록한 플러그인을 자바스크립트에서 조회한 화면입니다.Navigator plugins

[지금 확인]
– 파이어폭스, 크롬은 주소창에 about:plugins 입력하면 정리된 화면이 나옵니다.
– 브라우저에서 개발자 도구 F12눌러 console창에 navigator.plugins을 입력하면 위에 첨부한 이미지와 같은 목록을 리턴합니다.

[참고]
– https://developer.mozilla.org/en-US/docs/Web/API/NavigatorPlugins.plugins
– http://msdn.microsoft.com/ko-kr/library/ie/dn423948%28v=vs.85%29.aspx (IE 브라우저 간 플러그인 검색)
– http://stackoverflow.com/questions/291704/detect-from-browser-if-specific-application-is-installed
– Firefox28 이후부터는 Navigator.mimeTypes으로 확인 가능합니다.

Canvas의 다양한 활용사례

canvas 활용 사례점차 다양해 지는 Canvas의 활용사례에 대해 발표했던 자료 공유 합니다.

[대략적인 내용]

  • HTML5에 추가된 엘리먼트 Canvas, 그래픽을 표현하기 위한 Canvas의사용범위가 점차 다양해지고 있습니다.
  • 활용 사례를 보면서, 아이디어와 그래픽 표현의 새로운 분야에 대한 고민도 같이 해보면 좋을듯 하여 자료를 준비 하였습니다.