프레이머로 랜딩페이지 제작을 고민하는 분들이 상담 중 가장 많이 꺼내는 걱정이 있습니다. "프레이머로 만들면 구글에 안 잡힌다고 들었는데요." 이 말을 들을 때마다 드는 생각은 하나입니다. 언제 들으셨냐고.
2022~2023년 초기 프레이머는 클라이언트 사이드 렌더링(CSR) 방식이었습니다. 구글 봇이 JavaScript를 실행하기 전 빈 HTML만 읽는 구조였고, 그래서 크롤링이 제대로 안 됐습니다. 그 경험이 "프레이머 SEO 약하다"는 인식을 만들었습니다.
지금은 다릅니다. 프레이머는 서버사이드 렌더링(SSR)과 정적 생성(SSG)을 모두 지원합니다. 봇이 실제 HTML을 읽습니다. 문제는 플랫폼이 아니라 세팅입니다. 제대로 세팅된 프레이머 사이트와 대충 세팅된 워드프레스 사이트 — 구글은 전자를 선택합니다.
프레이머 SEO에 대한 오해와 사실
프레이머 SEO 실전 세팅 — 단계별 가이드
프레이머에서 SEO를 제대로 세팅하려면 크게 세 영역을 다뤄야 합니다. 기술적 구조, 콘텐츠 구조, 그리고 색인 등록입니다. 순서대로 진행하세요.
STEP 1 — 페이지별 메타 설정
01. 페이지 타이틀 설정
Framer 에디터 → 페이지 선택 → Settings → SEO 탭.
타이틀은 메인 키워드를 앞에 배치하고 30~60자 이내로 작성합니다. "홈"이나 브랜드명만 쓰는 것은 최악의 선택입니다.
02. 메타 디스크립션 작성
120~160자 이내로 페이지의 핵심 내용을 요약합니다. 직접적인 키워드를 포함하되 자연스러운 문장으로 작성하십시오. 구글이 클릭률(CTR)을 랭킹 신호로 활용하기 때문에 검색자가 클릭하고 싶어지는 문장이어야 합니다.
03. OG 태그 및 소셜 이미지 설정
카카오톡·슬랙·링크드인 등에서 링크를 공유할 때 표시되는 썸네일과 제목입니다. 브랜드 이미지를 1200×630px로 준비해 업로드하십시오. 비어있으면 공유 시 빈 박스가 뜹니다.
04. Canonical URL 확인
동일한 콘텐츠가 여러 URL에서 접근 가능한 경우 중복 콘텐츠 패널티가 발생합니다. 프레이머는 canonical 태그를 자동 처리하지만, www 유무와 https 리디렉션을 반드시 확인하십시오.
STEP 2 — 헤딩 구조(h1-h2-h3) 시맨틱 설정
프레이머에서 가장 많이 놓치는 설정입니다. 텍스트 레이어를 선택하면 오른쪽 패널에서 HTML 태그를 지정할 수 있습니다. 다음 원칙을 반드시 지키십시오.
h1
페이지 전체에서 딱 하나만메인 키워드가 포함된 가장 중요한 헤딩입니다. 히어로 섹션의 메인 타이틀이 h1이어야 합니다. h1이 두 개 이상이면 구글이 어느 것이 핵심인지 판단하지 못합니다.
h2
주요 섹션 제목에 사용기능 소개, 가격, 후기, FAQ 등 각 섹션의 대표 제목입니다. h2에도 관련 키워드를 자연스럽게 포함시키면 주제 관련성 신호가 강해집니다.
h3
하위 항목, 카드 제목에 사용h2 아래 세부 항목들입니다. 기능 카드 타이틀, FAQ 질문 항목 등이 여기에 해당합니다. h2를 건너뛰고 h3를 쓰는 것은 구조 오류입니다.
흔한 실수 프레이머에서 텍스트 크기를 키우고 싶어서 h1을 여러 개 사용하는 경우가 많습니다. 시각적으로 크게 보이고 싶으면 CSS로 크기를 조정하면 됩니다. h1은 의미 구조이지, 크기 설정이 아닙니다.
STEP 3 — 이미지 alt 텍스트 설정
프레이머에서 이미지를 클릭하면 오른쪽 패널에 Alt Text 입력란이 있습니다. 장식용 이미지가 아닌 모든 콘텐츠 이미지에는 반드시 alt 텍스트를 입력하십시오. "image001.jpg" 같은 파일명을 그대로 두는 것은 아무것도 안 한 것과 같습니다.
잘못된 alt 텍스트
"image", "photo", "스크린샷 2024", "img_001" — 의미 없는 파일명이나 일반 단어
올바른 alt 텍스트
"프레이머로 제작한 스타트업 랜딩페이지 디자인 예시" — 이미지가 무엇을 보여주는지 구체적으로 설명
STEP 4 — Sitemap 및 robots.txt 확인
프레이머는 사이트맵을 자동으로 생성합니다. 별도 플러그인이 필요 없습니다. 다만 확인해야 할 것이 있습니다.
확인 1.
사이트맵 URL 접근 테스트yourdomain.com/sitemap.xml 로 접근했을 때 XML 파일이 정상 출력되는지 확인하십시오. 404가 뜨면 Search Console 등록이 불가능합니다.
확인 2.
색인 제외 페이지 설정감사 페이지, 관리자 페이지 등 검색에 노출될 필요 없는 페이지는 프레이머 페이지 설정에서 "Exclude from search engines"를 체크하십시오.
STEP 5 — Google Search Console 등록 및 색인 요청
01. 도메인 소유권 인증
Google Search Console → 시작하기 및 속성 추가 → 도메인 방식 선택
프레이머 Custom Domain 설정에서 DNS TXT 레코드를 추가하는 방식으로 인증합니다. 커스텀 도메인이 없으면 .framer.app 도메인으로는 SEO 효과가 제한됩니다.
02. 사이트맵 제출
Search Console → Sitemaps → 사이트맵 URL 입력 → 제출
yourdomain.com/sitemap.xml 을 입력합니다. 제출 후 구글이 크롤링을 시작하는 데 수일이 걸릴 수 있습니다.
03. URL 검사 및 색인 요청
Search Console → URL 검사 → 페이지 URL 입력 → "색인 생성 요청". 사이트맵 제출만으로는 느릴 수 있으니 주요 페이지는 직접 색인 요청을 하세요.
콘텐츠 구조 SEO — 프레이머에서 가장 많이 놓치는 것
기술 설정이 끝나도 콘텐츠 구조가 잘못되면 구글은 이 페이지가 무엇을 말하는지 파악하지 못합니다. 프레이머의 유연한 디자인 자유도가 오히려 이 부분에서 함정이 됩니다.
메인 키워드는 반드시 첫 문단 앞에
구글의 크롤러는 페이지 상단 텍스트에 더 높은 가중치를 부여합니다. AI 검색(Perplexity, ChatGPT Search)도 마찬가지입니다. 히어로 섹션에 이미지만 있고 텍스트가 없거나, 첫 텍스트가 "안녕하세요"로 시작한다면 — 메인 키워드 노출 기회를 첫 문장부터 날리는 것입니다.
권장 구조
히어로 h1: "프레이머 랜딩페이지 제작 전문 — EasySpark" → 서브타이틀 p 태그: "스타트업과 브랜드를 위한 프레이머 기반 랜딩페이지 제작 서비스입니다. SEO 세팅부터 전환 최적화까지 함께 진행합니다." — 첫 두 문장에 메인 키워드와 서비스 설명이 모두 담깁니다.
텍스트 없는 풀 이미지 히어로는 SEO 블랙홀
디자인상 멋있어 보이는 풀스크린 배경 이미지 히어로 — 구글 봇이 읽을 텍스트가 없습니다. 아무리 예뻐도 검색 엔진에게는 빈 페이지입니다. 이미지 위에 반드시 텍스트 레이어를 올리고, 해당 텍스트에 시맨틱 태그를 부여하십시오.
프레이머 SEO 세팅 완료 후 — 기대할 수 있는 수치
설정을 제대로 완료한 프레이머 사이트의 일반적인 Lighthouse 점수 범위입니다. 플러그인 없는 깔끔한 구조 덕분에 워드프레스 평균보다 높게 나오는 경우가 많습니다.
SEO 점수가 100이 아닌 이유는 콘텐츠 품질과 백링크 등 플랫폼 외적 요소가 포함되기 때문입니다. 기술적 세팅만으로 도달할 수 있는 최대치는 90~95 구간이며, 이것만으로도 상위 노출에 충분한 기반이 됩니다.
프레이머 SEO 세팅 최종 체크리스트
"프레이머 SEO는 도구의 문제가 아닙니다. 세팅하는 사람의 문제입니다. 제대로 세팅된 프레이머 사이트는 검색에서 충분히 경쟁력이 있습니다."
프레이머 사이트를 직접 만들었는데 구글에 노출이 안 된다면, 위 체크리스트를 처음부터 다시 확인해 보십시오. 항목 하나가 빠졌을 때 검색 노출 전체가 막히는 경우가 생각보다 많습니다. 세팅이 어렵게 느껴지신다면, 제작 단계부터 SEO 구조를 함께 설계하는 것이 가장 확실한 방법입니다.
이 글은 EasySpark 대표 허수진의 프레이머 실무 경험을 바탕으로 작성됐습니다. 프레이머 플랫폼 업데이트에 따라 UI 위치나 기능명이 변경될 수 있으며, 최신 정보는 Framer 공식 문서를 함께 참고하시기 바랍니다.
