99. Page SEO (중급) : 동적으로 URL 주소 만들기, slug 설정, meta data 설정

이 섹션에서는 페이지의 SEO 설정과 이러한 설정이 검색 순위에 미치는 영향을 다룹니다.

 

(1) SEO의 3가지 주요 영역

SEO 관점에서 볼 때, 앱의 페이지는 세 가지 중요한 데이터 영역으로 구성됩니다.

 

1. 페이지URL (웹 주소)

• 사용자와 검색 엔진 모두에게 해당 페이지의 내용을 알려줍니다.

2. 메타데이터

• 제목, 설명, 소셜 미디어 이미지 등 페이지에 관한 데이터입니다.

3. 콘텐츠

• 페이지의 실제 정보, 즉 사용자와 검색 엔진 모두에게 표시되는 디자인, 텍스트, 이미지, 비디오입니다.

 

(2) URL

URL은 HTTP 프로토콜의 일부로 인터넷 작동 방식의 큰 부분을 차지합니다.

 

1. 읽을 수 있는 주소 제공

URL은 사람이 읽을 수 있는 페이지의 "주소"입니다. 이는 검색 엔진에서 콘텐츠를 분리하는 기준으로 사용됩니다.

• 예를 들어 앱의 한 페이지는 개에 관한 페이지이고 다른 페이지는 고양이에 관한 페이지일 수 있습니다. 두 페이지 모두 고유한 URL을 가지며 검색 결과에 다르게 표시될 수 있습니다.
• URL은 검색 엔진과 사용자 모두에게 문자로 인지 기능을 제공합니다. 이는 사람이 읽을 수 있는 페이지 접근 방법이므로 명확하고 이해하기 쉬워야 합니다.

 

예를 들어 아래 URL을 비교해 보세요.
https://www.my-bubble-application.com/mcakos/najsdnf (X)
https://www.my-bubble-application.com/product/runnning-shoes (O)

• 첫 번째 것은 읽기 쉽지 않지만, 마지막 것은 페이지의 내용을 쉽게 이해할 수 있는 표시를 제공합니다.

 

2. 페이지 폴더를 설정할 수 있나요?

Bubble은 전통적인 의미의 페이지 폴더를 사용하지 않고 대신 동적 페이지를 사용합니다.

• 이는 콘텐츠가 데이터베이스 데이터에서 동적으로 생성되는 페이지이며, 각 데이터베이스 레코드에 대해 고유한 페이지를 설정하는 데 사용할 수 있습니다. 이에 대한 자세한 내용은 아래 섹션에서 읽어보세요

 

3. 동적 페이지 설정

모든 페이지에서 콘텐츠 Type을 설정할 수 있습니다. 이는 페이지에 로드할 데이터 종류를 Bubble에 알려주고 고유한 URL을 사용하여 동적 페이지를 설정하는 방법을 알려줍니다.

• 전자상거래 상점이 있다고 가정해 보겠습니다. Product라는 페이지에서 데이터베이스의 다양한 제품을 동적으로 표시하려고 합니다. 데이터 Type은 Product라고 가정합니다.

페이지content type의 설정

• 위 예시에서는 콘텐츠 Type을 Product 데이터 Type으로 설정했습니다. 이는 Bubble이 우리가 URL을 통해 전달할 Product를 받아들일 준비가 되었음을 의미합니다.

 

Bubble이 URL의 페이지 데이터를 인식하는 방법에는 두 가지가 있습니다.

1. 데이터 레코드의 unique ID
2. 데이터 레코드의 SLUG

• Unique ID는 데이터베이스 레코드가 생성될 때마다 자동으로 생성되므로 해당 필드는 비어 있지 않습니다.
• 반면에 SLUG는 비워 둘 수 있으며 필요에 따라 추가하거나 수정할 수 있습니다.

 

데이터베이스에 야구 모자 제품이 있다고 가정해 보겠습니다.

해당 제품에 고유한 URL을 제공하기 위해 아래와 같이 야구 모자 SLUG를 제공할 수 있습니다.
https/www.my-bubble-application/product/야구모자

• 이는 페이지의 모든 내용을 사람이 읽을 수 있고 그 사람에게 명확하게 알려주는 훌륭한 URL입니다.
• 검색 엔진도 이처럼 동일한 방식으로 URL를 봅니다. 페이지(제품)가 하나만 있다면 검색 엔진은 SLUG를 포함한 URL을 페이지 하나로 간주합니다. 그러나 SLUG가 달라진다면 그에 따라 URL이 각각 생성됩니다.
• SLUG 기능을 사용하여 단 하나의 페이지만 설정해도, 각각 고유한 콘텐츠가 포함된 수백, 수천 또는 수백만 개의 고유한 URL을 설정할 수 있습니다.

