CSS에서 display : none을 사용하는 것이 얼마나 나쁜가요?

72

display: noneSEO 관련 이유로 사용 하기 가 좋지 않다는 이야기를 여러 번 들었습니다 . 인기없는 키워드를 사용하려는 시도 일 수 있습니다. 몇 가지 질문 :

여전히 지혜가 있습니까?
한 단어 또는 한 문자 만 숨기고 있다면 차이가 있습니까?
사용을 피해야하는 경우 숨길 때 선호되는 기술은 무엇입니까 (특정 조건에서 다시 표시해야하는 경우)?

내가 지금까지 찾은 참고 문헌 :

코멘트에서 2005 년 매트 컷츠

CSS를 사용하여 텍스트를 숨기고 있다면 스팸이라고해도 놀라지 마십시오. 마우스 오버 나 DHTML 텍스트 또는 로고가 있지만 텍스트가 스팸이라는 말은 아닙니다. 컨퍼런스에서 "방문객, 경쟁 업체 또는 스팸 보고서를 확인하는 사람에게 어떻게 보일지 상상해보십시오. 회사 이름과 엑스포 마커 로고 대신 엑스포 마커"를 표시하면 표시하기로 결정한 텍스트가 'Expo Markers 저렴한 온라인 할인 구매 온라인 Expo Markers 판매 ...'인 경우 더 조심 스러울 것입니다. 그게 나빠 보일 수 있기 때문입니다. "

그리고 같은 기사에 대한 또 다른 의견 에서

Google에서 CSS를 사용하여 숨겨진 것처럼 보이는 텍스트에 플래그를 지정할 수 있습니다. 지금까지는 사이트를 알고리즘 적으로 제거하지 않았습니다. 우리는 목욕물로 아기를 버리지 않도록 노력합니다.

Eric Enge 는 2008 년에 말했다

이 기술의 합법적 인 사용은 너무나 널리 퍼져있어 검색 엔진이 해당 display: none속성 을 사용하기 위해 사이트에 불이익을 줄 것으로 거의 기대하지 않습니다 . 특정 용도 display: none가 검색 엔진을 속이려고 하는지 여부를 진정으로 알아낼 수있는 알고리즘을 구현하는 것은 매우 어렵습니다 .

seo css alt-attribute

— 앤디
소스

나중에 자바 스크립트로 숨기는 로딩 흰색 화면 (텍스트가없는)을 사용하면 어떻게 되나요? Google은 흰색 화면 아래에 페이지를 숨기고 있다고 생각합니까? 감사합니다

— bloomingsmilez

더 큰 화면에서 합리적으로 보이는 사본의 양이 휴대 전화에서 너무 많기 때문에 display : none을 사용하여 모바일 화면의 페이지 내용을 줄입니다. 내가 문제를 일으키고 있습니까?

57

요즘 jQuery (및 기타 JavaScript 프레임 워크)의 무거운 웹 사이트에서는 jQuery 슬라이더, 전환, 갤러리, 시세 등을 사용할 때 광범위하게 사용되므로 문제가 될 수있는 방법을 알 수 없습니다. 검색 엔진은 맹목적으로 사용에 불이익을주지 않을 정도로 영리합니다.

사용자는 Google 웹 마스터 센터 포럼 에서 다음과 같이 말합니다 .

"디스플레이 만 사용 : 자동으로 패널티를 실행하지 않습니다. 핵심은 자동 또는 사용자가 호출 한 메커니즘을 통해 컨텐츠를 볼 수 있도록하는 것입니다. Google은 JavaScript를 처리하는 데 매우 능숙 해지고 있습니다. 유효한 HTML, CSS 및 JavaScript를 사용하는 경우 걱정할 필요가 없습니다. 행운을 빕니다! "

— 댄 디플로
소스

재미 있네요 이는 display: none코드에서 제거 될 수있는 CSS의 항목을 게으르고 사용 하여 제거 하지 않아야 함을 의미 합니다. 그러나 효과 등을 위해 나는 괜찮습니다. 그렇다면 그림 로고가있는 상황을 어떻게 감지 할 수 있을지 궁금하고 로고 텍스트도 접근성을 위해 포함되어 있지만 숨겨져 있습니다. 설명에서 이것은 나쁜 것으로 계산됩니까?

— Andy

@ 앤디 : 그럴 수도 있습니다. 그러나 로고 텍스트를 숨기기 위해 CSS를 사용해서는 안됩니다. 태그 의 alt속성에 넣습니다 img. 그것이 그 속성에 대한 것입니다. 내가 아는 한, 그것을 사용하면 SEO 등급이 높아지는 경향이 있습니다.

