퍼블리싱 아카이브

사이트맵 웹 사이트 내 모든 리소스의 목록을 나열한 파일이다. 검색엔진에 웹 사이트 내 모든 페이지의 목록을 제공한다. 검색엔진 랭킹 점수를 높이는 데 직접적인 영향을 주지는 않으나, 일반적인 크롤링 과정에서 발견되지 않을 수 있는 웹 페이지 정보를 제공하여 사이트맵을 설정하는 것이 SEO에 긍정적인 영향을 끼친다. 사이트맵 생성법 사이트맵 파일의 위치를 루트 디렉토리에 지정한다. (루트폴더에 업로드) 웹사이트 url 뒤에 /sitemap.xml을 입력하여 찾아볼 수 있다. 사이트맵은 직접 작성하기보다 사이트맵을 생성해주는 온라인 사이트를 이용하는 것이 수월하다. 1. XML-Sitemaps.com(wordpress 기반이 아닌 웹사이트 사이트맵 제작시) https://www.xml-sitemaps.co..

검색엔진의 수집 로봇(검색엔진 크롤러)를 위한 robots.txt 파일은 웹 표준의 하나로, 모든 웹 사이트 루트 폴더에 위치해야 한다. 이 파일은 검색엔진 로봇에 웹사이트의 사이트맵 위치, 접근 가능 파일과 가능하지 않은 파일 등의 정보를 알려준다. 이를 통해 관리자가 직접 수집이 되길 원하는 사이트와 그렇지 않은 사이트를 구분지을 수 있고 검색 엔진이 웹 사이트를 더 빠르고 효율적으로 수집할 수 있도록 도와준다. robots.txt 작성법 html이 아닌 일반 txt 파일로 작성한다. 사이트의 루트 디렉토리에 위치해야 한다. 도메인 주소에 /robots.txt를 입력하면 확인할 수 있다. 검색엔진 로봇명: 구글 Googlebot, 네이버 Yeti, 빙 Bingbot, 야후 Slurp 1) 모든 웹사이..

웹사이트 내 링크깨짐 현상이 발생하여도 페이지 랭크 점수에 아무 영향이 없도록 해야한다. 사용자가 다른 URL을 통해 사이트에 들어오는 경우 선호 도메인을 설정해 SEO 점수를 한곳으로 모으는 것이 중요하다. 301 리디렉션: 도메인이나 url을 영구적으로 변경할 때 사용. 검색엔진이 새로운 도메인을 색인에 저장하여 이전 URL은 없어진다. 302 리디렉션: 일시적 이전. 페이지나 사이트를 일시적으로 옮길 때 사용한다. 일시적으로 이전하는 것이므로 구글은 이전 url을 지우지 않고 그대로 남겨둔다. //0초만에 변경된 url로 이동함 404에러 SEO 측면에서 404 에러 페이지를 어떻게 처리하느냐에 따라 검색엔진의 사이트 신뢰도가 달라진다. 페이지 파일이 없거나 링크가 깨진 상황이라면 404 페이지를 ..

오픈 그래프란? 웹 페이지 링크를 공유할 때, 소셜 미디어에 해당 웹 사이트의 상세한 정보를 제공하기 위해 사용한다. HTML 문서의 메타 정보를 쉽게 표시하기 위한 기능으로 링크를 넣을 때 미리보기에 나오는 제목, 설명글, 이미지 등을 설정하는 역할을 맡는다. 오픈 그래프를 설정하지 않으면 크롤러는 자동으로 웹 사이트의 제목, 요약 내용, 대표이미지를 설정한다. 하지만 크롤러가 저보 의미를 100%%인식하는 것이 불가능해 콘텐츠에 맞지 않는 제목이나 이미지가 설정될 수 있다. 따라서 오픈 그래프와 메타 태그를 이용해 전달하고자 하는 정보를 직접 전달하는 것이 중요하다. og:title은 제목, og:description은 설명글, og:image는 이미지 정보이다. SNS에 공유시 나타나는 이미지와 제..

타이틀 태그 타이틀 태그는 페이지 레벨에 해당하는 테크니컬 SEO 항목이며, 페이지 제목을 나타내는 HTML의 사이에 태그이다. 검색 엔진 크롤러가 웹 페이지 정보를 수집할 때 타이틀 태그를 웹사이트 타이틀이라고 인식하며 특정 페이지의 주제를 이를 통해 알 수 있다. 제목 글자 수가 공백을 포함하여 영문 65자, 한글 32자 내외여야 한다. 제목에는 가장 중요하고 관련이 깊은 키워드를 넣어야 한다. 반복은 안된다. 각 페이지는 고유의 제목이 있는 것이 좋다. 메타 디스크립션 태그 웹페이지를 요약한 설명글이다. 타이틀 태그처럼 태그 사이에 위치한다. 검색 결과에서 페이지 제목과 URL 아래에 표시된다. 더 나은 웹을 만드는 브리티웹 한글 기준으로 77자, 영어 기준으로 160자를 넘지 않는 것을 권장한다...

