안녕하세요, 블로그 사이트 독자 여러분. 오늘은 독특함을 만드는 주제에 대해 말씀드리고자 합니다. URL인터넷에서 생성 원리에 대해 이야기하십시오. 상대 및 절대 링크.

물론 Urls 또는 URI의 더 확장된 버전(uri)을 형성하는 주제는 깊이 파고들어 진실에 도달하려고 하면 상당히 복잡합니다.

그러나 응용 프로그램의 URL 구조를 이해하는 것으로 충분하기 때문에 이것이 필요하지 않습니다.

글쎄요, 또한 왜 그리고 어떻게 만들 수 있는지 이해하는 것이 유용할 것이라고 생각합니다. 상대 링크명시적으로 필요하지 않은 경우 이러한 목적을 위해 절대적인 것을 사용하지 마십시오.

URL 주소 - 무엇이며 사이트 색인 생성에 어떤 영향을 미치는지

그럼 URL이 무엇인지, 왜 필요한지, 어떤 부분으로 구성되어 있는지 알아보겠습니다. 아시다시피 검색 엔진은 전체가 아니라 개별 페이지 모음으로 생성됩니다. 그러면 그들은 다를 것이다 검색어(선택에 대해 자세히 알아보기 키워드를 기반으로 하는 Wordstat에서

URL 및 URI

음, 인터넷상의 모든 문서(웹 페이지) 고유한 URL이 있습니다., 이는 Uniform Resource Locator(리소스 로케이터)를 나타냅니다. 그는 HTTP 프로토콜뿐만 아니라 팀 버너스-리(Tim Berners-Lee)(프로젝트 창시자의 아버지)가 개발하고 만든 방법이기도 합니다.

대체로 URL은 URI(Uniform Resource Identifier-Uniform Resource Identifier), 그러나 당신과 나, 이러한 모든 미묘함은 아마도 우리 사이트에서 작업할 때 필요하지 않을 것입니다(불필요한). 그것이 무엇이며 어떤 부분으로 구성되어 있는지 일반적인 용어로 이해하고 상대 및 절대 링크로 넘어 갑시다.

URL 주소:인터넷에서 무언가를 명확하게 가리키는 방법. 이것은 http 프로토콜(ftp를 통해서도 가능)을 통해 사이트()에서 작업하는 데 사용될 뿐만 아니라 물론 이 식별자를 웹(http 및 https 프로토콜)에 적용하는 데 관심이 있습니다. 이 경우의 URL은 다음과 같이 보일 것입니다.

https://.html

이 주소의 예에서 "http" 부분은 데이터 전송 프로토콜을 나타내거나 사양의 용어를 따를 경우 스킴(http나 ftp와 달리 데이터 전송 프로토콜은 아니지만 안에 URL 주소 x)..사이트") - 또는 .

함께 접착해야 하는 WWW 및 기타 사이트 미러

웹에는 WWW가 있거나 없을 수 있는 사이트 URL에 도메인 이름을 지정하는 세부 사항이 있습니다. 성공하려면 사이트의 이 두 거울을 접착하는 것이 매우 중요합니다. 종종 호스팅 제공업체에서 미러 접착을 수행할 수 있지만 반드시 확인해야 합니다.

저것들. 검색 엔진의 경우 WWW가 있거나 없는 사이트는 완전히 다르며 이를 접착하지 않으면 링크 질량이 알 수 없는 비율로 이들 사이에 분할됩니다. 주소의 WWW는 본질적으로 일종의 격세론입니다. 도메인 이름세 번째의 두 번째 수준 도메인.

사이트를 보안 사이트로 이동할 때도 마찬가지입니다. http가 있는 https 프로토콜- 검색 엔진의 경우 다른 사이트가 됩니다.

사용에 이상이 없습니다 사이트 URL의 www아니요, 하지만 검색 엔진에 의해 인덱싱되고 순위에 참여할 메인 미러(사이트 지시문 작성뿐만 아니라 통과 및 통과)를 명확하게 정의해야 합니다.

E. "without atavism", 이 멋진 접두사를 내 URL에 추가하면 "without WWW" 주소로 자동 리디렉션됩니다.

https://www..html

위에서 설명한 미러뿐만 아니라 귀하에게 속한 다른 도메인 이름도 붙일 수 있습니다. 예를 들어, 잘 알려진 브랜드의 라틴 문자에서 다른 철자가 가능한 경우 가능한 모든 도메인을 구입합니다(오류가 있는 철자 변형, 다른 도메인 영역등)을 붙이고 붙입니다. 그런 다음 가능한 URL 주소 중 하나에서 사이트에 액세스할 때 기본 미러가 열립니다.

예를 들어, reg.ru에서 등록을 위한 잠재적인 미러 또는 무료 도메인을 볼 수 있습니다(아래 양식에 제안된 도메인 이름을 직접 입력할 수 있음).

검색 엔진 색인에서 사이트의 추가 URL(중복 페이지)은 어디에서 옵니까?

그러나 우리의 양으로 돌아갑니다. URL에서 세 번째 슬래시(/) 뒤에 있는 부분(이 예에서는 "papka/fail.html")을 특정 개체(문서 또는 파일)에 대한 경로라고 합니다. 우리의 경우 이것은 "papka" 디렉토리에 있는 "fail.html" 문서이며, 이 문서는 차례로 루트 폴더( Url의 루트는 항상 세 번째 슬래시와 일치합니다.왼쪽).

그러나 주소에 쓸 수 있는 것은 그것이 전부가 아닙니다. URL을 통해 다양한 것들이 소위 GET 매개변수를 전달합니다. 이 매개변수는 예를 들어 다음과 같이 물음표를 넣은 후 맨 끝에 추가됩니다.

https://www..html?print=예

전체 문제는 검색 엔진이러한 두 개의 URL(Get 매개변수가 있거나 없는)은 완전히 다른 웹 문서이며, 각각은 검색 엔진에 의해 인덱싱됩니다.

원하는 만큼 다른 Get 매개변수를 동일한 URL에 추가할 수 있으며, robots.txt 파일에 적절한 금지를 생성하지 않으면 Yandex와 Google에서 이 모든 것을 인덱싱합니다. 바로 위. 그렇지 않으면 검색 엔진이 많은 중복 콘텐츠에 대해(다른 주소에서 동일한 콘텐츠 사용 가능).

또한 예를 들어 홈페이지내 리소스는 두 가지 다른 URL을 사용하여 액세스할 수 있습니다.

https://사이트 https://site/index.php

(심지어 3 - https: // site /도 있음) 어떤 경우에도 기본 페이지가 열립니다. 이것은 꽤 나쁩니다. 왜냐하면 검색 엔진은 세 가지를 찾을 것입니다 다른 페이지(그들의 관점에서 다른 URL을 가짐), 하지만 그들은 같은 내용을 좋아하지 않습니다.

그래서 위의 URL 중 하나를 입력하면 "https: // site /" 형식의 URL로 리디렉션되도록 만들었습니다. 이것은 원칙적으로 .htaccess 파일의 301 리디렉션을 사용하여 수행되며, 직접 서버 설정에서 직접 또는 호스팅 업체에서 수행합니다.

자세한 내용은 링크된 게시물을 참조하세요.

URL 구조 및 URL 인코딩으로 재코딩

일반적으로, 완전한 URL 블록 다이어그램다음과 같이 나타낼 수 있습니다.

실제로는 일반적으로 로그인, 비밀번호 및 포트를 사용하지 않지만 유료 사이트에 액세스하기 위해 지정해야 할 수도 있습니다.

http://로그인: [이메일 보호됨]웹사이트/platniy-access.html

설치하는 것도 일반적입니다. FTP 로그인 비밀번호, 비표준 포트도 사용할 수 있지만 이 프로토콜의 기본값과 다릅니다. 그런 다음 이러한 리소스에 액세스하려면 FTP 서버다음과 같은 URL을 입력해야 합니다.

ftp://로그인: [이메일 보호됨]웹사이트:6789/samoe-nujnoe/cimus

이 주소에 물음표 뒤에 쓸 수 있는 GET 매개변수에 대해, 우리는 이미 그러한 매개변수가 있는 URL에서 페이지의 색인 생성을 금지할 필요가 있다고 말하고 언급했습니다(위에 대한 기사 링크는 이 모든 것이 자세히 설명되어 있는 로봇).

올바른 위치에서 페이지를 여는 해시 링크 형태의 URL 주소

그러나 URL에 포함될 수 있는 이러한 모든 것 외에도 위의 순서도에서 소위 닻, 파운드 기호 "#"(앵커를 포함하는 URL은 일반적으로 해시 링크).

앵커는 내부에 미리 부착되어 있습니다. HTML 코드원하는 HTML 태그(단락, 제목 또는 기타 적절한 태그)에 ID="label" 속성을 추가한 다음 파운드 기호 "#"를 통해 페이지 URL에 이 앵커의 이름을 추가하여 문서(페이지) 이 웹 페이지의 시작 부분으로 이동할 수 있으며 앵커가 배치된 위치로 즉시 이동할 수 있습니다(모든 사람이 자동으로 페이지를 올바른 위치로 스크롤합니다).

도움말을 사용하여 페이지에서 탐색 구성에 대한 정보를 포함하여 이 기사를 읽으십시오.

URL에 사용할 수 있는 문자는 무엇입니까?

URL에 사용되는 다양한 인코딩도 언급할 가치가 있습니다. 기록하지 않고 사용할 수 있습니다.뿐 한정 수량문자. 일반적으로 ,,,[_],[-] 문자 집합으로 제한하는 것이 좋습니다.

일반적으로 오류를 방지하기 위해 사이트 페이지의 파일 이름과 URL을 소문자로 설정하는 것이 좋습니다. 유닉스 계열 시스템(대부분의 웹 서버가 작동함)의 경우 대문자가 대문자이기 때문입니다. 및 소문자가 다릅니다(Windows와 다름). 레지스터가 다르기 때문에 불필요한 혼동이 발생할 수 있습니다.

URL에 다른 문자(러시아어 포함)를 사용할 수 있지만 녹음이러한 동일한 문자(URL 인코딩).

슬픈 점은 인코딩 후 얻은 키릴 자모와 같은 기호가 있는 URL의 소화할 수 없는 모양입니다. 각 키릴 문자는 에서 2바이트를 사용하여 인코딩되며 16진수로 작성되고 백분율 기호 "%"로 구분됩니다. 예를 들어 다음 URL:

https://website/who's new/

변환 후 다음과 같이 표시됩니다.

http//사이트/%BA%D1%82%D0%BE%20%D0%BD%D0% B0%20%D0%BD%D0%BE%D0%B2%D0%B5%D0%BD%D1% 8C%D0%BA%D0 %BE%D0%B3%D0%BE

일반적으로 이것은 그다지 멋지지 않은 것으로 밝혀졌으며 그들은 국가 인코딩에서 이 소화 불가능한 유형의 URL을 처리할 계획이지만 이것은 그다지 뜨겁지 않습니다.

위의 모든 내용과 관련하여 CMS에 있을 때 조언을 드리고자 합니다. 러시아어로 페이지 주소를 만들지 마십시오, 특히 많은 프로모터에 따르면 Yandex 및 Google.ru에 대한 Seo 최적화 측면에서 더 좋을 것이기 때문입니다.

사이트의 상대 및 절대 링크

시작하자 절대 링크, 왜냐하면 이 경우 이 기사에서 이미 논의한 것 외에 특별한 것은 말할 필요가 없습니다. 저것. 절대 링크는 데이터 전송 프로토콜, 사이트(호스트)의 도메인 이름 및 원하는 웹문서. 모두.

HTML에서 절대 링크는 특수 A 태그(하이퍼링크)를 사용하여 형성됩니다. 그것을 내려놓으려면 문서의 텍스트(구문 또는 그림)에서 원하는 위치를 여는 하이퍼링크 태그와 닫는 하이퍼링크 태그로 둘러싸고 "Href" 속성의 여는 태그 A에 작성하면 됩니다. 방문자가 클릭할 때 이동해야 하는 문서:

PHPMyAdmin

모든 것이 매우 간단합니다.

상대 링크의 이점과 얻을 수 있는 방법

그러나 절대 하이퍼링크는 보통 외부 사이트로 연결하고자 할 때만 사용되며, 내부 전환을 위해 대부분의 웹마스터(똑똑하고 명석한, 저처럼 🙂)가 사용하려고 합니다. 상대 링크. 여기에는 몇 가지 이유가 있습니다.

1. 정의상 상대 링크는 더 짧고 사이트 코드를 복잡하게 만들지 않습니다(결국 이 문제에서는 모든 작은 것이 중요합니다).
2. 또한 다른 도메인으로 이동하거나 프로토콜을 https로 변경할 때 사이트의 모든 링크를 변경할 필요가 없습니다.
3. 또한 일부 인터넷 프로젝트 디자인은 내부 상대 링크를 변경하지 않고도 빠르고 쉽게 다른 리소스로 전송할 수 있습니다.

따라서 이름으로 판단하면 링크되는 웹 문서의 주소는 이 상대 링크가 배치될 코드(스토브에서 춤)에서 귀하의 사이트 문서와 관련하여 작성되어야 합니다. 설정을 위한 두 번째 옵션은 루트 폴더를 시작점으로 사용하는 것입니다. 이들은 정확히 만드는 두 가지 방법이제 우리가 고려할 상대 링크.

첨부된 문서를 기준으로 상대 링크 만들기

상대 경로(하이퍼링크 태그의 Href 속성 값을 의미함)를 작성하는 가장 간단하고 짧은 방법은 웹 문서가 둘 다 있을 때 얻을 수 있습니다. 리드)는 서버의 동일한 폴더에 있습니다.

닻

이제 수락자 문서가 기증자 문서와 같은 디렉터리에 있는 폴더에 있다고 가정해 보겠습니다.

이 경우 상대 링크는 어떻게 생겼습니까? 모든 것이 매우 간단합니다.

닻

지금은 모든 것이 명확하다고 생각합니다. 수락자의 파일 또는 문서 경로를 지정합니다(폴더 이름 및 직접 슬래시 "/"를 통해 파일 또는 문서 이름). 저것들. 기증자에서 수락자에게로 이동하려면 상대 링크에 이름이 표시된 폴더를 열어야합니다.

이제 기증자 문서 자체가 폴더 안에 있고 이미 한 단계 더 높은 수락자 문서 또는 파일에 대한 상대 링크를 넣어야 하는 반대 상황을 고려해 보겠습니다.

기증자 문서에서 수락자 파일(또는 문서)로 이동하려면 다음이 필요합니다. 이 폴더에서 한 단계 위로 이동. 이를 위해 특별한 요소가 제공됩니다. 연속으로 두 개의 점, 그리고 슬래시를 통해 수락자에 대한 추가 경로가 기록됩니다. 따라서 위의 예에서 상대 경로는 다음과 같습니다.

URL이란 무엇입니까?

두 단계 위로 올라가야 하는 경우 항목은 다음과 같습니다.

URL이란 무엇입니까?

글쎄, 그 후에 수락자에 대한 상대 경로를 설정하려면 두 번째 상위(기부자 문서에 상대적인) 수준의 일부 폴더도 입력해야 합니다.

복잡한 트랙 설계

폴더로의 하강과 레벨 업으로의 상승이 많을 수 있습니다. 가장 중요한 것은 자신이 혼동하지 않는다는 것입니다.

루트 폴더에 상대적인 링크 만들기

하이퍼링크가 첨부된 기증자 문서와 관련하여 위에서 논의한 모든 링크를 작성했지만 루트 폴더를 시작점으로 사용대지. 상대 경로의 루트는 단일 슬래시 "/"처럼 보입니다.

저것. 기본 페이지로의 전환은 매우 간단하지만 사치스럽게 보일 것입니다.

닻

예를 들어, 순수한경로는 다음과 같을 수 있습니다.

닻

하지만 상대적인동일한 파일에 대해 약간 더 짧아집니다.

텍스트

상대 및 절대 형식의 폴더를 참조하는 방법

절대 링크와 상대 링크를 모두 생성할 때 고려해야 하는 한 가지 뉘앙스에 주의를 기울이고 싶습니다. 원하는 경우 폴더 참조, 그런 다음 해당 하이퍼링크의 끝에(이름 뒤) 슬래시 "/"를 넣어야 합니다. 즉, 폴더의 내용을 열려면 다음과 같이 작성해야 합니다.

닻

이건 아니야:

텍스트

두 번째 경우, 처리하는 동안 서버는 먼저 "업로드"라는 이름의 파일(확장자 없이 정확히 이 파일)을 찾으려고 시도하지만 찾지 못한 다음 해당 폴더를 찾습니다. 따라서 즉시 작성 원하는 폴더 이름 뒤에 슬래시, 거기에 없는 것을 찾기 위해 서버에서 추가 리소스를 가져오지 않습니다.

당신은 또한 그것을 알고 있어야합니다 연락할 때상대 또는 절대 참조 폴더에 웹 서버가 표시됩니다.그 안에 있으며 일반적으로 index.html 또는 index.php라고 불리는 소위 인덱스 파일입니다. 폴더에 색인 파일이 없는 경우 서버에 보안이 잘못 구성된 경우 해당 내용 목록이 표시되어 리소스 보안이 저하될 수 있습니다.

찾으면 반드시.

그건 그렇고, 사이트의 메인 페이지에 액세스하는 것은 본질적으로 폴더 (루트)에 액세스하는 것과 동시에 루트에있는 인덱스 파일이 실행됩니다 (내 경우에는 index.php ). 따라서 폴더에 액세스하는 경우 서버 부하를 줄이기 위해도메인 이름 뒤에 슬래시를 쓰는 것이 좋습니다.

여기 있습니다, Mikhalych!

행운을 빕니다! 블로그 페이지 사이트에서 곧 만나요

당신은 관심이있을 수 있습니다

ASCII 텍스트 인코딩(Windows 1251, CP866, KOI8-R) 및 유니코드(UTF 8, 16, 32) - krakozyabry 문제를 해결하는 방법
어떻게 웹사이트 트래픽을 하루에 300명으로 늘렸습니까?
사이트 및 온라인 상점에서 Yandex 검색
사이트맵의 사이트맵 XML 형식 Yandex 및 Google - Joomla 및 WordPress 또는 온라인 생성기에서 사이트맵을 만드는 방법

모두 HTML 링크외부와 내부로 나뉩니다. 외부 링크는 한 사이트에서 다른 사이트 또는 다른 사이트에 있는 파일로 연결되는 링크입니다. 내부 링크- 사이트의 한 페이지에서 동일한 사이트의 다른 페이지 또는 동일한 페이지의 섹션으로 연결되는 링크입니다.

모두 외부 링크태그의 href 속성에서 참조하는 문서의 절대 경로를 포함합니다. 내부 링크는 차례로 절대 경로와 상대 경로를 모두 포함할 수 있습니다(이 경우 개인 기본 설정에 따라 다름).

문법 규칙처럼 다른 언어들, 프로그래밍에도 규칙이 있습니다. 유효성 검사를 통해 페이지가 이러한 규칙을 준수하는지 확인할 수 있으며 오류 및 경고가 있는 경우 이를 제거하기 위한 권장 사항이 제공됩니다. 그러한 검사의 필요성에 대한 자세한 내용은 아래에서 논의될 것입니다.

사이트의 유효성에 영향을 미치는 요소

브라우저가 웹 페이지를 어떻게 "읽는지" 궁금해 한 적이 있습니까? 그들은 코드를 분석하고 사람들을 위한 시각적 형태로 변환하는 "엔진"을 가지고 있습니다. 불행히도 각 브라우저에는 고유한 코드 처리 메커니즘이 있으며 이로 인해 페이지가 다르게 표시될 수 있습니다.

유효하지 않은 웹 페이지는 브라우저에서 다양한 방식으로 읽을 수 있습니다. 이로 인해 방문자가 브라우저에서 페이지 콘텐츠를 제대로 볼 수조차 없게 됩니다. 유효성 검사는 나중에 거의 모든 주요 차이점을 수정하고 거의 모든 웹 브라우저에서 웹 페이지를 읽을 수 있도록 합니다(대부분의 경우 예외는 인터넷 익스플로러이전 버전). 여기에서 "크로스 브라우저 레이아웃"이라는 용어가 나왔습니다. 모든 인기 있는 브라우저에 똑같이 좋은(호환성) 레이아웃입니다.

이것이 SEO에 어떤 영향을 미칩니까? 검색 엔진 봇이 시맨틱 웹 페이지를 좋아한다는 것을 이해하는 것이 중요합니다. Wikipedia에 따르면 시맨틱 레이아웃은 다음에서 웹 페이지를 만드는 접근 방식입니다. HTML 언어, 기반으로 HTML 사용의미(목적)에 따른 태그. 또한 구조적 의미론적 웹 페이지를 통해 검색 로봇은 웹 페이지의 개별 요소와 전체 텍스트의 중요성을 보다 정확하게 결정할 수 있습니다. Google에 따르면 유효한 코드는 어떤 식으로든 페이지 순위에 영향을 미치지 않습니다. 그러나 동시에 코드에 오류가 있으면 마이크로데이터 스캔과 모바일 장치에 대한 적응성에 부정적인 영향을 미칠 수 있습니다.

사이트에 대한 확인 도구

사이트 페이지에 유효성 검사 오류가 없어야 할 필요성을 이해하고 이러한 오류를 검색하는 방법을 살펴보겠습니다.

많이있다 무료 서비스 W3C Markup Validation Service , Web Page Analyzer , Browsershots 및 기타와 같은 사이트 유효성 검사용.

박사 Lavlinsky N. E., Method Lab LLC의 기술 이사

최근에 게시됨 새로운 기준기술을 미리 로드합니다(링크). 이 사양의 주요 목적은 개발자가 페이지 리소스를 로드하는 논리를 세밀하게 제어할 수 있도록 하는 것입니다.

이전 표준

부하 관리에 대한 아이디어는 새로운 것이 아닙니다. 이전에는 여러 태그 옵션이 개발되었습니다. 링크속성이 있는 하위 자원, 미리 렌더링그리고 프리페치. 그러나 그들은 약간 다르게 작동했습니다. 도움을 받으면 사이트를 더 탐색할 때 필요할 수 있는 페이지 요소 또는 전체 페이지를 다운로드할 수 있습니다. 즉, 브라우저는 이러한 요청을 우선 순위가 낮고 마지막으로 보냈습니다. 우선 순위를 높여야 한다면 해결책이 없었습니다.

사전 로드로 리소스 로드

새로운 사양은 무엇입니까? 첫째, 이제 로드되는 항목의 사양과 함께 로드가 발생합니다. 브라우저는 지정된 리소스 유형에 따라 다운로드 우선 순위를 설정합니다. 예를 들어:

둘째, 리소스 유형( ~처럼)를 사용하면 서버가 최상의 압축 옵션으로 콘텐츠를 보낼 수 있도록 브라우저가 올바른 헤더를 보낼 수 있습니다(예: 브라우저에서 지원하는 경우 WebP 이미지 보내기).

두 번째 예에서는 모든 브라우저에서 지원하지 않는 특정 형식(WOFF2)을 지정하는 글꼴 파일을 로드합니다. 그러나 사전 로드 메커니즘에 대한 지원이 이 형식에 대한 지원과 동일하다면 문제가 없습니다. 현재 메커니즘 지원을 볼 수 있습니다.

더 빠른 글꼴 로딩

사전 로드를 사용하여 사이트 속도를 높이는 예는 글꼴과 같이 깊이 묻힌 리소스를 로드하는 것입니다. 일반 다운로드 프로세스에서 브라우저는 먼저 글꼴을 가리키는 CSS 파일을 다운로드하고 파일을 구문 분석한 다음에만 글꼴 파일 다운로드 요청을 대기열에 넣어야 합니다.

HTML 페이지 코드에서 이 글꼴을 미리 로드하면 브라우저는 HTML 문서를 구문 분석한 직후 요청을 보냅니다. 이는 일반적인 경우보다 몇 초 더 빠를 수 있습니다. 그리고 플러그인 가능한 글꼴은 요소를 차단하고 페이지에서 글꼴 렌더링을 지연시키므로 가능한 한 빨리 로드해야 합니다. 이 문제는 브라우저가 한 번에 많은 요청을 서버에 보낼 때 HTTP/2를 사용할 때 특히 심각합니다. 그 결과 일부 사진이 클라이언트의 대역폭을 채울 수 있고 중요한 리소스의 로드가 지연됩니다.

비동기 CSS 로딩

CSS 파일은 항상 페이지 렌더링을 차단하므로 지연될 수 있는 CSS 리소스는 일반 파일로 로드되어 페이지에 동적으로 링크될 수 있습니다.

이것은 다음과 같이 수행됩니다.

실행 없이 JS 코드 로드

나중에 실행하기 위해 JS에서 스크립트 코드를 미리 로드하는 것도 유용할 수 있습니다.

이것은 다음 코드로 수행할 수 있습니다.

우리는 예압 메커니즘을 사용하는 주요 방법을 다루었지만 가능성은 이것에 국한되지 않고 자신의 실험을 수행하십시오!

일반적으로 많은 웹마스터는 사이트가 생성된 직후 호스트에 사이트를 업로드합니다. 동시에 페이지 내부 코드의 정확성보다는 텍스트 내용의 의미의 정확성에 주로 초점을 맞춥니다.

사이트 검증

그러나 사이트의 위치에 영향을 미칠 수 있고 영향을 미치는 다른 요소가 있습니다. 그리고 여기에는 무엇보다도 기술적인 요소가 포함됩니다. 글쎄, 사이트의 유효성 검사는 또한 기술적인 것들에 속합니다. 그래서 그것은 무엇입니까?

만약 간단한 말로, 사이트 유효성 검사는 기술 준수 및 오류에 대해 사이트 코드를 확인하는 것입니다. 예를 들어 닫는 태그인 /html을 사용하는 것을 잊었습니다. 최신 HTML5에서는 시각적으로 아무것도 변경되지 않습니다. 그러나 이것은 코드 오류입니다.

코드를 작성할 때 다른 오류가 발생할 수 있습니다. 그리고 다시, 현대 언어하이퍼 마크 업은 많이 견딜 것입니다. 예를 들어 닫는 태그 /head를 "잊어버리는" 것입니다. 다시, 당신은 차이를 볼 수 없습니다. 하지만 그녀는))

