2/21(화) 웹 서비스 고도화하기

1. SNS 공유 기능 구현 - AddThis 활용

AddThis

1. 로그인
2. share buttons 버튼 클릭
3. inline 사용 -> continue
4. 직접 보여줄 SNS 선택하거나 추천 기능 활용
5. copy 해서 body 태그 안에 붙이기
6. inline 복사해서 공유 버튼을 넣고자 하는 위치에 붙여넣기
   (result 클래스 동물 설명 아래에 넣음)
7. 디자인을 바꿀수 있음
8. class에 이름 주어서 CSS에서 margin: 0 auto로 가운데 정렬

 ...
 <article class="result">
        <img id="img" class="rounded-circle mt-5" src="lion.jpg" alt="animal">
        <h2 id="animal" class="text-center mt-5">동물이름</h2>
        <h3 id="explain" class="text-center mt-5">설명</h3>
        <!-- Go to www.addthis.com/dashboard to customize your tools --> <div class="share addthis_inline_share_toolbox"></div>
                
    </article>
    ....
    
    <!-- Go to www.addthis.com/dashboard to customize your tools -->
    <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-63f47c1a7924ea78"></script>

</body>

2. 광고 붙이기 1

광고 방법

1. 에드 네트워크 이용 - 구글 adsense, kakao adfit
2. 직접 광고 계약

1. 카카오 에드핏을 이용한 광고 붙이기

1. 로그인
2. 광고 관리
3. +새매체
4. 매체명과 고유값(주소) 입력
5. 광고 단위명 : 하단 배너1
6. 스크립트/SDK 발급하고 스크립트 복사
7. 여기선 모든 article 태그 끝난 하단에 article class="kakao_ad" 태그 만들어서 사이에 넣었음
   (카카오에 입력한 사이트 주소가 아니면 안보임)
8. css에서 .kakao_ad 의 width:320px, margin:0 auto 로 변경
9. 코드를 수정하였다면 nelify 가서
10. deploys 누르고 다시 폴더 업로드
11. 사이트 들어가면 광고 보임

2. 직접 회사와 광고 계약하기

수수료가 없음

1. 배너를 클릭하면 이동할 링크를 받음
2. 광고할 링크: https://www.codelion.net/catalog/Q291cnNlTm9kZTpqbW9r?utm_source=animal_test&utm_medium=web_lecture&utm_campaign=jocoding
3. 배너 사진 다운로드 해서 폴더에 넣기
4. a 태그에 링크와 배너 이미지 넣기

 //html 파일 > article 맨 아래 넣음
 <a class="mt-5 banner" href="https://www.codelion.net/catalog/Q291cnNlTm9kZTpqbW9r?utm_source=animal_test&utm_medium=web_lecture&utm_campaign=jungminji">
        <img class="banner-img" src="banner.png" alt="banner">
 </a>
 
 //css 파일
.banner{
    display: flex;
    justify-content: center;
    width: 300px;
    margin: 0 auto;
}
.banner-img{
    width: 300px;
}
 

링크 뜻 풀이
목적지 주소
?
utm_sorce=animal_test
&
utm_medium=web_lecture
&
utm_campaign=jocoding (여기엔 내 사이트 이름 넣어서 나중에 어느 경로로 들어왔는지 추적할수 있음)

3. 네이버에서 내 사이트 검색 되도록 만들기

1. 네이버 웹 마스터 도구에 내 사이트 등록
2. 검색 관련 문서 제출

검색 엔진 원리 - 크롤러라는 검색 봇 (네이버는 yeti)
robots.txt에서 크롤링이 가능한 사이트만 알려줌

1. robots.txt에 내 사이트 등록하기
2. sitemap.xml 등록

네이버 Search Advisor에 내 사이트 등록
네이버 Search Advisor

1. 웹 마스터 도구
2. URL 등록
3. HTML 파일을 mbti 폴더에 넣고 이 폴더를 netlify에 다시 업로드
4. 소유 확인 버튼 누르기
5. 등록된 사이트 링크 누르기
6. 검증->robots.txt
7. robots.txt 간단 생성 -> 모든 검색로봇 수집을 허용합니다. -> 다운로드
8. robots.txt 파일 다운 받고 mbti 폴더에 넣어주기
9. robots.txt 정보 수집 요청 -> 정상적으로 정보 수집됌
10. sitemap generator로 sitemap.xml 만든 후에
    네이버 search advisor 사이트에서 요청-> 사이트맵 제출-> sitemap.xml 적어서 확인 누르면 제출됌

sitemap generator로 sitemap.xml 만들기

1. sitemap generator 검색
2. URL 입력후 스타트
3. 사이트 스캔해서 sitemap.xml 만들어줌
4. xml 다운해서 mbti 폴더에 넣기
5. netlify에 다시 업로드해서 사이트 업데이트

4. 검색 엔진 최적화 (SDO)

1. 내부 요소 최적화 (HTML, 컨텐츠, 메타태그 등)
2. 외부 요소 최적화 (백링크 개수 등)

1. 내부 요소 최적화
   네이버 Search Advisor 사이트 -> 하단에 사이트 간단 체크
   내 사이트에 SDO 잘되어 있는지 체크, 웹 마스터 가이드 따라하기