시맨틱 HTML : SEO와 접근성에 좋은 의미를 쓰십시오.

아름다운 웹 사이트 ...하지만 왜 Google이 좋아하지 않습니까? 간과 할 수있는 코드에 숨겨진 문제

궁금한 적이 있습니까? 왜 우리 웹 사이트가 아름답습니까? 사진이 분명합니다. 내용이 포장되어 있습니다. 그러나 Google에서 순위를 확인할 때 거의 거의 찾을 수 없었습니까? 또는 고객은 웹 사이트가 아름답다는 것을보고 있습니다. 그러나 웹을 계속 돌봐야 할 팀은 "코드를 해결하기 어렵다"고 불평했으며 가장 중요한 것은 일부 사용자는 특히 시각 장애가 거의 우리 웹 사이트를 사용할 수 없습니다.

이 문제는 산 머리와 같습니다. 우리는 가장 중요한 기초를 잊어 버릴 때까지 "무엇을 찾고 있는지"에만 집중합니다. 웹 사이트의 "구조와 의미"는 열악한 디자인으로 인해 발생하지 않습니다. 그러나 우리가 매일 사용하는 HTML 코드에 숨겨져 있습니다. 그리고 많은 사람들이 여전히 그것을 모르고 실수를합니다

-삽화를위한 홍보-

복잡한 HTML 코드로 가득 찬 컴퓨터 화면 앞에 앉아있는 웹 사이트 개발자의 사진. 한쪽은 SEO 그래프로, 다른쪽으로 내려가는 SEO 그래프, 혼란스러운 사용자 아이콘입니다. 보이지 않지만 큰 영향을 미치는 문제를 전달합니다.

문제의 출처 : 이름이없는 "상자"가있는 웹 사이트를 만들 때

웹 사이트를 만드는 것이 집을 짓는 것과 같다고 상상해보십시오. 우리가 같은 것처럼 보이는 "상자"또는 "상자"를 사용하여 집을 짓는 경우, 그것은 모두 침실, 주방, 욕실과 함께 있으며 페인트를 사용하거나 표지판 만 넣습니다. 어떤 상자입니까? 외부에서 보는 사람들은 집이 아름답다는 것을 알 수 있습니다. 그러나 눈을 감고이 집에서 걸어 가려고한다면 문이 어디에 있는지 어떻게 알 수 있습니까? 창문은 어디에 있습니까?

태그가있는 웹을 작성합니다

유니버설은 다르지 않습니다. 우리는 사용합니다.,,,,브라우저는 "여기, 이와 같은 결과를 보여주십시오"라고 말하지만 GoogleBot 또는 스크린 리더의 경우 전혀 의미가없는 "Box" "Box"및 "Box"일뿐입니다. 어느 부분이 가장 중요한지 모릅니다. 웹 접근성을 모두 만드는 소스입니다 우리는 그것을 몰랐다.

-삽화를위한 홍보-

양면의 비교 : 왼쪽은 회색 상자에서 제작 된 집의 구조입니다. "침실", "주방"이라는 표시 만 있습니다. 오른쪽은 카운터가있는 주방과 같이 명확한 각 객실의 구조입니다. 침실에는 침대가 있습니다. 비성부와 시맨틱 HTML의 차이점을 전달하십시오

"무의미한 코드"가 예상보다 비즈니스에 더 강한 영향을 미치게하십시오.

"Div Soup"(다이브 수프)라고도하는 비 미성년 HTML의 사용은 홍보를 보지 않는 기술적 문제가 아닙니다. 그러나 그것은 주요 3 차원의 비즈니스에 직접적인 영향을 미칩니다.

1. Begle은 할인됩니다 (SEO 실패) : Google이 웹 구조를 이해하지 못하는 경우. 콘텐츠의 어떤 부분이 가장 중요한지 평가할 수 없습니다. 아니면이 페이지가 좋 습니까? 결과적으로 Google은 귀하의 콘텐츠가 잘못된 우선 순위를 정할 수 있습니다. 양질

2. 많은 고객 그룹에서 문을 닫습니다. (접근성 문제) : 시각 장애가있는 사용자는 웹 사이트에서 "듣기"위해 화면 리더 프로그램에 의존해야합니다. 귀하의 웹 사이트 만있는 경우

이 프로그램은 계속 모든 것을 읽을 것입니다. 사용자가 혼란스러워하고 마지막으로 웹 사이트를 떠나는 계층 구조가 없음이 고객 그룹을 거부하고 있다는 것입니다. 일부 국가에서 장애인을 지원하지 않는 것에 대해 고소 당할 위험이있을 수 있습니다.

3. 팀에 부담을 추가하십시오 (유지 보수 악몽) : 코드가 가득 찼습니다.

수십 개의 수업에 쌓아서 미래에 읽고, 이해하고, 해결하기가 어렵고, 새로운 기능을 개선하거나 추가하여 불필요하게 장기 유지 보수 비용을 증가시킬 수 있습니다.

