검색 엔진용 웹 사이트를 최적화(SEO)하고 페이지 순위를 높이고 사이트를 보다 쉽게 검색하는 방법을 알아봅니다.

참고:

Adobe Muse는 더 이상 새로운 기능을 추가하지 않으며 2020년 3월 26일 목요일에 지원이 중단됩니다. 자세한 정보 및 지원은 Adobe Muse 서비스 종료 페이지를 참조하십시오.

SEO(검색 엔진 최적화)는 사이트를 검색 엔진의 검색 결과 목록 상위에 노출하여 온라인에서 사이트가 사람들의 눈에 더 잘 띄게 하는 것이 목표입니다. 순위가 가장 높은 사이트는 목록의 맨 위에 표시되므로 온라인으로 정보를 검색하는 사람들이 해당 사이트를 찾아 방문할 가능성이 더 높습니다. 검색 엔진 최적화 전략을 잘 세우면 사이트의 노출 순위를 향상시키는 데 도움이 되므로 사이트 방문자 수를 늘리는 데 큰 효과를 발휘할 수 있습니다.

본 문서에서는 Adobe Muse를 사용하여 만든 사이트의 검색 엔진 노출 순위를 높이는 데 도움이 될 몇 가지 방법과 팁을 소개합니다. Adobe Muse 작업 영역에는 검색 순위 향상 및 웹 페이지 방문자 수 증가에 도움이 되도록 사이트를 최적화하는 데 사용할 수 있는 여러 가지 유용한 기능이 포함되어 있습니다.

인터넷의 사이트 목록을 작성하기 위해 검색 엔진에서는 웹 페이지와 사이트 에셋을 연결하는 링크를 따라가며 웹을 크롤링합니다. 검색 엔진에서는 인덱싱이라고 하는 프로세스를 통해 사이트의 에셋과 페이지 컨텐트를 평가합니다. 인덱싱은 끊임없는 조사를 통해 웹에서 사용 가능한 컨텐트를 검색 엔진에 알려 준다는 점에서 중요한 의미를 갖습니다. 사이트를 더 이상 사용할 수 없게 되면 검색 엔진을 통해 해당 웹 사이트가 검색 결과로부터 제거됩니다. 검색 엔진에서는 사이트의 컨텐트를 확인하고 순위를 결정하는 데 인덱싱 결과를 사용합니다.

검색 엔진에서 키워드나 구를 기준으로 특정 쿼리에 일치하는 검색 결과를 표시할 때 웹 사이트 링크를 정확하게 제시하려면 인덱싱 프로세스가 선행되어야 합니다. 예를 들어, 사용자가 검색 엔진 필드에 "Adobe"를 입력하고 [검색]을 클릭하면 웹 페이지 목록이 검색 결과에 표시됩니다. 검색 결과에는 검색 엔진을 통해 Adobe 소프트웨어 및 제품과 관련이 있는 컨텐트를 포함한 것으로 판단된 웹 사이트의 링크가 표시됩니다.

검색 엔진에서는 어떤 웹 사이트를 목록 상위에 표시할지 결정하기 위해 여러 가지 매개 변수를 사용합니다. 사이트의 노출 순위는 높을수록 좋습니다. 해당 키워드나 구를 검색하는 사람들이 그 웹 사이트에 방문할 가능성이 그만큼 더 높다는 의미이기 때문입니다. 아래에서 간략하게 소개하는 제안 방법을 따르면 검색 엔진의 효과적인 인덱싱에 도움이 되므로 온라인으로 정보를 검색하는 또 다른 사람들이 Muse 사이트를 더 쉽게 찾을 수 있습니다.

검색 엔진의 사이트 인덱싱 방식 이해

웹 페이지에는 작성자, 키워드, 설명, 언어 등과 같은 임베디드 메타데이터 정보가 포함될 수 있습니다. 키워드와 설명은 사이트의 목적이 무엇인지 소개하고 사이트에 어떤 컨텐트가 담겨 있는지 설명하는 데 유용한 역할을 합니다. 이러한 메타 태그는 HTML 소스 코드 안에 포함되며, 브라우저 창에 페이지를 표시할 때 겉으로 드러나지는 않습니다.

