[web] 웹 서비스 전에 꼭 추가해야될 부분

[파비콘]

파비콘 : 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘이다.

 

파비콘 예)

확장자명 : ico, png

사이즈 : 16x16 & 32x32 이미지 사이즈 

 

HTML head 부분에 코드 한 줄 추가해주면 된다.

<link rel="shortcut icon" href="img/favicon.ico">

 

ico 파일 제작해주는 사이트 

1. https://convertico.com/

2. https://www.zamzar.com/convert/png-to-ico/

 

[오픈그래프] 

 

오픈그래프 : 어떤 HTML 문서의 메타정보를 쉽게 표시하기 위해서 메타정보에 해당하는 제목, 설명, 문서의 타입, 대표 URL 등 다양한 요소들에 대해서 사람들이 통일해서 쓸 수 있도록 정의해놓은 프로토콜

 

작동원리 : 사용자 클릭 전에 미리 해당 웹크롤러가 방문하여 HTML head 메타 데이터 크롤링하여 미리보기 화면 생성

 

오픈 그래프 예)

    <meta property="og:type" content="website">
    <meta property="og:title" content="강동구 마스크 재고 알리미">
    <meta property="og:description" content="강동구 지역 마스크 재고 및 코로나 관련 정보를 알려주는 사이트 입니다.">
    <meta property="og:image" content="img\image.png">
    <meta preperty="og:url" content="http://gangdong-corona.co.kr">

위 이미지의 코드입니다. 

 

[robots.txt]

 

로봇 텍스트 : 웹 사이트에 로봇이 접근하는 것을 방지하기 위한 규약 

 

경로 : html 폴더 

파일이름 : robots.txt

 

예) 

 

User-Agent: * (모든 종류의 로봇의 접근을 허용함)

Allow: / (전체 웹사이트의 크롤링을 허용함)

Disallow: / (전체 웹사이트의 크롤링을 차단함) 

User-Agent: *
Allow: /