— David Z

실제로 longdesc이미지 태그 의 속성 을 사용 하여 전체 설명이 포함 된 다른 페이지에 대한 링크를 제공하는 경우처럼 들립니다 . 이것은 화면 판독기 (및 아마도 검색 엔진)에서만 볼 수 있습니다. webaim.org/techniques/images/longdesc#longdesc

— Dan Diplo

나는 실제로 그래픽에 대한 설명을 제시하는 가장 좋은 방법을 찾고 있지 않다. 나는 Matt Cutts의 인용문을 언급하고 있었다. 스팸 입니다. 그가 alt또는 longdesc속성을 사용하는 것에 대해 말하는 것처럼 들리지 않으며 , 키가 메커니즘이 있는지 여부는 콘텐츠를 볼 수 있는지 여부와 약간 대조적 입니다.

— Andy

7

학대하지 않으면 문제가되지 않습니다. 현재 Google은 CSS 스타일 시트를 크롤링하여display: none

Google은 널리 사용되는 스타일 규칙에 대해 전쟁을 선포하지 않고 단지 1000 개 키워드를 사이트에 설정 display: none하거나 더 나쁜 사이트에 추가 할 수 있다고 생각하는 사람들에게 경고합니다 .margin-left: 9999px

— 셰인 스틸 웰
소스

6

사용하기에 적합한 도구 인 경우에만 "display : none"을 사용하십시오.

따옴표에서 알 수 있듯이 검색 엔진에는 표시 없음으로 스팸 문제가 있습니다. 어떤 도구를 사용하든 스팸 검색 엔진을 시도하는 것은 나쁜 생각입니다. 스팸 이외의 용도로 CSS를 사용하면 아무런 문제가 없습니다.

올바른 작업에 적합한 도구입니다.

— luiscubal
소스

3

감사. 그러면 문제는 언제 display: none올바른 도구가됩니까? CSS를 스팸 이외의 용도 display: none로 사용하는 경우 문제가되지 않습니다. 요소를 제거하는 게으른 방법으로 사용하면 문제가되지 않을 것이라고 확신 하십니까?

— Andy

@Andy 표시 : 일부 내용을 표시하지 않으려는 경우 올바른 도구가 없습니다. 요소를 제거하려면 전혀 포함하지 않는 것이 가장 좋습니다 (또는 JavaScript를 사용하는 경우 DOM에서 요소를 제거하는 경우). display : none을 사용하여 페이지에서 컨텐츠를 제거하면 사용자가 컨텐츠를 볼 수 없지만 검색 엔진이 여전히 색인을 생성하면 스팸이됩니다. "Show / Hide"버튼 또는 이와 비슷한 버튼이 있다면 괜찮습니다.

— luiscubal

4

나는 Dan Diplo에 동의하고 그가 말한 것에 추가하기 위해, 구글 자체display: none 도 HOME PAGE 에서 사용하므로 스팸으로 사용하지 않는 한 실제로 사용하는 데 문제가 될 수 없습니다 (예 : 수백 디스플레이의 키워드 : 없음 DIV 패널).

열기 구글 홈 페이지 와 HTML 소스 코드를 찾습니다. display:none당신이 그것을 여러 번 볼 수 있도록 검색 하십시오. :)

— 마르코 데마 이오
소스

고마워 마르코 여전히 보이지 않는display: none 요소에 사용할 수 있는지에 대한 의문이 남아 있습니다.

— Andy

@Andy : 절대로 보이지 않는 요소는 스팸으로 간주됩니다. 왜 보이지 않는 요소를 사용 해야하는지 모르겠습니다. 왜 HTML 페이지에 배치해야합니까? 그래서 나는 그것들을 사용하는 것이 좋지 않다고 기대합니다. Google은 현재 또는 향후에이를 감지하여 사이트에 불이익을 줄 수 있습니다.

— Marco Demaio

제가 생각할 수있는 유일한 예는 CMS를 사용하는 경우이며 시간이 지남에 따라 마크 업을 완전히 사용자 지정하지 않고 CSS를 사용하여 하나 또는 두 개의 작은 마크 업 비트를 숨길 수 있습니다. (저는 Q에게 현재 상황을 더 잘 이해하도록 요청하고 있습니다. 선택한 CMS는 Drupal이며 마크 업을 빠르고 쉽게 변경할 수 있습니다.)

— Andy