role='button' button 태그를 사용하지 못할 때 button 역할임을 알리고 싶다면 role='button'속성을 사용한다. role="tablist" / role="tab"/aria-selected='true','false'/aria-expanded='true','false' 탭리스트를 하나로 묶을 때 tablist 속성을 사용하며 하나의 탭은 tab으로 속성을 부여한다. 선택됐는지 여부를 확인하기 위해 aria-selected 속성을 사용한다. aria-selected='true'면 해당 탭이 선택되었다는 의미, 'false'면 선택되지 않았다는 의미이다. aria-expanded는 해당 탭을 눌러 설명이 확장되었는지 여부를 알려준다. role="tooltip" input placeho..

숨김 콘텐츠 디자인에서 보이지 않는 정보이더라도 콘텐츠의 정보와 내용을 이해하기 위해 필요함. diplay: none 속성을 이용하면 애니메이션이 통하지 않는 것과 같이 해당 속성을 사용하여 콘텐츠를 숨길 경우, 스크린 리더 등 보조기기가 인식할 수 없는 문제가 생긴다. //화면의 초점이 해당 영역에 머물면서도 스크린 리더가 정보를 읽을 수 있게 함 .ally-hidden{ position:absolute !important; clip:rect(0, 0, 0, 0); clip-path: polygon(0 0, 0 0, 0 0); width:1px; height:1px; margin:-1px; overflow:hidden; white-space:nowrap; } 스크린 리더의 가상초점 이용

1. 마우스로 접근할 수 있는 요소는 키보드로도 접근할 수 있어야 한다. 2. button 태그의 경우 figure 태그를 자식 요소로 둘 수 없기 때문에 이 부분을 a 태그로 바꿔 준 뒤, aria 속성을 추가하여 버튼 역할을 할 수 있는 태그로 만들어준다. 서울 경복궁 aria-haspopup='dialog' 눌렀을 때 대화창이 뜨는 경우 aria-pressed = 'false' 해당 버튼이 눌렸는지 안눌렸는지 확인 Aria-role: Dialog 상세정보를 기입하는 div 태그는 아무런 의미가 없는 태그이다. 따라서 role 속성을 부여해 주어야 하며, 레이블링이 필요하다. HTML 기반의 애플리케이션의 다이얼로그 또는 콘텐츠를 분리하는 창 또는 다른 웹 애플리케이션의 UI 혹은 페이지를 마크업하는..

웹의 힘은 보편성에 있다. 장애에 관계없이 모든 사람이 접근할 수 있도록 하는 것은 필수적인 요소이다. -Tim Berners-Lee 1. 웹접근성의 필수요소 1. 인식의 용이성 2. 운용의 용이성 3. 이해의 용이성 4. 견고성 2. 웹접근성을 고려한 마크업 1) 한국어 언어표시 (주로 사용하는 언어를 기본으로 명시해야 한다는 이해의 용이성 원칙 준수) 2) title은 고유하면서 명료하게(특수문자 지양) 티스토리 홈입니다. 3) HTML 시맨틱 태그 요소와 WAI-ARIA role 속성을 통해 콘텐츠의 내용을 표시할 수 있다. 둘 중의 하나의 방법만을 사용하고 혼용하지 않는 것을 권한다. 메인 콘텐츠 (O) 메인 콘텐츠 (O) 메인 콘텐츠 (x) 4) 논리적인 순서: 콘텐츠를 탐색하는 선형화된 순서를..

피그마 디자인을 완성했을 때 이것을 제플린으로 옮기는 방법을 활용해 보겠다. 제플린은 디자이너가 피그마, XD, 포토샵, 스케치로 만든 디자인을 화면에 그대로 구현할 수 있도록 도와주는 툴이다. 1. 먼저 내보내고 싶은 프레임을 선택한 뒤, 제플린 플러그인을 설치해 실행해준다. 2. Export 버튼을 누른 뒤 잠시 기다린다. 3. 프레임 내보내기가 완료되면 오른쪽의 아이콘을 클릭한다. 4. 제플린에서 HTML, CSS 코드를 참고할 수 있다. Alt 를 누르고 요소를 클릭하면 %단위로 padding과 margin을 확인할 수 있다.