본문 바로가기

전체 글84

네이버에 티스토리 등록하는 방법(+사이트맵, robots.txt) 가이드 네이버 웹마스터 도구에 티스토리 블로그를 등록하고, 사이트맵을 제출하는 방법입니다. 티스토리의 html 편집 기능을 사용하지만, 익숙하지 않으신 분들도 쉽게 진행할 수 있습니다. 1. 네이버 웹마스터 도구에 티스토리 블로그 추가하기 https://webmastertool.naver.com/ 네이버 웹마스터 도구에 로그인한 후에 블로그 주소를 추가합니다. https:// 부터 적습니다. 추가하려는 주소의 홈페이지나 블로그가 본인 소유의 것이 맞는지 확인을 합니다. 방법 중에 HTML 태그를 선택하고 메타 태그 전체를 복사합니다. 전체를 복사해야 합니다. 티스토리 블로그에서 설정 > 꾸미기 > 스킨 편집에서 html 편집으로 들어갑니다. 위에 앞에서 복사한 내용을 붙여넣습니다. 위의 이미지에는 네이버 웹마스.. 2019. 8. 3.
구글 지도 API - 커스텀 지도/지도 스타일 간편하게 편집하기 과거에는 구글 지도 스타일을 편집하기 위해 snazzymap 등의 외부 툴을 사용해야 했지만, 이제는 구글에서 제공하는 스타일링 위자드에서 스타일 편집 기능을 제공합니다. 우선 빈 지도를 만들어 보겠습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 Styled Maps - Night Mode #map { height: 100%; } html, body { height: 100%; margin: 0; padding: 0; } function initMap() { var map = new google.maps.Map(document.getElementById('map'), { center: {lat:.. 2019. 8. 2.
쉽고 확실하게 티스토리 사이트맵 등록하기 티스토리 블로그는 html편집기를 제공해서 SEO나 편집이 제법 자유롭지만, 사이트맵(sitemaps.xml)을 업로드하고 경로를 찾는 방법은 어째선지 편리하진 않았습니다. 그러다 보니, 많은 분들이 다양한 우회적인 방법으로 사이트맵을 업로드하고 경로를 확인하고 있습니다. 아래는 몇 가지 방법 중 가장 확실하고, html 편집기도 사용할 필요 없는 방법입니다. 1. IE에서 글 작성하기 업로드한 사이트맵의 경로를 확인하기 위해서는 인터넷 익스플로러로 글을 작성해야 합니다. 브라우저 버전마다 차이가 있을 수 있지만, 현재 크롬으로는 티스토리 에디터 버전에 무관하게 바른 경로를 찾을 수 없었습니다. 티스토리 글에 사이트맵 파일을 첨부하고, 미리보기를 클릭합니다. 그럼 아래 이미지처럼, 미리보기 상태에서 첨부.. 2019. 8. 1.
[오픈그래프] 티스토리 공유할 때 표시되는 이미지와 텍스트 변경하기 오픈그래프를 것을 추가해서 블로그의 기본 설정을 바꾸지 않고 티스토리 블로그를 공유할 때 표시되는 대표 이미지와 제목, 설명을 변경하는 방법입니다. html편집이 익숙하지 않으신 분들도 어렵지 않게 하실 수 있습니다. 아래는 제 티스토리 블로그를 페이스북에 공유했을 때의 모습입니다. 티스토리의 블로그 설정 메뉴에서 입력한 대표 이미지, 블로그 이름, 블로그 설명이 표시됩니다. 블로그 설정은 그대로 유지하면서, 공유할 때 표시되는 내용을 변경해 보도록 하겠습니다. 1. 이미지 등록하기 대표이미지로 사용할 이미지를 티스토리에 업로드합니다. 티스토리에서 설정 > 꾸미기 > 스킨편집 으로 이동합니다. 원하는 이미지를 업로드하고, 업로드된 이미지를 우클릭 해서 새 탭에서 열기를 선택합니다. 저는 셔터스톡에서 구입.. 2019. 8. 1.
티스토리 검색엔진 최적화하기 - 구글 서치콘솔에 사이트맵 등록하기 이 글에서는 구글에서의 블로그 검색 인지도를 개선시키기 위해서 (구글에서 블로그가 잘 검색되도록) 1. 사이트맵을 생성하고 2. 블로그에 사이트맵을 업로드한 후에 3. 업로드된 사이트맵을 구글 서치콘솔에 제출합니다. 1. 사이트맵 생성하기 무료로 사이트맵을 생성할 수 있는 사이트는 여러 곳이 있습니다. https://www.xml-sitemaps.com 을 이용해 보도록 하겠습니다. 사이트에 접속에서 블로그 주소를 https:// 부터 적고 START를 클릭합니다. 사이트맵이 곧 생성되면, DOWNLOAD YOUR XML SITEMAP FILE 버튼을 클릭해서 사이트맵 파일을 다운로드 받습니다. 파일명은 sitemap.xml 입니다. 2. 블로그에 사이트맵 업로드 하기 사이트맵 제출은 다운받은 파일을 블.. 2019. 7. 31.
티스토리 검색엔진 최적화하기 - 구글 서치콘솔 등록하기 홈페이지나 블로그 그리고 그 안에서 작성한 글이 검색 결과의 상단에 노출되기 위해서는 다양한 요인이 필요하지만, 검색엔진최적화(Search Engine Optimization, SEO)는 그 중에서도 가장 기본적이고 필수적이라고 생각합니다. 이 글부터는 티스토리 블로그에서 작성한 글이 구글에서 더 잘 검색되기 위해 (구글에서의 검색 인지도를 향상시키기 위해) 할 수 있는 간단한 작업들을 공유합니다. 이 글에서는 우선 구글 서치콘솔 속성을 만들고 블로그의 소유권을 인증하는 절차까지 진행합니다. 1. 구글 서치콘솔에 속성 만들기 가장 먼저 구글 서치콘솔(구 웹마스터)에서 블로그에 대한 정보를 관리할 속성을 만듭니다. https://search.google.com/search-console/ 시작하기를 클릭하.. 2019. 7. 31.
CSS)모든 브라우저에 적용되는 Full-size Video 만들기 * * 동영상을 배경으로 사용하고자 할 때 가장 편한 방법은 object-fit 속성을 사용하는 것이지만, IE와 몇몇 브라우저에서는 해당 속성을 인식하지 못합니다. 이 글은 object-fit 속성 없이 css에서 object-fit: cover를 적용한 것과 같은 결과물을 만드는 방법입니다. 동영상을 화면에 가득 차는 배경으로 사용하고 앞에 다른 요소를 배치할 수 있습니다. 크롬, IE, Edge, 파폭, UC브라우저에서 확인해 보았습니다. 우선 JSFiddle에서 작성한 예시입니다. Edit fiddle - JSFiddle jsfiddle.net 아래는 작성한 예시 중 관련된 내용입니다. html 1 2 3 4 5 6 7 8 9 10 11 Big Buck Bunny a full-size backgr.. 2019. 7. 29.
'Google 지도를 제대로 로드할 수 없습니다.' 구글 맵 API 문제 해결 구글 지도 API를 웹사이트에 사용하려고 할 때, API키를 맞게 입력해도 지도가 표시되지 않을 때가 있습니다. 화면에 아무것도 표시되지 않는다면 API 키 설정에서 도메인 연결이 제대로 되지 않았거나 스크립트 내에 SSL 인증이 안 된 http 링크가 있는 것이 이유일 수 있습니다. 이 글은 아래처럼, Google 지도를 제대로 로드할 수 없습니다. 메시지가 나오고, 지도에 For development purpose only 글자가 표시될 때의 해결 방법입니다. 구글 클라우드 플랫폼에서 화면 중앙의 콘솔로 이동 클릭 구글 지도 API는 구글 클라우드 플랫폼의 일부로 제공되고 있습니다. 왼쪽 상단의 메뉴 > 결제 > 결제수단 으로 이동합니다. 위 페이지에서는 국민 7807이라는 결제수단이 등록되어 있지만.. 2019. 7. 29.
구글 맵 API 키 확인하기/ API를 사용할 도메인 연결하기 구글 지도는 GCP(구글 클라우드 플랫폼) 내에서 API로 제공되며, 사용자는 지도, 길찾기, 장소 정보를 홈페이지에 사용할 수 있습니다. 이 글의 내용은 이미 발급된 API 키 정보를 확인하고, 해당 키를 사용할 도메인을 연결하는 방법입니다. '구글 맵 API'를 검색해서 나오는 링크를 타고 들어왔습니다. API 키의 위치를 찾기가 쉽진 않아 보입니다. 화면 왼쪽 상단의 Google Cloud 클릭 이미 발급받은 API 키를 찾으러 가는 것이므로 콘솔로 이동 버튼 클릭. 만약 발급 받은 키와 생성한 프로젝트가 없다면, 콘솔로 이동 대신 무료로 GCP 사용해 보기 버튼이 표시됩니다. 생성된 프로젝트에 대한 API 키의 위치는 왼쪽 상단의 메뉴 > API 및 서비스 > 사용자 인증 정보 에서 확인할 수 있.. 2019. 7. 28.
728x90