과거에는 검색 엔진에서 인덱싱 프로세스를 진행할 때 메타데이터 키워드와 설명을 둘 다 확인하고 평가했습니다. 따라서 사이트가 검색 결과에 좀 더 눈에 띄게 노출되기를 바라는 웹 디자이너는 키워드 용어를 수백 개까지 추가하기도 했습니다. Google 검색 엔진 같은 최신 검색 알고리즘에서는 검색 결과 순위를 매길 때 키워드 값을 더 이상 중요하게 고려하지 않습니다. 그렇다고는 해도 시간을 투자하여 키워드를 업데이트하는 것에는 그만한 가치가 있습니다. 대형 웹 사이트에 사용되는 Google 검색 어플라이언스라든지 기타 검색 엔진의 경우 키워드를 적절히 사용하여 검색 순위를 높일 수도 있습니다. 메타데이터 설명은 검색 결과 목록에 페이지를 표시할 때 설명으로 사용되는 일이 많으며, Facebook이나 Google+ 또는 기타 소셜 네트워크 사이트에서는 기본 설명으로 사용되기도 합니다. 흥미롭고 재미있는 설명을 작성하면 사이트 방문자 수를 늘리는 데 도움이 될 수 있습니다.

검색 엔진에서는 전체 텍스트 인덱싱을 수행할 때가 많습니다. 즉, 페이지의 전체 텍스트 컨텐트를 구문 분석합니다. 머리글 태그(h1, h2, h3 등)에 배치된 텍스트는 특히 중요하게 간주됩니다. 해당 페이지에 표시되는 정보를 요약하여 머리글로 사용하는 것이 일반적이기 때문입니다. 단락 스타일을 사용하여 단락 태그 컨테이너를 정의하면 텍스트 컨텐트의 최상위 제목으로 h1 머리글을 사용하고, 부제목으로 h2 머리글을 사용하고, 그 아래 소제목으로 h3 머리글을 사용하는 페이지를 만들 수 있습니다. 검색 엔진에서는 각 수준별 머리글 텍스트의 중요도를 판단하기 위해 텍스트 서식을 참조합니다. 스타일을 사용하여 단락 태그를 정의하고 이를 머리글 텍스트에 적용하면 잘 구성된 HTML 코드를 만들 수 있습니다. HTML 코드가 잘 구성되어 있으면 검색 엔진 크롤러에서 사이트를 매우 쉽게 탐색할 수 있습니다.

페이지의 컨텐트를 대상으로 인덱싱을 진행할 때 이미지 및 기타 연결된 에셋에 대해서도 분석이 이루어집니다. 에셋에 제목이나 대체 텍스트가 포함되어 있으면 이 텍스트 정보가 구문 분석됩니다. 하이퍼링크에 추가된 툴팁도 분석 대상입니다. 검색 엔진에서는 사이트를 인덱싱하면서 발견한 모든 텍스트 컨텐트를 정보 기반으로 활용하여 각 페이지의 컨텐트에 대한 결정을 내립니다. 이미지에 제목과 대체 텍스트를 추가하고 하이퍼링크에 툴팁을 추가하면 웹을 탐색하는 데 보조 장치를 사용해야만 하는 방문자를 비롯한 모든 사람이 해당 페이지에 좀 더 쉽게 액세스할 수 있다는 장점도 있습니다.

사이트를 정기적으로 점검하고, 끊어진 링크가 있으면 이를 제거하거나 수정해야 합니다. 끊어진 링크가 있을 때 검색 엔진에서 이를 발견하면 사이트가 더 이상 업데이트되지 않는 것으로 간주할 수 있습니다. 이미지 파일이나 연결된 에셋이 누락되었으면 이러한 문제도 해결해야 합니다. 유지 관리가 제대로 이루어지지 않는 오래된 사이트는 검색 결과에서 순위가 낮게 매겨질 수 있습니다.

페이지 속성에 메타데이터 키워드와 설명 추가

Adobe Muse에서 사이트를 처음 만들기 시작하면 사이트 속성을 설정하는 화면이 나타납니다. 레이아웃 값, 하이퍼링크 모양 등과 같이 사이트의 모든 페이지에 영향을 주는 특성이 여기에 해당합니다. 한편 각 페이지에서 개별 속성을 설정하여 좀 더 한정적인 특성을 추가할 수도 있습니다. 예를 들어, 페이지를 메뉴에 표시할지 여부를 제어하거나 소스 코드에 추가되었지만 브라우저에 표시되지 않는 메타데이터를 업데이트하기 위해 [메뉴 옵션]을 설정할 수 있습니다.