예를 들어, 당신의 전자 상거래가 스포츠 용품에 관한 것이고 사이트의 모든 제품은 고유한 URL을 갖게 된다면, 모든 제품을 검색 엔진에서 찾을 수 있습니다.
신규 고객은 당신의 앱의 이름을 검색하는 대신 야구 모자, 골프 장비 등을 검색하여 당신의 사이트를 찾을 것입니다.

 

4. SLUG가 비어 있으면 어떻게 되나요?

SLUG 필드를 비워 두면 Bubble은 기본적으로 고유 ID를 대신 사용합니다. 그러나 backup 필드를 설정할 수 있습니다.

slug의 백업필드

• URL에 대한 백업 필드 값(Backup field for URL)을 선택하면 SLUG 필드가 비어 있는 경우 Bubble이 다른 필드를 백업으로 사용하도록 지시합니다.(위에서 Name)

 

*주의사항

• URL은 고유해야 하기 때문에, 만약 그렇지 않다면 Bubble은 Unique ID를 추가합니다.(Name이 고유하지 않다면)
• 결과는 다음과 같이 Unique ID가 추가됩니다.

https://my-bubble-application.com/product/product-1-1676895473036x923438355480530400

• 따라서 읽기 쉽고 SEO 친화적인 URL을 원한다면, SLUG 필드가 비어 있는지 확인하는 것이 좋습니다.

 

5. URL 변경

변경되는 URL은 검색 엔진에서 다시 색인을 생성해야 하며 검색 엔진에서는 이를 새로운 콘텐츠 또는 중복된 콘텐츠로 간주하여 페이지 순위에 영향을 미칠 수 있다는 점을 명심하세요

 

URL을 최대한 일관되게 유지하는 전략을 사용하는 것이 가장 좋습니다.

• 일단 설정되면 데이터베이스의 SLUG 필드를 변경하지 마십시오
• 페이지 이름을 변경하지 마세요
• 이는 절대적인 규칙이 아니라 전체 SEO 전략에 일맥상통하는 지침이라는 점을 명심하세요

 

때로는 변경이 필요할 때도 있지만 괜찮습니다.

• 페이지의 URL(페이지 이름 또는 사물의 슬러그)을 변경하기로 결정한 경우 301리 디렉션을 사용하여 콘텐츠가 이동되었음을 검색 엔진에 알릴 수 있습니다.

 

(2) Metadata (메타데이터)

메타데이터는 페이지에 관한 데이터입니다. 페이지 자체에 반드시 표시되는 것은 아니지만 페이지 코드의 일부이며 검색 엔진이 페이지 내용을 이해하는 데 도움이 됩니다.

페이지의 메타데이터에 포함된 정보는 검색 엔진의 검색 결과의 특정 페이지에 대해 제공하는 미리 보기에서도 볼 수 있는 경우가 많습니다.

 

메타데이터는 다음 두 가지 목적으로 사용된다고 생각할 수 있습니다.

1. 관련 키워드를 포함시켜 페이지가 특정 검색어에 관련된 결과임을 검색 엔진에 "확신"시키는 것입니다.
2. 잠재 방문자가 동일한 검색 결과에서 다른 페이지 대신 당신의 페이지를 클릭하도록 만드는 것입니다.

 

따라서 메타데이터를 설정할 때 검색 엔진 로봇을 염두에 두어야 하지만 결국 잠재적인 방문자인 인간이 제목, 설명으로 페이지의 품질을 판단한다는 점도 명심해야 합니다.

• 가장 좋은 것은 모든 페이지에 고유한 메타데이터가 있어야 검색 엔진과 사용자가 페이지 간의 차이점을 이해하고 서로 페이지간 경쟁하지 않도록 하는 것입니다.

 

메타데이터는 페이지의 내용을 검색 엔진에 전달하기 위해 데이터를 표준화할 수 있는 방법의 광범위한 분야가 있지만, 가장 일반적인 필드는 다음과 같습니다.

 

1. Page Title (페이지 제목)

페이지 제목은 페이지 콘텐츠를 짧게 표현한 것입니다.