사실, 웹사이트를 작성할 때 꽤 많은 실수가 있을 수 있습니다. 더군다나 이러한 오류 중 일부는 시각적으로도 나타날 수 있습니다. 글쎄, 아마도 블록이 떠 있거나 정렬되거나 다른 것이 될 것입니다. 잠재적인 오류, 수천. 그리고 그들 모두가 눈에 띄는 것은 아닙니다.

위험은 무엇입니까?

글쎄요, 그게 무슨 문제가 있는 것 같습니까? 예, 종종 그러한 오류는 눈에 띄지 않는다고 말해야합니다. 또는 오히려 인간에게 보이지 않습니다. 그러나 우리 사이트의 페이지는 사람뿐만 아니라 사이트를 완전히 스캔하는 검색 스파이더도 방문할 수 있습니다. 그리고 사이트에서 발견한 모든 오류는 Yandex 또는 Google과 같은 검색 엔진의 서버로 전송됩니다.

그리고 검색 엔진은 사이트에 많은 코드 오류가 있는 것을 보고 사이트가 나쁘다고 결론을 내릴 수 있습니다. 그리고 그것은 그들이 검색에서 그것을 올리지 않을 것임을 의미합니다. 글쎄, 이것은 이미 검색에서 방문자에게 작별 인사를 의미합니다.

