본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.

메타 타이틀은 무엇일까요?

메타 타이틀(meta title)은 웹페이지의 제목을 검색엔진과 소셜미디어에 전달해주는 정보입니다. 실제 페이지 안의 큰 제목(H1)과는 다를 수 있고, 주로 브라우저 탭 제목이나 구글 검색 결과의 파란 제목 텍스트로 보입니다.

사용자 정의 메타 타이틀(meta title) 설정하기

CMS 페이지에 Title 필드가 없다면, CMS > Edit Fields > Plain Text (이름: Title) 필드를 추가해야 합니다.

페이지 설정에서 메타 타이틀 적용하기

1. 해당 CMS 템플릿 페이지를 선택

2. 우측 상단의 환경설정 아이콘을 클릭하여 Page Settings열기

3. Title 입력란에 {{Title}}을 입력

이렇게 하면 각 CMS 항목(Item)의 Title 값이 자동으로 삽입됩니다.

메타 설명(meta description) 추가하기

메타 설명도 메타 타이틀 설정 방법과 동일하게 설정할 수 있습니다.
CMS에 Description이라는 이름의 Plain Text 필드를 추가 (Description 필드에는 페이지에 관한 간결하고 핵심적인 설명을 작성해주세요.)

페이지 설정에서 메타 설명 적용하기

1. 해당 CMS 템플릿 페이지를 선택

2. 우측 상단의 환경설정 아이콘을 클릭하여 Page Settings열기

3. Page Settings에서 Description 입력란에 {{Description}}을 입력

이렇게 하면 메타 타이틀과 동일하게 CMS 항목별 설명이 자동으로 삽입됩니다.
메타 설명(meta description)은 검색 결과에서 클릭을 유도하는 데 큰 역할을 합니다.

구글의 설명 자동화를 막는 방법

가끔 구글은 작성한 메타 설명 대신 웹페이지 내 텍스트를 추출해 검색 결과에 표시합니다. 이런 구글의 설명 자동화를 막고 싶다면 아래의 방법을 따라 하시면 됩니다.

1. 구글이 가져갈 수 있는 콘텐츠를 선택

2. Accessibility 섹션에서 +를 눌러 Google Bot 항목 추가

3. 동작을 Skip으로 설정

4. 사이트 전체에 적용하고 싶다면 가장 바깥 프레임(Frame)에 이 설정을 적용하세요.

특정 페이지의 설명이 콘텐츠와 맞지 않게 노출되면 클릭률이 떨어질 수 있기 때문에 의도한 설명이 보이게 설정해두는 것이 중요합니다.

본 글은 Framer 공식 블로그의 ‘How can I add meta titles and descriptions to each CMS item?’ 를 번역·각색한 콘텐츠입니다.