• 일반적으로 검색 엔진 결과에 눈에 띄게 표시되며 브라우저 탭에서 사용자에게 표시됩니다. 페이지 제목을 작성할 때 설명적이고 관련성이 높으며 타깃 키워드가 포함되어 있는지 확인하세요.

 

2. SEO Title (SEO 제목)

SEO 제목은 검색 엔진에 맞게 맞춤화된 페이지 제목의 최적화된 버전입니다.

• 검색 엔진 결과에 나타나는 텍스트의 첫 번째 줄인 경우가 많으며, 사용자의 관심을 끌고 콘텐츠와 관련성이 있어야 합니다. 효과를 극대화하려면 60자 미만으로 유지하고 페이지의 기본 키워드를 포함하세요.

 

3. Desciption(설명)

메타 description은 검색 엔진 결과의 SEO 제목 아래에 나타나는 페이지의 콘텐츠에 대한 간략한 요약입니다.

• 이 스니펫은 유익하고 매력적이어야 하며 사용자가 링크를 클릭하도록 유도해야 합니다.
• 150~160자 길이를 목표로 하고 관련 키워드를 포함하세요
• Google과 같은 검색 엔진은 페이지의 다른 콘텐츠가 더 관련성이 있다고 생각하는 경우 설명 대신 검색 결과에 페이지의 다른 콘텐츠를 표시하도록 선택하는 경우가 있습니다. 따라서 설명은 크롤러가 콘텐츠를 이해하는 데 계속 사용되지만 검색 결과에 항상 표시되는 것은 아닙니다.

 

4. 소셜 미디어 이미지

소셜 미디어 이미지는 콘텐츠가 Facebook 및 Twitter와 같은 소셜 플랫폼에서 공유될 때 콘텐츠를 시각적으로 표현한 것입니다.

• 콘텐츠를 정확하게 표현하고 시각적으로 매력적인 이미지를 선택하세요.
• 이미지가 포함된 게시물은 소셜 미디어 피드에서 더 많은 공간을 차지하므로 클릭률이 높아질 수 있다는 점을 명심하세요.

 

5. 페이지 HTML Header 및 HTML element

페이지 HTML 헤더에는 검색 엔진이 콘텐츠를 이해하고 색인화하는 데 도움이 되는 다양한 태그와 정보가 포함될 수 있습니다.

이러한 태그에는 다음이 포함됩니다.

• 추가 메타 태그
• open graph 태그
• structured 데이터
• canonical 태그
• 언어 태그

 

6. 페이지 body의 Metadata(메타데이터)

일부 메타데이터(예: Schema.org 마이크로데이터, JSON-LD (연결된 데이터에 대한 JavaScript 개체 표기법))를 페이지 본문에 배치할 수도 있으며, 이를 통해 더 광범위한 데이터를 SEO 키워드로 설정할 수 있습니다.

 

7. 페이지의 Metadata(메타데이터) 접근

작업하려는 메타데이터가 페이지 단위로 저장되어 있으므로 먼저 버블 편집기에서 작업하려는 페이지로 이동해야 합니다. 페이지 탐색기를 사용하여 페이지를 엽니다.

• 편집기에서 페이지를 두 번 클릭하거나 element 트리 상단에 있는 페이지 이름을 클릭하여 이에 액세스 할 수 있습니다.

 

페이지 메타데이터 설정

• 페이지의 모든 메타데이터는 위의 사진위치에서 편집할 수 있습니다.
• 각 필드는 정적 콘텐츠로 채워질 수도 있고 페이지 데이터의 동적 콘텐츠로 채울 수도 있습니다.

 

9. 동적 콘텐츠로 메타데이터 채우기

메타데이터 필드는 다음 데이터 소스의 동적 콘텐츠를 허용합니다.

