웹플로우 SEO 최적화 방법
여러분들이 웹사이트를 만드려고 하시는 이유는 무엇인가요?
아마도 자사의 서비스를 더 많은 사람들에게 알리고, 판매를 증진시키기 위함일 것입니다.
하지만 웹사이트를 만든다고 해서 여러분들이 원하는 바를 이루긴 힘드실 수도 있습니다.
왜냐면 구글이나 네이버에 검색했을때 여러분의 웹사이트가 상위에 노출되긴 힘들테니까요.
아무리 잘만들고 좋은 웹사이트 여도 사람들의 눈에 띄지 않는다면 무의미합니다.
이런 문제를 해결하기 위해서 SEO(검색 엔진 최적화)에 대해서 이해하고 이를 웹사이트에 적용할 필요가 있습니다.
웹플로우는 디자인과 개발을 통합한 강력한 웹사이트 빌더이지만, SEO를 제대로 활용하지 않으면 그 잠재력을 충분히 발휘하지 못합니다. 또한 사용자 친화적인 SEO 도구를 제공하기 때문에 메타 태그, 구조화된 데이터, sitemap 등을 손쉽게 설정할 수 있게 해줍니다.
이처럼 오늘은 SEO에 대한 간단한 이해와 웹플로우에서 SEO를 최적화 하는 방법에 대해서 알아 보도록 하겠습니다.
SEO(Search Engine Optimization, 검색 엔진 최적화)
SEO(Search Engine Optimization)는 자사의 홈페이지 혹은 콘텐츠를 검색 결과의 상단에 위치시키는 작업을 의미합니다.
SEO가 중요한 이유는 검색 결과에서 높은 순위를 차지하면 더 많은 유입 트래픽을 얻을 수 있고, 이는 매출 증가나 브랜드 인지도 향상으로 이어지기 때문입니다.
검색 엔진은 알고리즘을 통해 웹페이지의 품질과 관련성을 평가하기 때문에 가이드라인을 준수하고 사용자에게 가치 있는 정보를 제공하는 것이 중요합니다. 과도한 키워드 삽입이나 숨겨진 텍스트와 같은 부정적인 SEO 기법은 오히려 검색 엔진으로부터 페널티를 받을 수 있으므로 주의해야 합니다.
1. 페이지 구조 확인하기
우선 좋은 SEO를 구성하기 위해선 html 구조부터 잘 생성할 필요가 있습니다.
검색 엔진은 홈페이지의 Tag나 Headline 구성을 파악해 웹페이지의 구조를 파악합니다.
그렇기 때문에 div태그를 남발하거나 의미에 맞지 않는 html 태그를 사용할 경우 좋은 SEO를 구성하지 못합니다.
이를 쉽게 파악해보기 위해 구글 익스텐션으로 가서 HeadingsMap을 추가해 줍니다.
HeadingsMap 도구HeadingsMap을 설치한뒤, Webflow에서 Publish한 페이지로 이동해 실행시켜 보세요.
publish 해서 임시 사이트 만들기아래 이미지의 왼쪽 탭을 보시면 여러분들이 Webflow로 구성한 Tag나 Headline 구성이 구조화 되어 있는 것을 확인하실 수 있습니다. 검색 엔진은 아래와 같이 데이터를 구조화 하여 알고리즘을 통해 웹페이지의 품질과 관련성을 평가하기 때문에 의미에 맞지 않는 Tag를 사용하셨다면 수정해 주세요.
HeadingsMap을 활성화 한 상태“제목이 아닌 제목 태그 삭제”, “제목 순서 유지”, “쓸모없는 링크 태그 삭제” 등 기본적인 구성만 잘 지키셔도 더 나은 SEO를 구성하실 수 있습니다.
2. 페이지 별 SEO 세팅 확인하기
웹플로우에서 기본적으로 페이지에 대한 SEO를 구성해주긴 하지만 한국어의 경우 편의상 발음과 같이 Slug가 입력되는 경우(문의하기 -> mun-uihagi)가 있어 꼭 확인 해두어야 합니다.
Slug란?
- URL Slug라고도 하며, 웹사이트 도메인의 URL 끝부분에 붙는 설명 텍스트입니다.
- Slug는 웹사이트의 주소를 구분하는 역할을 합니다.
슬러그는 Pages -> Edit Page setting에서 설정하실 수 있습니다.
Edit Page setting 버튼을 눌러 보시면 다음과 같이 해당 페이지의 Settings 창이 뜨게 되는데, 해당 화면에서 meta 정보 및 SEO settings를 진행하실 수 있습니다.
Page settings 화면우선 맨 위에 있는 Page Name과 Slug를 적절한 이름으로 세팅해줍니다.
사용자들이 주로 입력할만한 단어나 용어를 사용하는 것이 좋습니다.
다음으로는 SEO를 세팅해줍니다.
해당 부분에서 작성한 Title Tag와 Meta Description은 실제 검색엔진에 반영되는 부분입니다.
그럼으로 서비스를 잘 드러낼 수 있는 제목과 설명을 작성해주세요.
아래에 있는 Open Graph도 세팅해줍니다.
Open Graph는 주로 웹사이트의 사용자 유입, 전환률에 확실한 영향을 주기 때문에 중요합니다.
Open Graph란?
Open Graph는 링크 공유 시 해당 웹페이지에 대한 정보를 특정 형식의 미리보기 형태로 제공해주는 기능입니다.
아래와 같이 Open Graph를 설정해주시면 됩니다. 일반적으론 SEO에 세팅해두신 값이랑 일치하게 세팅하시면 됩니다.
마지막으로는 Site Search 세팅을 해줍니다.
해당 부분은 웹플로우에서 검색 기능을 사용했을 경우 해당 키워드를 통해 검색 결과에 나오게끔 하는 기능입니다. SEO 직접적인 영향을 미치진 않지만 해당 기능 역시 세팅을 해줍니다. (자세한 내용은 다음을 참고해주세요.)
3. 이미지의 alt 속성 설정하기
이미지의 alt 속성은 해당 이미지가 어떤 이미지인지 설명해주는 역할을 합니다.
또한 로딩 속도나 다른 이유를 통해 이미지가 보여지지 않게 되었을 때 이미지를 대신하기도 합니다.
이미지의 설명을 달아주면 웹 페이지의 품질과 웹 접근성을 높혀 SEO에 긍정적인 영향을 미칠 수 있습니다.
이미지의 alt 속성을 설정하기 위해선 이미지를 클릭해 줍니다.
그럼 위에 톱니바퀴 모양의 Element Settings 버튼이 뜨는데 이를 눌러줍니다.
Alt Text로 되어 있는 부분을 수정해주시면 되는데, Decorative 속성을 선택하시게 되면 웹플로우에서 자동으로 이미지의 제목을 alt text로 넣어줍니다
다만 제목이 이상하다면 SEO 최적화를 위해 다음과 같이 "Custom description"을 눌러 수정해주세요.
4. 링크 내부에 텍스트 넣어주기
링크 태그(a 태그)를 사용할 때 내부의 text를 넣어주지 않을 경우 다음과 같이 사용성 에러가 뜨게 됩니다.
위의 이미지와 같이 해당 링크가 어떤 페이지로 이동하는지 명시적으로 나타내주는 것이 웹 페이지의 품질을 향상시키기 때문에 링크 태그 내부에 text 태그를 넣어 줍니다.
5. sitemap 설정하기 (도메인 연결 필요)
sitemap은 사이트에 있는 페이지, 동영상 및 기타 파일과 그 관계에 관한 정보를 제공하는 파일입니다. Google과 같은 검색엔진은 이 파일을 읽고 사이트를 더 효율적으로 페이지 정보를 가져옵니다.
다음과 같이 구글 문서에서도 sitemap의 중요성을 나타내고 있습니다.
출처: https://developers.google.com/search/docs/crawling-indexing/sitemaps/overview?hl=ko웹플로우에서 sitemap을 세팅하기 위해선 도메인 연결이 필수적으로 이뤄져야 합니다.
만약 도메인 연결을 하셨다면, 다음과 같이 Settings로 가셔서 SEO를 눌러보시면 sitemap을 설정할 수 있는 화면이 뜹니다.
Settings/SEO 화면일반적으로는 웹플로우에서 Auto-generate sitemap 기능을 제공하기 때문에 해당 기능을 사용하셔도 좋습니다.
다만 각 페이지에 대한 우선순위를 세팅하고 싶으시다면, sitemap을 만들어 주는 서비스를 이용하셔서 sitemap을 만드신후 <priority>의 수치를 조정해 주시면 됩니다.
6. robots.txt 설정하기 (도메인 연결 필요)
robots.txt는 검색로봇에게 사이트 및 웹페이지를 수집할 수 있도록 허용하거나 제한하는 국제 권고안입니다.
이는 검색의 크롤링 봇이 웹에 접근할 때 로봇이 지켜야하는 규칙과 sitemap 파일의 위치를 알려주는 역할을 합니다.
그렇기 때문에 이를 잘 못 설정했을 경우, 검색엔진에 의해 색인이 안되는 문제를 일으킬 정도로 중요한 SEO 관련 파일입니다.
웹플로우에서 robots.txt를 세팅하기 위해선 도메인 연결이 필수적으로 이뤄져야 합니다.
만약 도메인 연결을 하셨다면, 다음과 같이 Settings로 가셔서 SEO를 눌러보시면 Indexing 카테고리의 robots.txt을 설정할 수 있는 화면이 뜹니다.
Indexing 카테고리 화면버튼이 하나 보이실텐데 이는 webflow.io로 만들어진 test domain을 subdomain으로서 검색되게 할 것인가에 대한 내용입니다. 그래서 도메인을 연결하셨다면 굳이 on을 할 필요는 없습니다.
또 아래에 보시면 robots.txt를 설정할 수 있는 창이 나옵니다.
기본적으로 사진과 같이 세팅하시면 모든 검색엔진의 로봇에 대하여 수집을 허용하시겠다는 의미입니다.
robots.txt의 설정과 관련해서는 해당 링크를 참고해 보시면서 세팅해보시면 좋을 것 같습니다.
이렇게 오늘은 SEO의 중요성과 웹플로우 SEO를 최적화 하는 방법에 대해서 알아보았습니다.
해당 방법 외에도 SEO를 수치화 해서 측정하고 개선하는 다양한 노하우들이 있으니 찾아보시면 좋을 것 같습니다.
더컴퍼스에서는 클라이언트의 웹사이트를 단순 제작해 드리는 것이 아니라, 클라이언트 회사의 성장에 기여할 수 있도록 SEO 최적화 검색 엔진 상단 노출등 다양한 부분을 고민해 홍보가 잘 될 수 있도록 해 드리고 있습니다.
저희 더컴퍼스는 60여 개 이상의 관공서, 스타트업, 유튜버 및 유수기업 홈페이지 및 프로젝트 개발을 성공적으로 수행하였습니다. 귀사의 홈페이지가 단순하고 일반적인 홈페이지가 아닌, 담당자님의 철저한 니즈 분석과 소통을 통해 꼭 맞는 웹사이트를 제작해 드리겠습니다.
직접 웹페이지를 만드실 때 어려움을 느끼시거나 전문가의 조언이 필요하시다면 언제든 편하게 연락해 주세요.
