가속 모바일 페이지 (AMP)의 유효성을 검사하는 방법

마지막 AMP 튜토리얼에서는 AMP (Accelerated Mobile Page)를 채택하여 모바일 환경에서 귀하의 웹 사이트에 대한 Google의 모바일 검색 결과에서보다 빠른 노출을 얻을 수있는 방법을 보여 줬습니다.

보았다. AMP의 잠재력, 나는 당신이 시작했거나 웹 사이트를 변경하기 시작할 계획이 있다고 가정합니다. AMP. 문서의 가이드 라인을주의 깊게 따라 CSS를 작성하여 시각적 욕구에 맞게 AMP 페이지 스타일을 지정하십시오..

이제 마지막으로해야 할 일이 있습니다. 해당 페이지의 유효성 검사.

AMP 검사기

AMP 페이지의 유효성을 검사하는 방법에는 여러 가지가 있습니다.

에 추가 # 개발 = 1 AMP 페이지 URL 끝에 오십시오. 보고서는 콘솔 DevTools 아래의 탭.
또는 온라인 AMP 검사기를 사용할 수 있습니다..
Chrome AMP 확장 프로그램을 사용할 수도 있습니다..

이러한 도구는 페이지 내의 오류나 경고를 나열하는 보고서를 생성합니다. 이것을 바탕으로, 당신은 무엇을 고칠지를 선택할 수 있습니다..

AMP 검증은 주로 관리합니다. HTML 요소 사용, 그만큼 에스, 그리고 스타일 선언. 페이지의 이러한 내용이 모두 AMP 규격이며 AMP 지침을 위반하는 사항이 없는지 확인하십시오. 그렇지 않으면 AMP 페이지가 어디에도 나타나지 않습니다..

데이터 구조

또한 AMP에는 스키마 데이터 구조가 필요합니다. 이 데이터는 머리 태그를 JSON 형식으로 표시합니다. 여기에는 제목, 출판사 로고 및 이름, 출판 및 수정 된 날짜 등 페이지의 문맥 정보가 들어 있습니다..

페이지의 목적에 따라 포함 할 데이터가 다를 수 있습니다. 기사, 리뷰, 요리법, 동영상 등 데이터 유형에 대한 자세한 내용은 Google 데이터 유형 설명서를 참조하십시오..

제공되지 않으면 오류가 발생하는 일부 데이터가 필요합니다. 몇 가지 다른 유형의 데이터는 선택 사항이며 경고 만 생성합니다. 그러나 이러한 유형의 오류는 앞서 언급 한 AMP 검사기에 나타나지 않습니다..

대신 Google 구조화 데이터 테스트 도구 및 Google 웹 마스터 계정에 표시됩니다..

AMP 소비자 또는 AMP를 지원하는 클라이언트 (예 : Google 검색 및 Twitter 순간)는이 데이터 세트를 사용하여 결과 페이지에 AMP 콘텐츠를 표시 할 수 있습니다.

따라서 독점적 인 사용자 정의 HTML 요소로 AMP 지침을 따르는 것 외에 필요한 스키마 데이터도 함께 있어야합니다..

간과 된 오류

대부분의 오류는 명시 적으로 문서에 기록되며 쉽게 볼 수 있습니다. 그러나 몇 가지 오류는 우리가 알아 차리지 못할 수도있는 변수로 맥락화됩니다. “속성 값이 잘못되었습니다.”, 말하는 "태그 '% 2'의 '% 1'속성이 유효하지 않은 값 '% 3'으로 설정되었습니다.".

이 오류 보고서는 언급하지 않거나 정확하게 나열하지 않습니다. 어느 값 유효하지 않다 . 하지만 내가 아는 것은 우리가 폭 그리고 신장 의 요소 100 % 또는 자동. 이러한 속성 값은 이미지 비율을 유지하기 위해 이미지의 정확한 크기 여야합니다..

이것은 단지 하나의 예입니다. 여러 가지 맞춤 요소가 있습니다. - amp-img, amp-iframe, 과 앰프 광고 - 속성과 값의 사용에 대한 유효성 검사 규칙을 자체적으로 설정합니다..

이는 AMP 페이지의 검증 작업을 어렵게 만들 수 있습니다. 특히 수년 전에 발표 된 수백 또는 (아마도) 수천 가지 기존 콘텐츠를 고려한 경우.

최종 생각

AMP는 아직 초기 단계에 있습니다. Google 및 웹 개발 커뮤니티의 공동 노력으로 활발한 발전을 이루었습니다. 그러나 AMP는 확실히 발전 할 것입니다.. HTML5와 마찬가지로 미래에 더 이상 사용되지 않는 요소, 속성 및 일부 사례가있을 수 있습니다. 그래서 AMP 페이지가 수시로 지속적으로 확인되는지 확인하십시오. 가이드 라인의 최신 변경 사항을 기반으로.