@Andy-검색 엔진이 수천 줄의 자바 스크립트를 읽고 논리적으로 요소가 표시되지 않는 경우를 식별하는 것이 논리적으로 가능합니까? $('.'+somevar).show();가능한 모든 가치 somevar를 가지고 DOM의 가능한 모든 상태와 비교할 수 있다고 말하고 한 줄로 모든 사이트의 코드를 연구하려면 엄청난 리버스 엔지니어링 이 필요합니다. 데이터, 입력, API / AJAX 호출 결과, 사용자 동작 등으로 인해 div 가 표시되지 않는 경우가 많지만 논리적으로 는 가능합니다 .

— user568458

@ user568458 나는 이것이 질문의 마지막 단락에서 Eric Enge와 Dan Diplo가 대답으로 만든 요점이라고 생각합니다.

— Andy

3

나는 당신이 다른 대안을 생각해 내려고 노력해야한다고 생각하지만 여기에 참조 기사가 있습니다.

이 주제에 대한 웹 마스터 라디오 채팅에 Maile and Vanessa 링크가 포함되어 있습니다 http://luigimontanez.com/2010/stop-using-text-indent-css-trick/

Maile은 Google 엔지니어 http://maileohye.com/html-text-indent-not-messing-up-your-rankings/

구글이 해결책을 제시 할 것이지만, 장기간 전망을 취하면 부정적인 오프셋과 디스플레이는 안전하지 않습니다.

— AndyBeard
소스

0

Google은 CSS display:none콘텐츠를 크롤링 합니다.

Google에서 무언가를 숨기는 것은 의도적으로 검색 순위를 조작하려는 경우에만 나쁩니다.

인터랙티브 한 웹 사이트가 어떻게 발전했는지를 고려할 때 방문자의 숨겨진 옵션과 텍스트는 일반적인 관행이므로 걱정할 필요가 없습니다. 과거에는 사람들이 이러한 종류의 방법을 사용하여 SEO를 게임하고 키워드 및 링크를 숨겼습니다. 결과적으로 Google은 뷰어에서 숨겨진 항목이있는 사이트를 크롤링 할 때 해당 사이트를 신뢰할 수없는 것으로 간주합니다.

— 요십이 비치
소스

0

방금 Google에서 seo과 회의를 가졌는데 사실이 아닙니다. 디스플레이 없음은 확실합니다. 그 전에 얼마 전에 가시성을 다루거나 부정적인 텍스트 크기 나 부정적인 들여 쓰기를 사용했습니다.

텍스트가 눈에 보이는 방식으로 보이지 않아야한다는 사실입니다. 최소한 보일러 플레이트가 없거나 중복되거나 게으른 내용.

구글이 자신의 사이트에서 원하는 모든 것을 할 수있는 방법은 감자 인 경우에도 우선 순위를 매 깁니다.

특히 제안되고 사용 된 접근 방식은 어떤 설계 결과에 관계없이이를 표시하는 것입니다.

이런 종류의 스타일이 고려되지 않았는지 확인하기 위해 z- 인덱싱 (계층화)으로 제안 할 것입니다. 그러나 나는 알고리즘이 이것을 고려하기에 충분히 강하다고 생각하지 않습니다. 또는 화면 크기에 대한 상자 위치를 계산하여 음의 위치를 시각적 블록으로 간주합니다.

서구 고객 관심사에 대한 관련 텍스트가 표시되어야합니다.

— 부다 야
소스

1

이 답변은 잘못되었습니다. 당신이 간 회의는 끔찍합니다. 그들이 당신에게 어떤 다른 쓰레기를 먹었는지 상상할 수 없습니다. 그들은 아마도 메타 태그도 중요하다고 말했을 것입니다.

— John Conde

1

긴 키워드 목록을 작성하여 페이지에 넣고 표시하지 않고 숨기면 Google이 사이트에 불이익을 준다는 것은 사실입니다. 색인을 생성하려는 텍스트를 볼 수 있어야합니다. 다른 답변에서 지적했듯이 display : none은 합법적으로 사용됩니다.

— Stephen Ostermiller

텍스트를 숨기는 데 사용 된 기술적 수단은 Google에 전혀 중요하지 않습니다. z-index 또는 음수 위치 지정을 사용하여 Google을 괴롭히는 데 사용할 수 있다는 추측은 거짓입니다. Googlebot이 이제 페이지를 렌더링하고 다른 답변이 밖으로 가리키는 page.As에 픽셀에 표시 텍스트를 방지하기 위해 사용되는 수단을 감지 할 수 없습니다

— 스티븐 Ostermiller는