예, 유효성 검사 오류로 인해 사이트가 비관적으로 표시되는 경우는 매우 드물다는 점을 인정해야 합니다. 그러나 이것은 충분히 가능합니다. 즉, 유효성 검사를 수행해야 합니다. 그리고 이를 위해 무엇을 해야 합니까? 물론 첫 번째 단계는 오류를 찾는 것입니다.

그러나 수동으로 이것은 매우 시간이 많이 걸리고 신뢰할 수 없는 비즈니스이므로 오류를 검색하기 위해 다음을 사용합니다. 특별 서비스, 소위 "검증인".

유효성 검사기 마크업 유효성 검사 서비스.

이 서비스는 거의 모든 사이트를 생성할 때 대부분의 페이지의 기반이 되는 HTML 및 XHTML 코드의 정확성을 확인하고 내부 구조를 결정합니다. 이 유효성 검사기 서비스는 http://validator.w3.org 링크를 따라 액세스할 수 있습니다.

그러나 여기에는 다른 유효성 검사기에도 적용되는 전제 조건이 있습니다. 확인된 사이트 또는 확인된 페이지는 호스팅에 업로드되어야 합니다. 그렇지 않으면 유효성 검사기가 사이트 주소를 "알 수" 없고 아무것도 확인할 수 없습니다. 이제 이 유효성 검사기에서 작업하는 방법을 이미 고려할 수 있습니다.