• Current user
• Current page`s contents
• Do a search for
• Option contents
• Arbitrary text
• Get page URL
• App text
• Arbitrary Date/ Time

또한 데이터 소스를 참조하지 않고도 페이지에 원하는 제목과 설명을 제공할 수 있도록 정적 텍스트 값을 허용합니다.

 

 

(3) 콘텐츠

SEO 소개에서 살펴보았듯이 페이지 콘텐츠는 SEO에서 가장 중요한 부분 중 하나입니다. 즉, 콘텐츠의 품질이 높아야 합니다.

• 고품질 콘텐츠가 무엇인지 판단하는 것은 이 글의 범위를 벗어날 수 있지만, 더 높은 순위를 얻는 데 도움이 될 수 있는 가이드라인은 소개할 수 있니다.

 

1. 디자인

페이지 디자인은 SEO 관점에서도 중요합니다. 검색 엔진은 앱 자체가 보기에 좋은지 여부에는 관심이 없지만 앱에 액세스할 수 있는지 여부에는 관심이 있습니다.

• 논리적 구조로 앱을 구성하고 명료하고 사용하기 쉬운 탐색 메뉴를 제공해야 합니다.
• 가독성을 높이기 위해 텍스트와 배경 같은 페이지 요소 간의 대비를 잘 유지하세요.
  • 예를 들어 밝은 회색 배경에 어두운 회색 텍스트는 시각 장애가 있는 사용자에게 어려울 수 있습니다.
• 모든 사용자가 쉽게 상호 작용할 수 있도록 element의 크기를 조정하고 배포합니다.
  • 예를 들어 두 개의 버튼이 너무 작거나 너무 가깝게 배치되면 탐색이 어려워질 수 있습니다.
• 이미지에 대체 텍스트 추가하세요
  • 이는 검색 엔진에 이미지가 무엇인지 알려줄 뿐만 아니라 시각 장애가 있는 사용자가 콘텐츠를 이해하는 데 도움이 되며 이미지가 로드되지 않는 경우 텍스트를 표시합니다.
• 설명이 포함된 링크 텍스트를 사용하세요
  • 검색 엔진은 링크의 내용을 이해하려고 할 때 링크 레이블을 살펴봅니다. 연결하려는 페이지의 이름만 사용하는 대신 다른 각도에서 설명할 수 있는 기회를 활용할 수 있습니다.
  • 예를 들어 SEO 튜토리얼이라는 제목의 페이지에는 SEO 기본 사항 알아보기라는 링크가 있을 수 있습니다.

 

2. 텍스트

검색 엔진이 페이지의 내용을 이해하는 가장 쉬운 방법은 텍스트에서 키워드를 검색하는 것입니다. 봇이 아닌 사람을 위해 글을 쓰세요

키워드를 자연스럽게 사용하세요. 키워드는 콘텐츠의 초석이고 기본적으로 사용자가 찾고 싶어 하는 것입니다.

• 텍스트 콘텐츠에 키워드를 반복적으로 사용해야 하지만 과장된 방식(키워드 스터핑이라고 함)을 사용해서는 안 됩니다.
• 텍스트를 유용하고 재미있게 만들고, 의미가 있는 곳에 키워드를 언급하세요

헤더 사용:

• 헤더(예 <h1>: <h2>, 등)는 검색 엔진이 페이지 구조를 이해하는 방법입니다.
• 텍스트를 여러 섹션으로 나누고 명확하고 구조화된 계층 구조를 사용하세요.
• Settings > SEO/META TAG로 이동하고 텍스트 ement에 대한 Tag type 노출을 선택하여 텍스트 element에 대한 태그를 활성화할 수 있습니다.

 

페이지 링크 연결:

관련성이 있는 경우 텍스트 내에 앱의 다른 페이지나 외부 페이지에 대한 링크를 배치하세요.

 

3. 미디어

가능한 경우 페이지에 주제에 연관된 미디어를 혼합하십시오

• 텍스트, 이미지, 비디오를 혼합하여 사용자에게 최대한 유용한 페이지를 만드세요
• 일부 유형의 미디어는 페이지의 다운로드 크기를 늘릴 수 있다는 점에 유의하세요

 

4. 페이지 로드

검색 엔진은 콘텐츠를 평가할 때 다음의 두 가지 요소도 고려합니다.

 

1) 총 페이지 다운로드 크기

• 가벼운 페이지는 특히 모바일 장치에서 사용자 친화적인 것으로 간주되므로 더 높은 순위를 얻을 수 있습니다.
• 일반적으로 전체 크기에 추가되는 것은 큰 이미지, 글꼴, 외부 Javascript 파일(때때로 플러그인에 의해 추가됨)입니다.
• 본질적으로 페이지에 추가하는 내용이 적을수록 페이지는 더 가벼워집니다.

 

2) 총 페이지 로드 시간

• 페이지가 열린 후 화면에서 콘텐츠 렌더링이 완료될 때까지 걸리는 시간도 순위에 중요한 요소입니다.
• 페이지 로드 시 무겁고 복잡한 검색 및 workflow를 피하고 페이지 전체 크기를 줄여 빠른 로드를 위해 최적화하세요
• Bubble은 우리가 지속적으로 최적화하기 위해 노력하는 모든 페이지에 대한 기본 로딩 시간을 제공합니다.