특정 페이지의 페이지 속성을 업데이트하려면 다음 단계를 따릅니다.

  1. [플랜] 보기에서 페이지 축소판을 두 번 클릭하여 [디자인] 보기로 엽니다. 페이지를 편집할 수 있는 별도의 탭에 페이지가 열립니다.

  2. [페이지] > [페이지 속성]을 선택합니다.

    페이지, 페이지 속성 선택
    [페이지] 메뉴를 사용하여 [페이지 속성] 대화 상자를 엽니다.

  3. [페이지 속성] 대화 상자에서 [메타데이터] 탭을 클릭하여 메타데이터 정보를 입력할 수 있는 필드를 표시합니다.

    페이지 속성
    [페이지 속성]의 [메타데이터] 섹션을 사용하여 메타데이터 텍스트를 추가합니다.

  4. [설명] 필드를 클릭하고 사이트의 컨텐트에 부합하는 정보를 입력합니다. 예를 들어, 유기견에 대한 페이지를 디자인하고 있다면 다음과 같은 짤막한 페이지 설명을 입력할 수 있습니다. "개는 인간의 가장 좋은 친구입니다. 저희는 대한민국에서 규모가 가장 큰 유기견 보호 협회로서, 갈 곳 없는 개들에게 가정의 따뜻한 손길을 찾아 주기 위해 최선을 다하고 있습니다."

  5. [키워드] 필드를 클릭하고 사이트의 컨텐트에 부합하는 단어를 입력합니다. 예를 들어, 유기견에 대한 페이지를 디자인하고 있다면 다음과 같이 페이지의 컨텐트에 맞는 키워드를 입력할 수 있습니다. "유기견, 애완견, 보호 협회, 애완견 건강 관리, 애완견 미용, 유기견 입양"

  6. [페이지 이름] 필드를 업데이트할 때는 이 페이지 이름이 사이트 전체에 걸쳐 메뉴 위젯에 레이블 이름으로도 표시된다는 점을 염두에 둬야 합니다.

  7. [페이지 제목] 필드는 페이지 이름과 같은 이름을 사용하도록 기본 설정되어 있습니다. 페이지 제목은 브라우저 창, 브라우저 탭, 책갈피 목록에 표시됩니다(사이트를 보는 데 사용하는 브라우저에 따라 다를 수 있음). 페이지 제목을 변경하려면 [페이지 이름과 동일] 옆에 있는 확인란을 선택 취소하고 다른 페이지 제목을 입력합니다.

  8. 메타데이터 업데이트를 마쳤으면 [확인]을 클릭하여 [페이지 속성] 대화 상자를 닫습니다.

이미지에 제목과 대체 텍스트 추가

페이지에 이미지를 배치하고 나면 [이미지 속성] 대화 상자를 열고 이미지에 부여되는 제목과 대체 텍스트(영어 줄임말을 사용하여 "alt 텍스트"라고도 함)를 설정할 수 있습니다.

각 속성을 간단히 설명하자면 다음과 같습니다.

제목: 대부분의 브라우저에서는 이미지 외에 제목도 표시합니다. 이 제목은 이미지 위에 마우스 커서를 올려 놓았을 때 나타나는 툴팁 형태로 표시되는 것이 일반적입니다.

대체 텍스트: 이미지 파일을 표시할 수 없으면 이 텍스트가 이미지 자리에 대신 표시됩니다. 대체 텍스트는 보조 도구를 사용해야만 페이지 컨텐트에 액세스할 수 있는 시각 장애인을 위해 이미지를 설명해 주는 데도 사용됩니다.

방문자가 최상의 환경에서 사이트를 탐색할 수 있게 하려면 사이트의 모든 에셋에 대해 제목과 대체 텍스트를 설정하는 것이 가장 좋습니다. 툴팁을 잘 활용하면 그래픽에 대한 추가 정보를 제공할 수 있으며, 대체 텍스트를 사용하면 화면 판독기로 그래픽 컨텐트가 어떤 내용인지 읽어 줄 수 있으므로 페이지의 접근성을 더욱 높일 수 있습니다.

제목과 대체 텍스트를 추가하려면 다음 단계를 따릅니다.

  1. 배치된 이미지를 선택합니다.

  2. 이미지를 마우스 오른쪽 단추로 클릭하고 컨텍스트 메뉴에서 [제목 추가] 또는 [대체 텍스트 추가]를 선택합니다.

    이미지 속성
    제목이나 대체 텍스트를 추가하도록 선택합니다.

  3. [이미지 속성] 대화 상자의 [제목] 필드에 이미지의 제목을 입력합니다. 예를 들어, 이미지가 Adobe 로고이면 "Adobe Systems, Inc."라고 입력할 수 있습니다.

    이미지 제목 속성
    툴팁으로 표시할 텍스트를 [제목] 필드에 입력합니다.

  4. 그래픽 컨텐트에 대한 설명(예: Adobe 로고)을 [대체 텍스트] 필드에 입력합니다.

  5. [확인]을 클릭하여 [이미지 속성] 대화 상자를 닫습니다.