이 서비스의 페이지에 들어가면 전체 기능 그림이 표시됩니다. 그러나 묘사되고 쓰여진 것의 대부분은 메인 체크에 적용되지 않으며, 모든 주의는 체크되는 페이지의 주소에 대한 입력 창에만 지불되어야 합니다:

바로 시작해야 하는 부분입니다.

실제로, 사이트의 유효성을 확인하는 것은 우리의 전체 필멸의 세계와 마찬가지로 매우 간단합니다. 서비스의 주소 창에서 사이트 주소를 작성해야 합니다. URL을 클릭한 다음 "확인"을 클릭합니다. 이러한 간단한 작업 후 유효성 검사기는 몇 초 동안 "퍼프"하고 다음을 발행합니다.

이것은 페이지 코드에 오류가 없으며 절대적으로 침착할 수 있음을 의미합니다.

그러나 다음과 같은 바람직하지 않은 옵션도 있을 수 있습니다.

이것은 이미 더 나쁘고 확인 중인 페이지의 내부 코드에 약간의 오류가 있음을 의미합니다. 그러나 이것은 전혀 치명적이지 않습니다. 아래 페이지를 스크롤하기만 하면 확인 프로세스 중에 발견된 모든 오류가 거기에 자세히 기록됩니다.

또한 유효성 검사기는 발견된 오류를 나열할 뿐만 아니라 이러한 오류가 있는 내부 코드의 행을 정확하게 표시합니다. 따라서 오랫동안 찾을 필요가 없습니다. 과장하지 않고 이 검증자가 완벽하게 작동한다고 단호하게 말할 수 있습니다.

