hi098123 Tistory Tip
썸네일 이미지

"색인이 생성되었으나 robots.txt에 의해 차단됨" 해결하기

경고 문구는 아래와 같습니다. Search Console이 사이트에서 1개의 색인 생성 범위 문제를 발견했습니다. 주요 경고 경고는 개선을 위한 제안사항입니다. 일부 경고는 검색결과 노출에 영향을 미칠 수 있으며, 나중에 오류로 격상될 가능성이 있는 경고도 있습니다. 사이트에서 발견된 경고는 다음과 같습니다. 색인이 생성되었으나 robots.txt에 의해 차단됨 가능한 경우 문제를 해결하여 사이트의 사용자 환경과 Google 검색 노출을 최적화하시기 바랍니다. 색인 생성 범위 문제 해결하기 링크를 누르면 아래와 같은 페이지에서 어떤문제인지 나온다. 영향을 받은 페이지를 확인하자 티스토리에서 이와 동일한 오류발생가능한 주소는 아래와 같고 /search 는 정상적으로 실행되는 주소라 /search로 오류가 ..
썸네일 이미지

움직이는 이미지 mp4로 표시하기

GIF는 MP4에 비해 모든면에서 안좋다. 화질 용량 최적화 CPU사용량 때문에 GIF이미지를 mp4로 변경하여 사용하는 사이트가 요즘 늘어나는 추세다. FFMPEG와 같은 미디어인코더를 통해 서버에서 GIF를 MP4로 변환시키거나. 사용자 브라우저에서 WASM기술을 이용해 인코딩할수도 있다. 이렇게 변환한 파일을 gif.mp4라고 가정하고 설명한다. GIF를 MP4로 변환했다면 아래와 같이 mp4파일을 autoplay loop muted playsinline 옵션을 준다면 GIF와 동일하게 동작한다. Video태그 각 옵션에 대해 설명 autoplay 자동재생을 한다. GIF도 로딩과 동시에 움직이는 이미지로 보인다. loop 무한 반복을 한다. 보통 GIF는 무한반복을 이용한다. muted 음소거를 ..
썸네일 이미지

SEO 글쓰기 팁 : 목차 TOC(Table of contents)

SEO 글쓰기 팁에 목차기능을 넣은건 h1~h6 태그의 중요성을 설명하고자 작성합니다. 문서는 깔끔하고 정리된 순서로 작성되어야 합니다. 제목을 정하고 소제목으로 내용을 정리하면 매우 깔끔하게 글이 완성될 수 있습니다. 아래의 목차는 a태그 설명에 포함되어있는 목차입니다. 왜 목차를 추천하는가? 아까 말했듯 h1~h6 제목태그 활용을 위해서입니다. 기계가 읽어 들이는 방식이 그대로 표현되면서도 사람이 읽기 편해지기 때문에 목차기능을 추천합니다. 목차기능을 적용하면 이점이 많이 있습니다. 사용자가 읽기 쉽다 = 사용자가 보기 편하고 좋은글 = 검색엔진의 최종 목표 검색엔진도 읽기 쉽다 = 높은 순위에 오르기 좋다. 작성시 신경을 쓴다 = 보통은 신경을 잘 안쓰게 되지만 좋은글을 위해 신경쓰기 좋다. 적용방..
썸네일 이미지

블로그, 최소한 IE11은 지원해주세요.

방문자에게 2020-08-12 작성일 기준 IE를 더 이상 이용하지 말라고 말하겠지만, MS에서 지원하는 중이므로 IE는 사용자가 있고 지원을 계속해줘야 됩니다. IE 지원하기 싫어도 지원해야 하는 이유 블로그 컨텐츠는 사용자와 상호작용보다는 일반적인 웹문서 제공에 불과하기 때문에 IE11을 지원해줘야 됩니다. 미지원시에는 IE에서 검색 시 블로그 자체가 안뜰수 있습니다. 구형 브라우저를 차별시 저사양 PC나 구형 휴대기기 등에서 이용이 불가합니다. 그러나 국내에 사용자가 있으며, 이들을 차별시 검색엔진의 순위가 좌우될 수 있습니다. 블로그 컨텐츠는 단순히 글을 읽는 것에 불과하여 어떻게든 글을 읽게 만들 수 있기 때문에 지원이 어려운 건 아닙니다. 또한 IE 사용자는 애드블럭을 99.9% 사용하지 않기..
썸네일 이미지