연결된 이미지와 텍스트에 대한 툴팁 설정

링크 위에 마우스 커서를 올려 놓을 때마다 표시되는 툴팁을 만들 수 있습니다. 이러한 툴팁은 하이퍼링크가 설정된 이미지와 텍스트에 모두 표시됩니다. 툴팁을 사용하면 방문자가 링크를 실제로 클릭하기 전에 링크로 연결된 컨텐트에 대한 추가 정보를 보여 줄 수 있다는 점에서 매우 유용합니다. 툴팁은 사이트에서 참조하는 대상 컨텐트에 대한 설명을 검색 엔진에 제공하는 역할도 합니다.

하이퍼링크가 포함된 요소에 툴팁을 적용하려면 다음 단계를 따릅니다.

  1. 링크로 연결된 텍스트 또는 이미지를 선택합니다.

  2. 컨트롤 패널 에서 [하이퍼링크] 메뉴의 왼쪽 부분에 있는 [하이퍼링크]라는 텍스트를 클릭합니다. [하이퍼링크] 옵션이 나타납니다.

    하이퍼링크 옵션
    컨트롤 패널에서 파란색 [하이퍼링크] 텍스트를 클릭하여 하이퍼링크 옵션에 액세스합니다.

  3. [툴팁] 필드에 툴팁을 입력합니다. 예를 들어, 링크로 연결된 텍스트에 홈 페이지로 돌아가는 하이퍼링크가 설정되어 있다면 " 페이지로 돌아가기"라고 입력할 수 있습니다.

  4. 페이지를 다른 아무 곳이나 클릭하여 하이퍼링크 옵션을 닫습니다.