그러나 그것이 전부는 아닙니다. 유효성 검사기는 감지된 코드 오류의 위치를 ​​나타낼 뿐만 아니라 이러한 오류를 제거하는 방법에 대한 완전한 권장 사항도 제공합니다. 물론, 이것을 위해 당신은 게으르게 쓰여진 모든 것을 주의 깊게 읽을 필요가 없습니다.

짧고 일반화된 결론으로 ​​다음과 같이 말할 수 있습니다.

1. 이 유효성 검사기 서비스는 훌륭하게 작동하며 사이트를 매우 빠르게 확인할 수 있습니다.
2. 글쎄, 작지만 아주 좋은 추가 사항: 사이트 유효성 검사는 무료입니다.
3. 이제 다음 단계로 넘어갈 수 있습니다. CSS 코드를 확인하는 것입니다.

CSS 유효성 검사 서비스

일반적으로 위 서비스의 두 번째 기능이지만 HTML 및 XHTML 코드를 확인하기 위한 것이 아니라 특히 코드의 정확성을 확인하기 위해 "날카롭게" 합니다. CSS 스타일외부 테이블에 있습니다. 그리고 서비스 페이지로 이동하려면 http://jigsaw.w3.org/css-validator 링크를 따라가야 합니다.

그건 그렇고, 여기에 즐거운 점을 주목할 가치가 있습니다.이 서비스를 확인하는 것은 절대적으로 무료입니다. 따라서 지갑에서 돈을 꺼내지 마십시오. 적절한 순간까지 그대로 두십시오. 그러나 이 두 번째 서비스를 작업하는 방법론으로 넘어가 보겠습니다.