-삽화를위한 홍보-

인포 그래픽 이미지는 3- 부드러운 영향을 보여줍니다 : Google 확대 안경 아이콘, 슬픈 얼굴, 아이콘, 트롤리, 웹 사이트 문에서 분리 된 트롤리, 지저분한 장비 아이콘. SEO, 접근성 및 유지 보수에 미치는 영향을 전달합니다.

강력한 해결책 : "Semantic HTML"을 알아보십시오.

이 문제의 해결책은 쉽고 간단합니다. 즉, 사용 ** 시맨틱 HTML ** 또는 "HTML 의미", 이는 사용 대신 다루는 내용의 "의미를 충족시키는"HTML 태그를 선택하는 것입니다.

모든 것을 사용하면 대신 특정 이름의 태그를 사용하도록 변경되었습니다.

간단히 말하면 "상자"가있는 집을 짓는 대신 만 넣습니다. 우리는 또한 집을 짓습니다. "브릭"창 ""문 "자신의 이름과 의미를 가진 문.

즉시 알고 사용하기 시작하는 시맨틱 태그의 예 :

• : 로고, 메인 메뉴와 같은 웹 또는 섹션 헤드의 경우
• : 웹 사이트의 기본 탐색 링크 (내비게이션)
• : 해당 페이지의 유일한 "기본"컨텐츠 (반복되지 않음)
• : 블로그 기사, 1 제품과 같이 자체적으로 끝나고 다른 곳에서 게시 할 수있는 콘텐츠의 경우
• : "우리의 서비스"섹션과 같은 주제가있는 컨텐츠를 구성하기 위해, "우리"
• : 사이드 바, 광고와 같은 측면의 비가 아닌 부분의 경우
• : 웹 또는 섹션의 끝, 예 : 연락처 정보, 저작권

• 그리고: 그림과 그림 강의

시작은 매우 쉽습니다. "웹 사이트는 어떻게 생겼습니까?"라는 생각에서 견해를 바꾸십시오. "** 우리의 컨텐츠 구조는 무엇입니까? **"그리고 사용할 올바른 태그를 선택하십시오. MDN Web Docs 와 같은 신뢰할 수있는 정보 소스의 자세한 내용은 각 태그에 대해 자세히 연구 할 수 있습니다 .

-삽화를위한 홍보-

시맨틱 태그의 이미지 (예 :<header> ,,<nav> ,,<main> ,,<article> ,,<footer> ) 깨끗하고 질서 정연한 웹 사이트로 조립

Real의 예 : 전과 후 코드를 사용하여 명확한 이미지

시맨틱 HTML이 "지저분한"코드를 "깨끗한 눈"으로 변경했으며 "간단한 블록 페이지 구조의 예를 보는 방법"을 명확하게 알기 위해.

비 규모 : 사용

본질적으로




내 멋진 블로그

내 첫 번째 게시물

이것은 나의 첫 번째 게시물입니다 ...

저작권 2025

새로운 (시맨틱 HTML) : 깨끗하고 의미







내 멋진 블로그

내 첫 번째 게시물

이것은 나의 첫 번째 게시물입니다 ...

저작권 2025

차이가 보이나요? 코드를 보는 새 버전에서는 부분이 무엇을하고 있는지 즉시 이해할 수 있습니다. 클래스 이름을 쫓지 않고. Googlebot과 Screen Reader는 우리처럼 "보고"와 "이해"합니다. 우리 웹 사이트의 명확한 청사진입니다. 더 많은 정보 및 샘플의 자세한 내용은 W3Schools 도 설명합니다.

-삽화를위한 홍보-

링크 라인이있는 첫 번째 측면과 함께 나란히 코드를 비교하고 코드 측면에 Google의 눈살을 찌푸린 아이콘이 있습니다. 코드는 깨끗해 보이고 Google 아이콘이 있습니다.

무엇을하고 싶습니까? 웹 사이트의 간단한 점검표.

Semantic HTML로 웹 사이트를 업그레이드 할 준비가 되었습니까? 당신은 기다릴 필요가 없습니다! 이 점검표를 사용하여 웹 사이트를 즉시 확인하고 개선하십시오.

1. 전류 구조 감사 : 찾고 있습니다
   클래스 또는 ID가있는 다음과 같은 의무를 분명히 말했습니다.
   올바른 태그로 대체되었습니다
2. 사용
   하나만 : 각 페이지에 태그가 있는지 확인하십시오
   주요 콘텐츠를 실제로 다루었습니다.
3. 요람
   ~와 함께
   : "이 콘텐츠는 혼자 수행 할 수 있습니다. 다른 장소를 할 수 있습니까?"
   (게시, 제품과 같은) 사용할 컨텐츠 그룹이 아니라면
   (예 : "우리 팀")
4. 입다
   그리고수정 : 잊지 마세요
   그리고
   가질 수 있습니다
   (기사의 머리) 및(기사의 끝)은 자신의 것입니다. 웹 페이지의 헤드와 끝에만 국한되지 않습니다.
