웹플로우(Webflow), SEO 5가지 체크리스트
외주업체 없이 검색 엔진 노출 환경 만들기
웹플로우(Webflow)로 홈페이지를 만드는 분들에게 도움이 되고자 작성한 리스트 일부분을 공유합니다.
참고로 저는 코딩을 하지 못하는 프로덕트 매니저입니다. 노코드툴을 잘 다룰 줄 아는 것 뿐입니다.
제가 했다면 여러분도 따라하실 수 있어요.
해당 글은 웹플로우 뿐만 아니라, 홈페이지를 만들고 본격적으로 사용하기 전 최종 검토해야 할 목록이에요.
오늘은 이 중에서도 'SEO'와 관련하여 자세한 가이드를 제공하고자 해요.
✔️ 구글이 파악하는 내 사이트 품질 확인하기
프로젝트를 스테이징 도메인에 직접 배포해 봅니다.
HeadingsMap 크롬 익스텐션을 다운로드하세요.
배포된 웹사이트에 실행시켜 보세요. 홈페이지를 만들 때 지정하며 넣은 엘레먼트 Tag 네임, Headline의 이름이 나열됩니다. 구글은 아래처럼 나열된 정보를 데이터로 파악하고 품질을 사이트의 품질을 판단할 때 사용합니다.
헷갈리는 네이밍은 없나 살펴보고, 있다면 Tag이름을 웹플로우(Webflow) 내에서 바꿔주세요.
✔️ Favicon, Webclip 확인하기
프로젝트를 배포하고, 데스크톱에서 확인해 보세요.
프로젝트의 Settings(설정)에 들어가 업데이트할 수 있습니다. 꼭 퍼블리싱해주시고요,
32X32, 256X256 사이즈로 원본 이미지를 줄여야 업데이트가 가능합니다. 해당 링크를 클릭해 다운로드하세요.
✔️ 공유하기 기능 QA 하기
프로젝트를 배포하고, 친구에게 카톡 혹은 텔레그램 공유를 해보세요. 대표 사진이 저렇게 나오면 안 될 것 같죠?
프로젝트의 각 페이지를 열어, 아래 박스 친 부분을 키워드 위주로 채워주세요. 프리뷰에서 구글 검색 시 어떻게 나올지도 동시에 볼 수 있습니다.
좀 더 아래로 스크롤해 똑같이 아래 부분 채워주세요.
대표 이미지는 먼저 사진 폴더에 넣어주세요. 사진에 마우스를 올리면 세팅 아이콘이 나오는데 그걸 클릭하면 두 번째 이미지처럼 Asset Details가 뜹니다. 링크 아이콘을 클릭하면 URL이 카피됩니다.
해당 URL을 페이지에 넣어주세요.
✔️ 이미지 Alt text 넣기
각 이미지를 설명하는 문구를 넣는 것은 홈페이지 유저의 접근성과 사이트 품질을 높입니다. 프로젝트 왼쪽 하단의 빨간색 박스를 클릭하면 Audit 패널이 열립니다.
각 옵션을 클릭하여 호버 할 때 나오는 'Show me how to fix it'을 누르세요.
Find it for me를 누르면 Alt 텍스트가 빠진 이미지를 자동으로 찾아줍니다.
Asset Details에서 Decorative 옵션을 클릭하면 자동으로 이미지에 대한 설명을 웹플로우(Webflow)가 넣어줍니다. Issue resolved 가 자동으로 뜨면, 해결된 겁니다.
나머지 이미지도 똑같이 해결해 주세요.
✔️ 로딩 속도 확인하기
구글 웹페이지 측정 사이트에 들어갑니다.
URL을 넣어 속도를 측정해 보세요. 유저가 우리 페이지를 보는 속도를 알 수 있어요.
데스크톱, 모바일 속도가 서로 다른 것이 정상입니다.
스크롤하여 아래로 내리면, 유저가 우리 페이지를 보는 속도를 분석한 결과를 읽을 수 있습니다. 그 아래는, 성능 속도를 높일 수 있는 개발적인 방법을 알려줍니다. 해당 내용은 프런트 개발자에게 넘겨주세요.
해당 가이드가 도움이 되었다면, 브런치 구독과 좋아요 부탁드립니다 :)
인스타그램: pm_life.toon
