Flutter web Seo 플러터 url # 제거하기, seo 최적화

Seo를 패키지를 붙여서 최적화를 했으나 색인이 안된다는 오류가 발생했다

 

1. robots.txt 추가

구글 서치 콘솔에서 에러는 해결 됐음

 

2. 세부 url로 검색시 색인 안됨 

근데 세부 페이지들을 색인하지 못함 -> 수동으로 신청 

 

사이트 맵 전체 url을 추가하진 못하고 일부 페이지만 사이트 맵 적용함 

 

 

3. url에 포함되어있는 # 때문 (유력)

#을 제거하는 코드 runapp전에 사용한다

usePathUrlStrategy();

 

얘가 문제가 큰거 같다. 여러가지 찾아본 결과 크롤러한테는 하나의 페이지로 인식됨. 그래서 저품질에 걸림. 

크롤러는 기본적으로 이미 알려진 페이지를 크롤링합니다. 즉, 하나의 페이지에 들어갔을 때 발견되는 URL을 대기열에 저장하고 저장된 URL을 기반으로 다시 크롤링하고 대기열에 저장하고를 반복하여 크롤링하게 됩니다. 그러나 SPA 방식의 웹사이트의 경우 기본적으로 사이트 내의 페이지로 향하는 href속성을 html에서 사용하지 않고 자바스크립트로 페이지 이동을 구현하기 때문에 크롤러가 사이트에 있는 모든 페이지 (하나의 페이지이지만)의 내용을 크롤링하지 못하는 경우가 발생할 수 있습니다. 출처 link

 

 

그래서 해결 방법인 #을 제거하기로 했다. 

(3) History API
History API는 SPA방식의 웹사이트에서 주소가 바뀌지 않는 문제를 해결하기 위해 싱글페이지이지만 주소를 부여하는 기능의 API입니다. History API는 어떤 렌더링 방식이든지 사용해야합니다.
과거 SPA환경에서 #또는 #!을 통해 주소를 구분하였지만 현재는 History API와 pushState() 방법을 통해 특수문자로 된 주소가 아닌 정적인 URL과 같은 주소를 설정할 수 있게 되었습니다. SEO의 관점에서 이는 크롤링뿐만 아니라 백링크를 얻기 용이하게 되었다고 볼 수 있습니다.
출처 : https://arc.net/l/quote/xzpmhqdo

 

참고 : https://docs.flutter.dev/ui/navigation/url-strategies

PathUrlStrategy uses the History API, which requires additional configuration for web servers.

 

 

근데 3번을 하니까 새로고침시 403에러가 발생함 

 

 

공식 문서에 따라서 코드를 수정.

Hosting a Flutter app at a non-root location
Update the <base href="/"> tag in web/index.html to the path where your app is hosted. For example, to host your Flutter app at my_app.dev/flutter_app, change this tag to <base href="/flutter_app/">.

 

로컬모드에서는 새로고침해도 문제 없이 잘됨. 그래서 잘되는 줄 알았는데 서버에서 돌아가기 위한 설정이 필요하다고 한다!!!!! 오예 여기까지 알아냄. 다들 저 코드만 있지 어떤 설정이 필요하다고는 말이 안나옴.. 찾는데 너무 힘들었따. ㅠㅠ 

https://www.jasonrai.ca/removing-the-number-sign-in-urls-from-flutter-web-apps

 

파베이면 이런 설정이 필요함. 근데 우리는 파베를 쓰지 않아서 웹서버에서 처리를 따로 해야할 거 같음

"hosting": {
  // ...

  // Serves index.html for requests to files or directories that do not exist
  "rewrites": [ {
    "source": "**",
    "destination": "/index.html"
  } ]
}

 

와 나랑 똑같은 오류 발생한 거 찾음 링크

Flutter Web Custom Route URL Navigation gives Error 404

I built my flutter web app using named routes and everything was working fine on my local machine. I could navigate to different views by changing the path in my browser url. But when I deployed the app to AWS amplify, every time I tried to navigate to a different route by changing the URL, I would get 403 Access Denied Error; while people using other hosting platforms or on their machine using a python server reported getting a 404 error.

 

로컬머신에서는 라우트가 잘 작동하는데 실제로 돌아가면 403 에러를 뱉는다. 지금 내가 겪고 있는 문제 !!!

해결책 : 리다이렉트 룰을 지정해야함. aws를 쓰고 있어서 https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa

Using redirects - AWS Amplify Hosting

 

웹서버에서 처리해주니 바로 해결됐다....3일 삽질함...눈물 좔좔

 

최적화 성공!!!! 

힘들었던 여정이다 ㅠ_ㅠ