일반적으로 CSS 유효성 검사기의 모든 작업은 코드 청결도를 확인하는 것과 완전히 동일합니다. 따라서 유효성 검사기의 주소 표시줄에 대한 별도의 이미지를 제공할 필요가 없습니다. 조금 더 낮추면 수표 자체의 순서를 간단히 고려할 것입니다.

이를 위해 당신은 할 필요가 주소 표시 줄 URL 쓰기 CSS 테이블, "http://my site/style.css"와 같은 다음 러시아어 비문 "확인"이 있는 버튼을 누릅니다. 따라서 이 유효성 검사기는 몇 초 동안 "퍼프"하고 원하는 결과를 제공합니다.

이것은 CSS 테이블이 올바르게 작성되었으며 오류가 발견되지 않았음을 의미합니다.

그리고 여기에 즐거운 놀라움도 있습니다. 페이지를 조금 더 아래로 스크롤하면 CSS 테이블에 최적화된 코드가 거기에 작성되어 불필요한 비문이 모두 제거되고 모든 코드 태그가 순서대로 정렬됩니다. 모든 검색 엔진의 최적 작동 요구 사항을 충족합니다. 남은 것은 이 완벽한 코드 샘플을 복사하여 CSS 테이블에 붙여넣는 것뿐입니다.

