Flutter Web 검색 노출과 소셜 공유 미리보기 개선

Flutter Web 프로젝트의 index.html에 SEO 메타 태그를 추가했다.

Flutter Web 앱을 운영하다 보면 어느 순간 "이 앱, 검색에서 아예 안 나오네" 하는 시점을 맞이하게 된다. 기능은 다 잘 되는데, 크롤러 입장에서는 빈 HTML 껍데기나 다름없는 상태. 이번 작업이 딱 그 시점이었다.

왜 Flutter Web은 기본 SEO가 취약한가

Flutter Web은 빌드 결과물이 기본적으로 Canvas 렌더링(혹은 HTML 렌더러)으로 동작하면서, 실제 DOM에 텍스트 콘텐츠가 노출되지 않는 구조다. 구글 같은 검색 엔진이 JavaScript를 실행해서 크롤링하긴 하지만, 그 타이밍이나 깊이가 일반 SSR 웹앱보다 훨씬 불안정하다. 결국 크롤러가 가장 먼저, 그리고 가장 안정적으로 읽는 건 index.html 안의 정적 메타 태그다.

즉, Flutter 앱 자체를 아무리 잘 만들어도 index.html에 아무 메타 정보가 없으면 검색 노출과 소셜 공유 양쪽에서 모두 손해를 보게 된다.

실제로 추가한 것들

app/web/index.html 파일 하나에 집중된 변경이라 파일 범위는 좁지만, 영향 범위는 생각보다 넓다. 검색 노출, SNS 공유 미리보기, 브라우저 탭 표시까지 전부 여기서 결정되기 때문이다.

<!-- 기본 SEO -->
<meta name="description" content="...">
<meta name="keywords" content="...">
<meta name="author" content="...">

<!-- Open Graph (카카오, 페이스북 등 소셜 공유) -->
<meta property="og:title" content="...">
<meta property="og:description" content="...">
<meta property="og:image" content="...">
<meta property="og:url" content="...">
<meta property="og:type" content="website">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="...">
<meta name="twitter:description" content="...">
<meta name="twitter:image" content="...">

이 정도가 기본 세트인데, 각 메타 태그가 어느 플랫폼에 영향을 주는지 정리하면 아래와 같다.

Flutter Web 특성상 주의할 점

Flutter Web index.html은 flutter create 시점에 자동 생성되고, 이후 거의 손대지 않는 경우가 많다. 팀 내에서도 "앱 코드" 쪽에만 집중하다 보니 이 파일이 방치되기 쉽다.

내가 이번에 확인한 것들:

• <title> 태그가 기본값(A new Flutter project)인 경우 — 실제로 이런 앱들이 검색 결과에 뜨는 걸 본 적 있음
• og:image에 사용하는 이미지는 절대 경로(https://)로 넣어야 함. 상대 경로는 SNS 크롤러가 못 읽는 경우가 꽤 있음
• 빌드할 때 index.html이 build/web/ 아래로 복사되므로, 소스는 web/index.html 하나만 관리하면 됨

회고

솔직히 이런 작업은 "나중에 해도 되겠지" 하고 밀리기 딱 좋은 것들이다. 기능 개발도 아니고, 버그 수정도 아니고, 당장 뭔가 눈에 보이는 변화가 없으니까. 하지만 실제로 누군가가 카카오톡으로 링크를 공유했을 때 빈 미리보기가 뜨면 그 순간 앱 신뢰도가 떨어진다. 아무리 잘 만든 앱도 첫인상에서 진다.

index.html 한 파일이지만, 이 커밋이 커버하는 범위는 검색 노출부터 소셜 바이럴까지다. 작은 파일 하나의 변경이 실제 사용자 유입에 가장 직접적으로 연결되는 작업 중 하나라는 걸 다시 한번 확인했다.

끝.

🛒 이 글과 어울리는 추천 상품

• Flutter웹개발책 쿠팡에서 보기 →
• 모니터암 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.