URL에서 HTML 확장자를 제거하는 방법

최근 웹 페이지의 URL에서 HTML 확장자를 제거하는 방법에 대한 질문을 받았습니다. 이 작업을 수행하는 방법에 대한 간단한 조언을 제공했지만 수행 방법에 대한 게시물을 작성하는 것이 좋을 것이라고 생각했습니다.

여기서 말하는 내용이 무엇인지 잘 모르겠다면 웹사이트를 방문했을 때 URL이 다음과 같이 표시됩니다 – https://example.com/about.html . 특히 .html 부분은 대부분의 사람들이 https://example.com/about 대신 보기를 선호하므로 여기에서 문제입니다. 더 멋지지 않나요?

URL에서 HTML 확장자를 제거하는 몇 가지 방법이 있으므로 그 중 몇 가지를 살펴보겠습니다. 나를 돕기 위해 Simple.css을 사용하여 빠른 테스트 사이트를 만들었습니다. 다음과 같이 보입니다.



주소 표시줄의 URL을 확인하십시오 – https://test.kq.md . 정보 페이지를 방문하여 무슨 일이 일어나는지 봅시다…



으흐흐흐 내 눈! 🤮 저 끔찍한 혼란을 보세요! https://test.kq.md/about.html 좋지 않습니다. URL에서 HTML 확장자를 제거하는 첫 번째 솔루션은 간단합니다. 페이지를 폴더에 넣는 것입니다.

해결 방법 1 - 폴더에 페이지 넣기

내가 만든 테스트 사이트는 현재 평평하고 폴더 구조가 없습니다. 따라서 다음과 같이 표시됩니다.

|-- 📄 index.html
|-- 📄 about.html

/about.html를 /about로 변경하려면 about라는 폴더를 만들고 about.html를 해당 폴더로 이동한 다음 이름을 index.html로 바꿉니다. 이러한 변경 사항이 적용되면 새 폴더 구조는 다음과 같아야 합니다.

|-- 📄 index.html
|-- 📁 about
     |-- 📄 index.html

변경한 후 정보 페이지를 다시 방문하여 URL에 어떤 일이 발생했는지 확인합니다.



그 URL을 보세요, 여러분! 파일 확장자가 표시되지 않습니다. 여기서 우리가 성취한 영광을 잠시나마 만끽할 수 있을까요?

페이지를 생성하는 정적 사이트 생성기like Jekyll의 수입니다. 모든 것이 자체 하위 폴더에 있으므로 파일 확장자가 보이지 않습니다.

자, basking 완료; 기분이 좋아. 우리의 모조는 강하고 세상의 모든 것이 잘됩니다. 웹사이트에 몇 페이지만 있는 경우 모든 것이 좋습니다. 수십 또는 수백 페이지의 블로그가 있다면 어떨까요? URL에서 HTML 확장자를 제거하기 위해 전체 사이트를 재구성하는 것은 불가능할 수 있습니다.

해결 방법 2 – .htaccess 리디렉션을 사용하여 HTML 확장명 제거

대체 솔루션은 웹 서버의 .htaccess 파일을 사용하여 URL에서 파일 확장자를 제거하는 것입니다. 이것은 단 몇 줄의 코드로 매우 간단하게 수행됩니다.

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^/]+)/$ $1.html
RewriteRule ^([^/]+)/([^/]+)/$ /$1/$2.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !(\.[a-zA-Z0-9]{1,5}|/)$
RewriteRule (.*)$ /$1/ [R=301,L]

이 코드 스니펫이 수행하는 작업은 URL 경로에서 제거.html하는 것입니다. 또한 .html가 추가된 URL을 방문하는 모든 사람을 리디렉션하므로 사람들이 전체 URL을 방문하더라도 404 오류가 발생하지 않아야 합니다.

결론

그게 다야, 끝났어! 이러한 솔루션 중 하나를 사용하면 모든 URL에서 HTML 확장을 제거하고 모든 추함을 제거할 수 있어야 합니다.

Per my disclaimer , 이것이 제가 직접 이 작업을 수행한 방법입니다. 더 나은 방법이 있습니까? 그렇다면 알려주세요.

Netlify로 사이트를 호스팅하는 경우 이 프로세스를 완전히 생략하고 파일 확장자를 제거하기 위해 내장된 옵션을 사용할 수 있습니다. This post by Ryan Moore에서 그 방법을 보여줍니다.

How To Remove The HTML Extension From A URL은 Kev Quirk의 원본 콘텐츠입니다.