HTML 기초 : title attribute 툴팁을 만들자.

이번 글의 주제는 title 속성값이다. title태그와는 다른 속성에 들어가는 값이다. 들어가기 앞서.. HTML 속성(attribute)이란? hi098123-skin:타이틀 속성 위와 같은 html 구조에서 href="URL", target="_blank" 부분을 의미한다. href는 속성(attribute)으로 a태그에서 어디로 향할지 주소를 입력할 수 있다. href의 값(value)은 https://hi098123-skin.tistory.com/29 로 웹 주소이다. TITLE 속성(attribute) 알아보기 여기의 title은 hi098123-skin 이에요 미리보기 여기의 title은 hi098123-skin 이에요 title 속성(attribute)에 적힌 hi098123-skin이라는..

iframe간 CORS무시? postMessage

다른 도메인이어서 CORS가 걸려있어도 로딩한 iframe과 통신할 수 있는 한가지 방법이 있다. (window.open 팝업등도 가능하다.) 대신 두 통신할 도메인 여기에서는 aa.com과 bb.com으로 예를 들겠다. aa.com bb.com : CORS aa.com bb.com : X-frame-options "allow-from https://aa.com/" iframe으로 통신시 서버상에서 iframe을 로드할수없게 만드는 기능이 꺼져있어야된다. postMessage targetWindow.postMessage(message, targetOrigin, [transfer]); targetWindow targetWindow의 예시로는 아래의 내용이 있다. Window.open (새 창을 만들고 새 ..

티스토리 스킨 ##_rp_rep_class_##

티스토리 공식 스킨 페이지에 보면 설명이 좀 이상합니다. 댓글의 글의 목록에 반복되는 스타일 + admin 아이디 앞에 아이콘 어떤 의미인가와 활용방법을 알아보고자 글을 작성합니다. 분류 값 일반 댓글 rp_general 비밀 댓글 rp_secret 본인의 댓글 rp_admin 숨겨진 댓글 hiddenComment 이렇게 반환됩니다. 결과 예시 만약 코드가 다음과 같았다면 일반 댓글 비밀 댓글 (내용을 볼 수 있는 경우) 블로그 주인의 댓글, 블로그 주인의 댓글이면서 비밀댓글 비밀 댓글 (내용을 볼 수 없는 경우) 이렇게 4개로 나눠집니다. 활용 예시는? .rp_admin{font-weight:bold} CSS설명 : 블로그 주인의 댓글의 글자를 굵게 설정합니다. 단순 예시로 CSS를 다룰줄 안다면 아래..
썸네일 이미지

티스토리 글 좋아요/싫어요

아마도 티스토리를 사용하면서 글 싫어요 기능은 들어본적 없을텐데요 이에 대해 외부로 잘 드러나지않는 데이터로 싫어요 기능이 추가되어있는것을 확인하였습니다. (앞으로 업데이트가 될지 안될지는 알수없습니다.) 티스토리 좋아요 기능 티스토리 좋아요 기능은 5개가 채워지면 스토리에 글이 등록됩니다. 그런데 확인해보니 티스토리에서도 싫어요 기능이 있는것으로 보입니다. 아래는 글 로딩시 전달받는 좋아요, 싫어요 데이터 일부 reactionCounter: {sum: 5, like: 5, sad: 0} 구조가 이렇게 바뀐건 공감기능 업데이트 이후입니다. (관련공지 : https://notice.tistory.com/2532) 이때 좋아요 시스템 외부 구조가 바뀌면서 앞으로 업데이트 할 내용 일부 추가된것 같습니다. 비..