다음과 같은 일이 발생할 수 있습니다.

즉, CSS 코드에서 일부 오류가 발견되었지만 이를 전혀 두려워해서는 안 됩니다. 그 빨간 선 바로 아래에 유효성 검사기가 철자가 틀린 태그를 정확히 알려줄 것입니다. 스타일 시트에서 이러한 태그를 찾고 필요한 수정만 하면 됩니다.

물론 그 이후에 수정된 스타일 시트를 호스트에 업로드 하고 초록색 선이 있으면 최적화된 CSS 테이블 스타일 코드를 행복하게 복사할 수 있습니다. 그렇다면 변경하는 것이 가장 좋습니다. 오래된 코드새롭고 최적화된 것으로.

간단한 요약.

가장 기본적이고 필수적인 두 가지 웹사이트 유효성 검사는 위에서 논의되었습니다. 이러한 검사가 없으면 robots.txt에서 검색 엔진에 대한 인덱싱을 열지 않아야 합니다. 그렇지 않으면 사이트가 인덱싱을 위해 무시될 수 있습니다. 검색 엔진적절한 제재를 가하면 결함이 있는 것으로 간주됩니다.

이러한 일이 발생하지 않도록 하려면 사이트와 모든 페이지의 기술적 상태에 대해 절대적으로 침착하고 완전히 확신하는 데 몇 분만 투자하면 됩니다. 물론 링크 및 앵커, 사이트 가시성 추가 확인도 필요합니다. 모바일 기기및 다른 코드의 매개변수. 그래야만 사이트가 완전한 기능과 성공 및 빠른 승진탑에서.

