웹 표준을 통한 사이트 향상 팁 5가지

웹 표준을 따르는 것으로 사이트의 성능을 향상 시킬 수 있는 몇 가지 팁을 소개합니다.

웹페이지(HTML, 자바스크립트, CSS 등)의 인코딩으로 UTF-8을 쓰기

아직도 많은 한글 웹페이지가 EUC-KR등의 오래된 방식으로 인코딩 되어있는 경우가 많은데요, 표준이 아닌 관계로 여러 OS나 브라우저 환경에서 제대로 페이지가 나타나지 않는 경우가 있습니다.

한글이 euc-kr로 인코딩 되어 있어 글자가 깨지는 경우

한글이 euc-kr로 인코딩 되어 있어 글자가 깨지는 경우

UTF-8은 현재 가장 보편화된 국제 표준이고 거의 모든 OS와 브라우저에서 지원하기 때문에 글자가 깨지는 것을 걱정하지 않아도 됩니다.

가능하면 콘텐츠를 관리하는 관련 데이터베이스의 내용도 UTF-8로 전환하는 것을 권장합니다.

HTTP Content-Type 헤더에서 Charset 매개변수를 써서 인코딩을 명시적으로 표시하기

HTTP를 통해 텍스트로 된 리소스(text/*)를 보낼 때, HTTP의 Content-Type 헤더에 다음과 같이 charset 매개변수를 포함하여 해당 텍스트가 어떤 인코딩으로 되어있는지 명시해주면 브라우저가 더 빠르게 페이지를 렌더링할 수 있게 됩니다.

Content-Type: text/html; charset=utf-8

만약 이 작업이 어렵다면, HTML의 태그에 charset 메타 정보를 넣어주는 것이 좋습니다. 그리고 이 정보는 최대한 파일의 선두에 가까운 곳에 표시할 수록 도움이 됩니다.

<html lang="ko">
<head>
<meta charset="UTF-8">
...

모든 HTML 문서에 “lang”을 써서 해당 문서가 어떤 언어로 이루어져 있는지 표기하기

HTML 정보가 시작됨을 알리는 태그에 lang 값을 넣어주어 언어를 넣어주면, 브라우저가 글꼴을 선택하는 작업을 도와주기 때문에 경우에 따라 페이지 표시가 더 빨라지고, 검색 엔진처럼 기계적으로 HTML 문서를 읽는 경우 문서가 어느 언어로 이루어져있는지 쉽게 파악하여, 문서가 더 알맞게 다루어질 수 있게 도움을 줍니다.

<html lang="ko">

만약 페이지가 여러 언어로 이루어져있는 경우 가장 보편적인 언어를 html 태그에서 표기하고, 해당 부분의 태그에 마찬가지로 lang 값을 넣어주는 일이 가능합니다.

<html lang="ko">
<body>
...
<p lang="fr">Ceci est un paragraphe.</p>
...

글꼴 지정을 할 때, 맨 마지막에 CSS generic family를 지정해주기

CSS나 <style> 태그 내에서 글꼴을 지정할 때, 맨 마지막에 CSS generic family를 지정해주면, 페이지를 보는 사용자의 환경에 혹시 해당 글꼴이 존재하지 않더라도, 브라우저가 비슷한 글꼴을 사용하여 페이지를 실제 의도된 모양에 가깝게 표시하는 데 도움을 줍니다.

예 1) font-family: "Times New Roman", Garamond, serif;
예 2) font-family: Courier, monospace;

페이지가 의도한 디자인에 가깝게 표시되기 위해선 구체적인 글꼴과 generic family가 어울리는 것이어야 합니다. 가장 많이 사용되는 generic family와, 각각의 대표적인 글꼴은 다음과 같습니다.

  • serif: Times New Roman, Garamond
  • sans-serif: Arial, Helvetica
  • monospace: Courier, Consolas
  • HTML로 충분히 만들 수 있는 내용을 PDF/HWP/Office 등의 파일로 올리지 않기

    내용이 PDF, HWP, MS Office등의 파일로 되어있는 경우 검색 엔진이 내용을 이해하는 데 어려울 수도 있으며, 사용자의 환경에 따라 파일을 열람할 수 없는 경우도 있습니다. HTML로 구현 가능한 내용은 최대한 HTML로 구현하는 것이 사이트 성능이나 사용자 경험 측면에서 더 낫습니다. 최근에는 워드프레스나 XE 등, 사용자 친화적인 CMS가 많이 있어서, 마치 워드프로세서 프로그램을 이용하는 것처럼 내용을 구현할 수 있을 것입니다.

    Posted in 웹마스터 도움말 | Tagged , , , | 1 Comment

    [웹사이트 분석] 대한민국 국회 홈페이지 (assembly.go.kr)

    안녕하세요, 오랜만에 진행하는 더 나은 웹의 웹사이트 분석입니다. 우리나라 국회의원의 모든 정보를 제공하고 있는 국회의사당 공식 웹사이트는 앞서 분석했던 국회도서관과 함께 우리나라의 의안, 입법, 예산 등의 진행상황을 확인할 수 있는 많은 정보를 제공합니다. 또한, 알림마당, 소통마당 등을 통하여 사이트를 방문하는 사용자들과 더 많이 교류하기 위하여 제작되었습니다. ‘더 나은 웹’이 바라보는 국회 홈페이지는 과연 어떠할까요?

    assembly-www 대한민국 국회 홈페이지 첫 화면

    국회 방문자 센터 페이지 국회 방문자 센터 첫 화면

    항목 상태 세부내용
    웹 개방성
    robots.txt 차단 차단중 모든 검색 엔진을 완전히 차단함.
    각각의 하위 도메인도 검색을 차단함.
    meta robots 차단 양호 존재하지 않음
    그외의 방법을 이용한 차단 양호
    검색 최적화
    타이틀 태그의 올바른 사용 양호
    메타 description의 올바른 사용 개선필요 전혀 사용하지 않음
    플래시(Flash) 사용 양호 비 표준적인 플래시를 사용하지 않음
    이미지의 사용 양호 불필요한 이미지의 활용이 없음
    URL 구조 개선필요 www를 제외한 접속시 페이지 존재하지 않음
    불필요한 meta refresh가 발생함
    URL의 구조만으로 내용 파악이 어려움
    모바일 최적화
    모바일 페이지 구축 개선필요  모바일용 페이지 존재하지 않음

     ‘더 나은 웹’이 바라본 대한민국 국회 사이트

    웹 개방성

    웹 개방의 가장 기초이자, 검색 엔진 트래픽을 조절하는 robots.txt를 확인해 보겠습니다.

    assembly-robots-txt

    대한민국 국회 홈페이지의 robots.txt 설정

    우선 홈페이지인 www.assembly.go.krrobots.txt를 통하여 검색 엔진을 차단하고 있습니다. 즉, 더 많은 사용자의 유입에 필수인 검색 엔진의 활용이 전혀 되어 있지 않습니다. 그런데 이러한 설정은 홈페이지 뿐 아니라 하위 페이지에도 나타나고 있습니다.

    assembly-english-robots-txt

    대한민국 국회 홈페이지 영문 사이트의 robots.txt 설정



    assembly-memorial-robots-txt

    국회 방문자 안내 사이트의 robots.txt 설정

    외국인이나 해외 방문자를 위한 영문사이트나 국회의사당 방문을 위한 정보를 제공하는 방문자 사이트 등, 각각의 하위 페이지를 꼼꼼하게(?) 막아놓은 것으로 보아, 의도적인 검색 엔진의 차단을 확인할 수 있습니다. 아마 아직도 검색 엔진의 차단을 보안의 수단으로 여기는 듯합니다. 사이트 전반에 걸쳐 더 많은 정보를 제공하려는 노력이 보이지만, 이러한 검색의 차단은 그러한 노력을 무색하게 합니다.

    거듭 강조하지만, robots.txt 잘못된 사용은 사이트 방문을 효과적으로 높일 수 있는 가장 좋은 수단을 포기하는 것일 뿐, 보안과는 무관합니다. 검색을 차단한다고 하여 보안의 위험이 있는 페이지가 사용자들에게 노츨이 안 되는 것은 아니기 때문이죠.

    검색 최적화

    title태그와 meta description 속성

    검색 엔진 최적화의 기본이라 할 수 있는 title태그와 meta description 속성의 설정을 살펴보도록 하겠습니다. assembly-title-description-tag 우선 타이틀 태그는 기본적인 제목과 페이지의 대표적인 내용을 포함하는 형태로 비교적 잘 갖추어져 있습니다. 또한, 각 페이지에 대하여 계층 구조로 타이틀 태그가 형성되어있기에 무리가 없어 보입니다. 문제는 meta description 속성입니다. 첫 페이지를 비롯하여 모든 페이지에 걸쳐 아예 존재하지 않습니다. 검색 엔진이 결과를 보여주기 위해 가장 비중 있게 사용되는 meta description 속성의 설정은 검색 엔진 최적화의 기본이자 필수사항입니다. 국회도서관 사이트처럼 검색에 대한 차단이 되어있다보니, 애초에 검색을 위한 설정이 전혀 고려되지도 않은 것으로 보이는데, 너무나 안타깝습니다.

    URL 구조

    우선 사이트를 방문하기 위하여 www.assembly.go.kr을 주소창에 입력해보도록 하겠습니다. 접속하는 순간 http://www.assembly.go.kr/assm/userMain/main.do로 이동하여 첫 화면을 보여 줍니다.

    assembly-www

    국회 홈페이지를 www.assembly.go.kr 로 접근시

    이번에는 www를 빼고 assembly.go.kr로 이동해보도록 하겠습니다. 그런데 아래와 같이 사이트가 존재하지 않는다는 메시지가 보여집니다.

    assembly-non-www

    국회 홈페이지를 assembly.go.kr 로 접근 시 (www을 뺀 형태로 접속시)

    사용자의 입장에서 웹사이트에 접근할 때 www를 사용하기도하고, 때로는 www과 관계없이 그대로 홈페이지의 주소만을 입력하여 접근하기도 합니다. 또한, 검색 엔진들의 웹 관련 프로그램은 두 가지의 경우를 각각의 다른 호스트로 인식을 하므로, 두 가지의 경우를 통합하여 관리하는 것이 중요합니다. 위와 같이 각각의 경우를 통하여 사이트에 접근할 수 있기 때문에 대표적인 URL(국회 사이트의 경우는 www.assembly.go.kr)을 선정하여 다른 URL(국회 사이트의 경우 assembly.go.kr)로 접근 시 301 리디렉트를 설정하여 관리하는 것이 좋겠습니다.

    또한 www.assembly.go.kr에서 발생하는 meta 태그를 이용한 리디렉트는 불필요한 것이라 할 수 있습니다. 이는 사용자에게 페이지가 열리는 것을 지연하고, 검색 엔진이 첫 페이지에서 필요한 내용을 발견하지 못할 수 있기 때문에, 효과적인 페이지의 구성을 위해서는 meta 리디렉트를 제거하고 첫 페이지에 관련 내용을 구현해야합니다.

    assembly-meta-redirect

    국회 홈페이지를 www.assembly.go.kr 로 접근시 – meta redirect 이 발생합니다.

    URL의 구조를 살펴보던 중 국회의 영문 페이지를 발견하였습니다.

    assembly-english

    국회 홈페이지의 영문 사이트 첫 화면

    여러 가지 좋은 내용을 최대한 영문화하여 많은 국내외 외국인들이 활용할 수 있도록 노력하는 모습이 보입니다. 그런데 한 가지 특이한 점을 발견할 수 있습니다. 주소를 자세히 살펴보도록 하겠습니다.

    assembly-english-address

    국회 영문 사이트의 주소가 korea.assembly.go.kr 로 설정되어 있습니다

    영문사이트의 주소가 korea.assembly.go.kr로 설정되어 있습니다. 사이트 및 페이지의 주소를 설정하는 것은 물론 전적으로 사이트의 소유자에게 있습니다. 그러나 사용자의 입장에서 생각해 본다면 URL만을 가지고도 한눈에 페이지를 파악할 수 있다면 더욱 효과적이지 않을까 싶습니다. 위의 경우 영문페이지를 english.aasembly.go.kr 또는 en.asssembly.go.kr 등으로 설정한다면 사용자의 입장에서 페이지를 기억하거나 이해하는데 도움이 될 것입니다.

    모바일 최적화

    국회 홈페이지는 아직까지 모바일에 최적화된 페이지나, 반응형 웹으로 구성되어 있지 않습니다. 특히 방문자를 위한 안내 페이지 등은 모바일 페이지를 제공할 수 있다면 더욱 효과적으로 활용될 수 있을 것입니다.

    assembly-mobile

    국회 홈페이지를 모바일로 접근 시 – 데스트톱용 페이지가 그대로 보여짐

    “국민의 마음 국회가 생각합니다.”

    대한민국 국회 홈페이지 첫 화면에 걸려있는 글귀처럼, 소통과 개방, 공유를 원하는 국민들의 마음을 생각하기 위한 노력이 사이트 곳곳에서 보이고 있습니다. 하지만 정작 가장 효과적으로 이용되어야 할 검색 엔진을 차단하였기에, 과연 그 노력만큼의 효과를 기대할 수 있을까 싶습니다. 더 많은 사용자가 이용할 수 있는 국회의 홈페이지가 되기를 바라는 마음 간절합니다.

    Posted in 웹사이트 분석 | Tagged , , , , | Leave a comment

    다국어 페이지 검색 엔진 최적화

    오늘은 최근 열린 ‘더 나은 웹’ 세미나에 참가자 중 다국어 사이트를 운영하는 분이 주신 질문, 그리고 그에 대한 답변을 소개해드립니다. 이 글에서 설명하는 것보다 자세한 정보는 다지역/다국어 사이트 구축에 대한 웹마스터 도움말에서 확인할 수 있습니다.

    회사 공통 컨텐츠(CEO메시지, 정책 등)의 경우 국가/권역/사이트별로 동일한 컨텐츠가 노출되어 일관성을 유지해야 합니다. 하지만, 동일한 컨텐츠가 여러 사이트에서 노출될 경우 검색 순위에서 좋지 않은 영향을 준다고 알고 있습니다. 이럴 경우 대체 방안은 없는지요?

    대략적으로 전체 페이지를 이미지로 노출, 검색엔진이 검색하지 못하도록, 등의 대안이 나오긴 했는데.. 다양한 방법을 소개 부탁하며, 그중에서 검색순위에 악영향을 끼지지 않는 가장 좋은 방법은 무엇인지 소개와 그 이유를 설명 부탁합니다.

    일단 오해가 있습니다. 같은 컨텐츠가 국가/권역/언어 등으로 인해 여러 번 구현되어야 하는 사이트가 당연히 존재하며, 해당 사이트의 컨텐츠를 필요로 하는 사용자에게 잘 전달해야 하는 것이 검색 엔진의 목표이기 때문에, 검색 엔진도 그러한 특성을 가진 사이트에 잘못된 불이익을 주지 않으려고 노력합니다. 하지만 검색 엔진이 이런 부분을 알아서 파악하지 못할 경우가 있기 때문에, 검색 엔진을 위해 ‘힌트’를 주시는 게 좋습니다.

    반대로 이미지로 전체 페이지를 만들거나 검색하지 못하도록 해버리면 순위를 올리기도 전에 페이지가 검색이 제대로 안 될 것 같은데요. ^^

    예를 들어 같은 내용이지만 한국어(A1), 영어(A2), 일본어(A3) 페이지로 구현이 되어있는 CEO메세지 페이지가 있다고 가정합니다. 각각의 페이지 주소는 다음과 같을 것입니다.

    [A1] http://ko.example.com/ceo.html
    [A2] http://en.example.com/ceo.html
    [A3] http://jp.example.com/ceo.html

    최적화 팁: 모든 페이지의 와 사이에 다음과 같은 태그를 넣어줍니다.

    <link rel="alternate" hreflang="ko" href="http://ko.example.com/ceo.html” />
    <link rel="alternate" hreflang=“en” href="http://en.example.com/ceo.html" />
    <link rel="alternate" hreflang="jp" href="http://jp.example.com/ceo.html” />
    

    이는 ‘해당 페이지의 특정 언어(hreflang) 페이지를 다음 주소(href)에서 찾을 수 있다’라는 설명이 됩니다. hreflang에 들어갈 수 있는 언어-지역 코드는 ISO 639-1 기준에 따릅니다.

    다국어 페이지 설정 예제

    다국어 페이지 설정 예제입니다.

    이렇게 하면, 검색 엔진은 ‘A1, A2, A3는 같은 페이지지만 다른 언어일 뿐이다’라고 인식하게 됩니다. 이게 검색 엔진에 도움이 되는 이유는 다음과 같습니다.

    1) 세 페이지를 한 페이지로 인식하기 때문에, 순위와 관련된 모든 신호가 하나로 모여지게 됩니다. 예를 들어, B라는 페이지가 A1로 링크하고, C라는 페이지가 A2로 링크하여도, A1와 A2가 같은 페이지임을 알고 있기 때문에 B와 C의 링크에 대한 신호를 한데로 모아서 처리합니다.

    2) 여러가지 언어 페이지 중 혹시 검색 엔진이 미처 발견하지 못한 페이지가 있었더라도, 이 ‘힌트’를 통해 알게 되어 수집색인을 할 수 있게 됩니다.

    3) 여러가지 언어로 서비스하는 구글과 같은 검색 엔진의 경우, 사용자의 해당 언어에 맞는 페이지를 검색 결과에 보여줄 수 있게 됩니다. 한국어 사용자는 한국어 버전으로, 일본 사용자는 일어 버전으로 바로 접근할 수 있게 됩니다.

    만약 사용자가 기억하기 쉽게 www 페이지를 사용하고 싶으면 어떻게 해야합니까? (예를 들면, http://www.example.com라고 하는 [A]라는 페이지가 있을 경우)

    만약 각각의 언어 페이지가 위에서처럼 A1, A2, A3이 있는 경우, A에서 사용자의 환경(위치, 브라우저 설정 등)에 따라 A1, A2, A3으로 리디렉트(HTTP 302)를 하게 하면 됩니다. 그리고 다음과 같은 행을 추가하세요.

    <link rel="alternate" hreflang="x-default" href="http://www.example.com/ceo.html” />
    

    언어를 x-default로 지정하면 검색 엔진에 http://www.example.com/ceo.html 는 언어에 따라 변할 수 있는 페이지라는 힌트를 줍니다. 다만 여기서 조심해야 할 부분은, 한 언어 페이지에서 다른 언어 페이지로 리디렉트하는 것은 하지 말아야 한다는 점입니다. A에서 A1, A2, A3으로는 이동할 수 있지만, A1에서 A2로, 또는 A2에서 A3으로 리디렉트하는 것은 검색 엔진이 각각 언어 페이지를 색인하는 데 어려움을 줍니다.

    그런데 이거 구글에만 해당되는 정보 아닌가요?

    아닙니다. link 태그는 HTML 표준에 포함된 기능입니다. 표준에 따라 더 나은 정보를 제공하려고 하는 검색 엔진이라면 이 ‘힌트’를 활용하여 사이트가 검색이 올바르게 되도록 도와줄 것입니다.

    ‘더 나은 웹’ 팀

    Posted in 검색 엔진 최적화 | Tagged , , , , | Leave a comment