단락 스타일을 사용하여 텍스트 서식을 적용하고 단락 태그 설정

  1. [텍스트] 도구를 사용하여 텍스트 필드를 클릭하고 드래그합니다. 임의의 텍스트 컨텐트(예: This is text.)를 입력합니다.

  2. 글꼴, 글꼴 크기, 색상 및 기타 설정을 사용하여 텍스트 서식을 지정합니다. [텍스트] 도구로 텍스트를 선택한 상태에서 컨트롤 패널의 옵션을 업데이트하거나 [텍스트] 패널의 옵션을 사용합니다. 예를 들어, 다음과 같은 텍스트 서식을 설정할 수 있습니다.

    • 웹 안전 글꼴: Verdana
    • 글꼴 크기: 24
    • 색상: 갈색(#8C6239 또는 R=140 G=98 B=57)
    • 자간: 6
    • 행간: 120%
    텍스트 도구 패널
    [텍스트] 패널을 사용하거나 컨트롤 패널의 옵션을 사용하여 텍스트 서식을 지정합니다.

  3. [단락 스타일] 패널을 엽니다. 서식 지정된 텍스트를 계속 선택한 상태에서 [단락 스타일] 패널의 아래쪽에 있는 [새 스타일 만들기] 아이콘을 클릭합니다.

    단락 스타일 옵션
    [새 스타일 만들기] 단추를 클릭하여 새 스타일을 만듭니다.

    새 스타일에 서식 특성이 포함되고 단락 스타일의 기본 이름이 부여됩니다.

  4. 단락 스타일 이름을 두 번 클릭하여 [스타일 옵션] 대화 상자를 열고 새 스타일에 대한 [스타일 이름]"Brown Header Large" 라고 입력합니다. [Paragraph 태그] 메뉴를 사용하여 스타일과 관련된 HTML 태그를 h1 머리글로 설정합니다.

    스타일 옵션
    [Paragraph 태그] 메뉴에서 [h1]을 선택합니다.

  5. [확인]을 클릭하여 [단락 스타일] 옵션을 설정합니다. 이제 단락 스타일이 설정되었으므로 사이트에서 이 스타일을 적용하는 모든 머리글의 모양과 HTML 태그가 둘 다 업데이트됩니다.

    h1 머리글 스타일은 페이지의 맨 위에 표시되는 (일반적으로 가장 큰) 텍스트에 적용할 수 있게 만드는 것이 좋습니다.

    사이트의 모든 페이지에서 한 수준씩 아래로 내려오며 표시되는 하위 머리글에 대해 h2, h3 등의 단락 스타일을 추가로 만든 다음, 각 하위 머리글의 수준에 상응하는 스타일을 적용합니다.

    텍스트 스타일
    잘 구성된 웹 페이지에서는 내림차순으로 표시되며 텍스트 컨텐트의 층위를 정의하는 일련의 머리글을 사용합니다.

    모든 머리글에 대해 단락 스타일을 만들었으면 스타일을 지정할 텍스트를 선택한 다음 [단락 스타일] 패널에서 스타일의 이름을 클릭하여 해당 스타일의 특성과 단락 태그를 텍스트에 적용할 수 있습니다.

사이트를 내보내거나 업로드할 때 생성되는 sitemap.xml 파일 이해

[FTP 호스트에 업로드] 대화 상자를 사용하여 Adobe Muse 사이트를 타사 호스트 공급자에 업로드하거나 사이트를 내보낼 때는 모든 사이트 페이지와 에셋의 목록이 들어 있는 sitemap.xml이라는 파일이 Adobe Muse를 통해 자동으로 생성됩니다. 이 파일은 검색 엔진에서 사이트 컨텐트를 더 쉽게 인덱싱할 수 있도록 돕는 역할을 합니다.

통합 Adobe 호스트 서버에 사이트를 호스팅하는 경우에는 사이트에 추가한 도메인 이름이 내부 서버 인덱스에 자동으로 추가되므로 다른 어떠한 작업도 필요하지 않습니다.

Adobe Muse를 통해 생성된 사이트맵을 사용하면 사이트의 검색 엔진 노출 순위를 높이는 데 도움이 될 수 있습니다. Adobe Muse를 사용하여 파일을 업로드하면 sitemap.xml 파일이 호스트 서버에 다른 파일들과 함께 업로드됩니다. 사이트를 내보낸 후 FTP 클라이언트를 사용하여 파일을 업로드하면 내보낸 폴더의 나머지 에셋과 함께 이 파일이 호스트 서버에 업로드됩니다.

사이트의 검색 엔진 최적화 성능을 개선하기 위해 사이트맵에서 <image:image> 태그와 함께 이미지를 나열합니다. 이미지의 캡션은 <image:caption> 태그와 함께 나열됩니다.  .png 파일을 제외하고 사이트 맵에는 회전된 이미지와 효과가 포함된 이미지도 포함합니다.

동일한 이름이나 대체 텍스트가 다른 이미지를 업로드하는 경우 이미지는 <image:caption> 태그와 함께 개별적으로 나열됩니다. 캡션에는 각각의 대체 텍스트를 포함합니다.

내보낸 sitemap.xml 파일에 도메인 이름을 지정하려면 다음 단계를 따릅니다.

  1. [파일] > [HTML로 내보내기]를 선택합니다.

    파일, HTML로 내보내기 선택
    모든 사이트 파일을 컴퓨터의 폴더로 내보냅니다.

  2. [도메인 이름] 필드에 도메인 이름을 입력합니다.

    [HTML로 내보내기] 대화 상자
    [도메인 이름] 필드에 사이트의 도메인 이름을 입력합니다.

  3. 도메인 이름의 철자가 올바른지, mysite.com 형식인지 확인합니다.

  4. [확인]을 클릭하여 도메인 이름을 sitemap.xml 파일에 추가하고 내보내기 프로세스를 완료합니다. 사이트를 내보내고 나면 사이트 파일이 들어 있는 폴더를 사용자가 선택한 임의의 웹 호스트 공급자에 업로드할 수 있습니다.

    참고: [파일] > [FTP 호스트에 업로드]를 선택하여 사이트를 업로드할 때는 [도메인 이름] 필드에 입력한 도메인 이름이 sitemap.xml 파일에 추가됩니다.

    FTP 호스트 옵션
    [FTP 호스트에 업로드] 대화 상자에서 도메인 이름을 입력합니다.

Google 검색 엔진에 sitemap.xml 파일이 어떻게 사용되는지 좀 더 자세히 알고 싶으면 Google 웹마스터 도구 도움말 페이지를 방문하십시오.

Adobe Muse에서 사이트를 디자인하는 방법을 좀 더 자세히 알고 싶으면 Adobe Muse 도움말을 참조하십시오. Adobe Muse 오늘의 사이트(Site of the Day)를 방문하면 자신만의 프로젝트를 만들기 시작할 때 디자인에 영감을 줄 만한 자료들을 만나실 수 있습니다.

비디오 | 사이트 분석 보기

비디오 | 사이트 분석 보기
lynda.com - James Fritz

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책