다른 모든 검사는 위에서 논의한 것만큼 빠르고 간단하다는 것을 미리 말씀드리고 싶습니다. 유효성 검사기와 작업하는 절차를 주의 깊게 읽어야 합니다.

2018년 4월 19일에 추가됨

HTML 코드 유효성 검사 시 일반적인 유효성 오류

기사를 업데이트하기로 결정했습니다. HTML 오류사이트에서 자주 발견되는 코드. 어쨌든, 나는 그것들을 많이 가지고 있었다)). 유효성 검사기는 오류를 노란색으로 강조 표시합니다.

1) 오류: 문자 참조가 세미콜론으로 끝나지 않았습니다.

오류: 문자가 세미콜론으로 중단되지 않았으므로 추가해야 합니다.

2) 경고: 섹션에 제목이 없습니다. 모든 섹션에 식별 제목을 추가하려면 h2-h6 요소를 사용하는 것이 좋습니다.

경고: 이 섹션에는 제목이 없습니다. 모든 섹션에 식별 제목을 추가하려면 h2-h6 요소를 사용하는 것이 좋습니다. 모든 것이 명확합니다. 최소한 하나의 자막을 추가해야 합니다. 이것은 실수가 아니라 권장 사항입니다.

3) 오류: 요소 noindex는 이 컨텍스트에서 요소 p의 자식으로 허용되지 않습니다.

오류: noindex 요소는 다음으로 허용되지 않습니다. 자식 요소이 컨텍스트에서 p 요소입니다. (이 하위 트리에서 추가 오류를 억제합니다.)
해결책은 간단합니다. noindex 태그를 주석 처리해야 합니다. 보기는 다음과 같습니다.

4) 오류: 중앙 요소가 더 이상 사용되지 않습니다.

오류: "center" 태그가 구식입니다. img에 대해 이야기하는 경우 교체해야 합니다. 그러면 align 속성을 사용할 수 있습니다. 다른 것이 중앙에 있으면 div로 바꿉니다.

5) img 요소는 특정 조건을 제외하고 alt 속성을 가져야 합니다.

오류: img 요소에는 alt 속성이 있어야 합니다. 여기서 모든 것이 명확합니다. alt 속성을 추가해야 합니다. 비어 있는 경우에도 오류가 사라집니다.

6) td 요소의 너비 속성이 더 이상 사용되지 않습니다. 대신 CSS를 사용하십시오.

오류: 'td' 요소의 'width' 속성은 더 이상 사용되지 않습니다.

7) 자바스크립트 리소스에는 type 속성이 필요하지 않습니다.

오류: 자바스크립트 리소스에는 type 속성이 필요하지 않습니다. 해결책은 단순히 불필요한 모든 것을 제거하고 "스크립트" 태그만 남겨두는 것입니다.

8) img 요소의 align 속성이 더 이상 사용되지 않습니다.

오류: img 요소의 align 속성은 더 이상 사용되지 않습니다. 이미지 정렬 div를 만듭니다.