5. 탐색 구성 : 모든 기본 메뉴 링크를 태그에 넣습니다.깔끔하게
6. 떠나지 마세요
   전혀 진행 : "CSS 전용 CSS 구성"을위한 다양한 요소 그룹을 구성하고 시맨틱 태그 없이도 여전히 사용할 수 있습니다.
   동일 할 수 있습니다. 올바르게 사용하면 유용한 도구입니다.

-삽화를위한 홍보-

각 아이콘이있는 시맨틱 HTML 검사 프로그램이있는 체크리스트 이미지. 그리고 체크리스트 채널에서 올바른 자국을 똑딱 거리고 실제 조치를 보여주는 사람이 있습니다.

사람들이 의심하는 경향이있는 질문 (FAQ)은 시맨틱 HTML의 모든 문제를 해결합니다.

나는 많은 사람들이 Semantic HTML로 변경하여 명확하게 대답하는 것에 대해 궁금해하는 인기있는 질문을 수집합니다.

질문 : 사용하도록 전환하는 경우

또는

대신에웹 디자인이 깨질까요? 답 : 확실히 깨지지 않았습니다! 대부분의 시맨틱 태그 (예 :

,,

,,

,,) 초기 속성은 같은 블록 레벨 요소입니다.모든면에서 얼굴, 색상 및 거리의 의무는 여전히 CS의 100%입니다. 태그 변경은 설계에 전혀 영향을 미치지 않습니다.

질문 : 기존 웹 사이트와 함께

당신은 모두 해결하기 위해 돌아갈 가치가 있습니까? 답 : 아주 좋은 가치! 시맨틱 HTML의 조정은 웹 사이트의 미래에 대한 직접적인 투자입니다. 그것은 중요한 기술 SEO의 일부이며 장기적인 좋은 것입니다. 웹 사이트 리노베이션 의 핵심입니다. 귀하의 웹 사이트는이 시대에 강력하고 경쟁 할 준비가되어 있습니다.

Q : 콘텐츠에 따라 페이지의 URL을 지정하는 방법을 어떻게 알 수 있습니까?
답 : 훌륭한 질문! 좋은 HTML 구조를 갖는 것은 간단한 원칙을 가진 좋은 웹 사이트 구조와 함께 제공되어야합니다. URL은 짧고 확고하며 해당 페이지의 내용을 즉시 읽고 이해해야합니다. SEO에 친숙한 URL을 만들기위한 모범 사례 에 대한 자세한 내용을 읽을 수 있습니다 .

묻다:

,,

,,

결론적으로, 그것은 어떻게 다릅니 까? 답 : 이렇게 기억하기 쉬운 -

: 해당 콘텐츠가 어디에 있든 "그 자체로 완료"할 때, 나는 여전히 읽습니다 (예 : 기사, 영화 리뷰) -

: 페이지에서 동일한 테마로 콘텐츠를 "구성"하려면 (예 : 서비스 그룹, 권장 제품) -: 태그가 없을 때, 의미가없고 요소를 커버하여 "CSS로 스타일을 정리"하기 위해

-삽화를위한 홍보-

큰 질문 아이콘 이미지와 누군가가 솔루션을 전달하는 더 밝은 램프 아이콘으로 그 질문을 가리키고있었습니다.

요약 : 이제 앞뒤로 "지능형"웹 사이트를 만들 시간입니다.

시맨틱 HTML로 코드를 작성하는 것은 프로모션을 보여 주려는 개발자의 트렌드 일뿐 만 아니라 현대에 성공적인 웹 사이트를 만드는 "기초"입니다. 더 나은 SEO 순위를 얻기 위해 Google과의 명확한 커뮤니케이션은 모든 사용자를 똑같이 환영 할 수있는 문을 열는 것입니다. (접근성) 팀이 계속 일할 수있는 강력한 구조를 만들어내는 것입니다.

집 뒤에 숨겨져있는 사소한 문제인 것 같습니다. 그러나 그 결과는 비즈니스의 "집의 전면"과 "이익"에 직접적인 영향을 미칩니다.

귀하의 웹 사이트가 "아름답게 보이지만 중공 구조"가 더 이상 코드를 확인할 때입니다. 그리고 오늘날 약간의 투자로 그것을 개선하기 시작하는 것은 오늘날 효과적입니다. 미래에 비즈니스에 지속 가능한 이점을 창출하는 것입니다!

SEO 원칙에 따라 강력한 구조를 확인하고 미래에 대비할 수 있도록 웹 사이트를 검사하고 ** 돌리는 데 도움이되는 전문가가 필요한 경우 Vision X Brain Team은 조언을 기꺼이 제공합니다!

-삽화를위한 홍보-

컴퓨터 화면의 아름다운 웹 사이트 이미지와 반사는 아래의 깔끔한 시맨틱 HTML 코드 구조의 그림입니다. 우수한 내부 구조와 함께 제공되는 아름다움을 전달합니다

‍