이 섹션에서는 Bubble이 제공하는 SEO 설정에 관한 기능들을 다룹니다.
기술적 측면의 SEO 시작점은 앱의 SEO세팅입니다. 검색 엔진은 당신의 사이트를 하나의 우산 아래에 있는 페이지들의 모음으로 간주합니다.
당신이 설정한 앱의 SEO 정보는 앱의 정체성에 관한 것보다는(소셜 미디어 공유는 제외, 이에 대해서는 나중에 다루겠습니다) 다음과 같이 검색 엔진에 정보를 어떻게 제공할지에 대한 지침입니다.
- 크롤링이 가능한 페이지와 크롤링이 불가한 페이지
- 이동되었으며 다른 URL로 리디렉션 되어야 하는 URL( 301 리디렉션 )
- Sitemap(사이트맵) 파일을 읽기
앱의 SEO 설정 중 일부는 상당히 기술적이기 때문에 지금 당장 필요하지 않을 수 있습니다. 여기서는 각 부분의 기본 사항을 다루겠습니다.
설정: 앱의 SEO 설정은 Settings > SEO/Meta tags에서 찾을 수 있습니다.
(1) 소셜 미디어에서 공유
- 여기서의 설정은 특별히 소셜 미디어에 적용되며 대부분의 검색 엔진에서 페이지가 표시되는 방식에는 영향을 미치지 않습니다. 검색 엔진의 결과는 페이지 수위의 결과로 표시되며, 여기서 INDEX 페이지는 다른 모든 페이지의 상위 페이지로 간주됩니다.
*PAGE SEO 링크 대기
앱 SEO 설정의 첫 번째 부분은 소셜 미디어 세부정보입니다. 이를 통해 앱에 대한 링크가 공유될 때 LinkedIn, Twitter, Facebook과 같은 소셜 미디어 사이트에서 사용할 앱의 ID를 설정할 수 있습니다.
- 아래 LinkedIn 예시에서는 링크가 게시물에 입력되자마자 LinkedIn이 메타데이터를 가져오는 방법을 확인할 수 있습니다.
- 이는 소셜 미디어와 검색 모두에서 일관된 브랜드 아이덴티티를 전달하는 데 도움이 됩니다.
- 검색 엔진은 다양한 플랫폼에서의 인기를 하나의 변수로 삼기 때문에 소셜 미디어 공유는 SEO에 큰 영향을 미칠 수 있다는 점을 기억하세요
(2) SEO 설정
1. 헤더 설정 (<h1>, <h2>, <h3>)
- 페이지 구조는 순위를 결정하는 데 중요한 역할을 합니다. 체계적으로 구성된 페이지에는 텍스트 콘텐츠를 다양한 수준(예: " <h1>및 " <h2>")의 헤더로 구분된 별개의 섹션으로 구성합니다.
- 기본적으로 텍스트 element에 태그를 추가하는 설정은 사용할 수 없지만, 아래와 같이 텍스트 element에 대한 태그 유형 표시를 선택하여 활성화할 수 있습니다.
2. 표준 URL 설정(Canonical URLs)
앱에 게시글이 하나 있고 어떤 이유로 URL이 약간 다른 두 위치에 존재한다고 가정해 보세요.
- 이러한 상황에서는 검색 결과에 어떤 위치의 버전(글)을 표시해야 하는지 결정하는 데 어려움을 겪기 때문에 검색 엔진에 혼란을 야기할 수 있습니다.
표준 URL은 이 문제에 대한 해결책입니다.
- 이는 웹페이지의 어떤 버전이 “Primary(기본)" 또는 "Preferred(선호)"로 간주되어야 하는지 지정하여 검색 엔진에 신호 역할을 합니다.
- 표준 URL을 사용하면 검색 엔진이 동일한 콘텐츠의 여러 버전을 색인화(indexing)하는 것을 방지하여 웹사이트의 검색 순위와 전반적인 노출도를 높일 수 있습니다.
표준 URL 활성화
Settings > SEO/Meta tags >하단의
Point URL`S to primary domain for better SEO을 체크하여 활성화시킵니다.
3. Robots.txt 설정
때로는 앱의 특정 페이지를 크롤링하지 않도록 검색 엔진에 지시하고 싶을 수도 있습니다.
예를 들어 앱의 프런트엔드에 있는 정보들은 페이지를 색인화(indexing)하고 싶지만 백엔드 또는 관리자 페이지는 색인화하고 싶지 않을 수 있습니다.
- Robots.txt는 Bubble이 앱의 루트 디렉터리에 자동으로 배치하는 작은 파일입니다. 여기에는 검색 엔진 크롤러에 대한 지침이 포함되어 있으며, 접속이 허용되는 앱 부분과 피해야 할 부분을 지정합니다.
- 기본적으로 앱의 개발 버전은 색인(indexing)이 생성되지 않습니다.
- robots.txt는 특정 페이지를 크롤링하지 않도록 검색 엔진에 요청하는 것입니다. 대부분의 검색 엔진은 이를 존중하지만 실제로 크롤링을 막지 는 않습니다. 따라서 이는 보안 설정이 아닌 SEO 설정으로 간주됩니다.
검색 엔진에 페이지를 숨기도록 지시하려면 어떻게 해야 하나요?
- 다음의 두 페이지인 dashboard와 admin를 크롤러로부터 숨기고 싶다고 가정해 보겠습니다.
- 이렇게 하려면 페이지 이름과 함께 robots.txt의 Disallow 명령을 사용합니다.
User-agent:
Disallow: /dashboard
Disallow: /admin
4. Sitemaps
웹 크롤러는 다음과 같은 활동을 통해 작동합니다. 앱의 도메인 주소와 첫 페이지를 발견하여 들어와서 이 페이지가 about이라는 하위 페이지에 연결되면 크롤러는 발견된 해당 페이지의 색인(indexing)도 생성합니다.
- 하지만 하위 페이지가 연결되어 있지 않다면 어떻게 되나요? 또는 페이지에 동적 콘텐츠가 포함된 경우 제품 페이지에 접속할 수는 있지만 인벤토리의 모든 제품에 접속할 수는 없습니다.
동적 콘텐츠가 포함된 페이지의 경우 모든 항목이 동일한 페이지에 로드되더라도 각 항목은 별도의 페이지로 간주됩니다.
- 사이트맵은 검색 엔진이 앱 구조를 보다 효율적으로 탐색하고 이해하는 데 도움이 되는 앱의 청사진과 같습니다.
- 사이트맵은 기본적으로 링크되지 않은 경우에도 앱 내의 모든 페이지를 나열하는 XML파일로 되어 있습니다.
- Bubble은 모든 페이지에 대한 사이트맵을 자동으로 생성할 수 있으며 동적 페이지의 경우 페이지에 지정된 데이터 유형과 일치하는 항목을 데이터베이스에 포함합니다.
당신은 아래와 같이 사이트맵에 포함할 페이지를 선택할 수 있습니다. (위 세팅페이지와 같은 위치에 있음)
사이트맵 파일 노출 상자를 선택하면 페이지 목록이 표시됩니다. 포함하려는 각 페이지를 선택하십시오
5. Custom header and body content
- <head> 헤더에 배치된 모든 스크립트와 메타 태그는 앱의 모든 페이지에 있는 태그 사이에 삽입되며 , 본문 필드에 추가된 스크립트는 <body>모든 페이지의 태그 사이에 배치됩니다.
- 이 필드에 데이터를 추가하면 모든 페이지에 데이터가 추가됩니다. 각 페이지 설정에서 페이지에 하나씩 추가할 수도 있습니다.
6. 301 리디렉션
301 리디렉션은 페이지가 새 위치로 이동할 때 SEO 성능을 유지하는 데 도움이 되는 영구적 리디렉션 방법입니다. 간단하게는 다음과 같이 표현할 수 있습니다.
예전에 페이지는 여기였어
... 그리고 이제 여기 있어요
... 영구적입니다. (301)
Bubble은 이전 및 이후 URL을 추가하는 쉬운 방법을 제공합니다.
표현은 다음과 같이 전체 URL 이어야 합니다. (https 등의 프로토콜 포함)
www.conversion-skill.tistory.com/ ( x )
https://conversion-skill.tistory.com/ ( O )
1) 301 리디렉션의 SEO 영향
: SEO 관점에서 이는 다음과 같은 몇 가지 이유로 중요합니다.
- 이전 페이지가 누락되었을 때 검색 엔진이 새 페이지를 찾는 데 도움이 됩니다.
- 이는 새 페이지의 콘텐츠가 중복되지 않고 단순히 이동되었음을 검색 엔진에 알려줍니다.
- 모든 추천 트래픽이 여전히 올바른 콘텐츠에 도달하도록 보장합니다.
2) 301 리디렉션은 언제 유용합니까?
: 301 리디렉션은 페이지가 이동되었음을 검색 엔진에 알려야 하는 모든 경우에 유용합니다.
- 페이지 이름을 바꿀 때마다
- 동적 페이지 콘텐츠로 사용하는 것의 슬러그를 변경할 때마다
- Bubble이 아닌 프레임워크에서 이동하고 URL 구조 또는 도메인이 변경되는 경우
7. 루트 디렉터리에 파일 호스팅
- Bubble을 사용하면 파일을 루트 디렉터리에 업로드할 수 있습니다.
- 이에 대한 사용 사례는 많지만 SEO 관점에서 볼 때 가장 일반적인 용도는 사용자 정의 sitemap. xml 파일을 업로드하는 것입니다.
- 특별한 파일을 업로드하여 도메인의 주인을 입 중하거나 특정한 앱의 기능을 활성화 시 사용하기도 합니다.
- 설정: 앱의 SEO 설정은 Settings > SEO/Meta tags 하단에서 찾을 수 있습니다.
(3) SEO 성능 검사 (Lighthouse) 기준
Chrome에는 통합 SEO 감사 도구가 있습니다.
*크롬 성능 검사 (Lighthouse)를 사용하려면 다음 단계를 따릅니다.
- 크롬 브라우저에서 웹 페이지를 엽니다.
- 브라우저 창에서 마우스 오른쪽 버튼을 클릭하고 "검사(Inspect)"를 선택하거나 Ctrl + Shift + I 키를 눌러 개발자 도구를 엽니다.
- 개발자 도구 상단 메뉴에서 "Lighthouse" 탭을 클릭합니다.
- 원하는 검사 형식을 맞게 설정한 후 "Analyze page load" 버튼을 클릭하여 검사를 진행합니다.
- 감사가 완료되면 결과가 나타납니다. 각 항목별로 점수와 개선 방안이 제공됩니다.
웹 사이트의 성능 및 최적화 상태를 개선하고 사용자 경험을 향상하는 데 도움이 되는 정보를 얻을 수 있습니다.
- 이 도구는 검색 결과에 영향을 미칠 수 있는 기준을 강조합니다.
- 다음은 각 기준에 대한 개요와 Bubble 앱의 평가 방법입니다.
| 감사 기준 | 처리 방법 |
| 모바일 친화적 | 반응형 엔진을 사용하고 모바일 모범 사례를 따르는 페이지를 설정하세요. |
| <meta name="viewport"> 태그 | Bubble은 이를 자동으로 처리합니다. |
| Title(제목) | 모든 페이지에 제목을 설정하고 또는 동적 콘텐츠를 설정 |
| Meta description(메타 설명) | 모든 페이지에 설명을 설정하고 또는 동적 콘텐츠를 설정 |
| HTTP status (상태) 코드 | Bubble은 이를 자동으로 처리합니다. |
| 링크에 설명 텍스트가 있습니다. | 설명 텍스트를 모든 링크에 설정하세요 |
| Page isn’t blocked from indexing | Bubble은 이를 자동으로 처리합니다. |
| "robots.txt가 유효합니다. | Bubble은 이를 자동으로 처리하지만 사용자 정의 할 수도 있습니다. |
| 이미지 요소에는 [alt] 속성이 있습니다. | 각 이미지의 속성 편집기에서 모든 이미지에 Alt 태그를 추가하세요 |
| 문서에 유효한 hreflang이 있습니다. | Bubble은 이를 자동으로 처리합니다. |
| 문서에 유효한 rel=canonical이 있습니다. | 표준 도메인으로 설정시 처리 가능, 또는 301 리디렉션을 설정할 수도 있습니다. |
| 문서가 읽기 쉬운 글꼴 크기를 사용합니다. | 12px 미만의 글꼴 크기는 너무 작아서 읽을 수 없습니다. 아껴서 사용하세요(12px보다 큰 텍스트의 비율60% 이상) |
| 문서에서 플러그인을 방지합니다. | 이것은 Bubble에는 적용되지 않습니다.( 여기서의 플러그인은 Bubble 플러그인을 의미하지 않습니다) |
'버블 개발 > 중급' 카테고리의 다른 글
| 100. 앱 테스트와 디버깅 (중급): 테스트와 디버깅 조언, 버블 안전모드 사용 (0) | 2023.08.28 |
|---|---|
| 99. Page SEO (중급) : 동적으로 URL 주소 만들기, slug 설정, meta data 설정 (0) | 2023.08.26 |
| 97. 일반적인 SEO 설정 (중급) : SEO 개요, 최적화 팁, 모바일 친화적, 고품질 백 링크 (0) | 2023.08.25 |
| 94. Hard Limit (중급) : 버블의 성능 제한, 최대 텍스트 길이, 파일 크기, 최대 이벤트 액션 수, 최대 api 크기 (0) | 2023.08.24 |
| 93. 성능(중급) : Performance, 성능 최적화, 빠른 로딩 팁, 페이지 로딩 순서 (0) | 2023.08.24 |
