웹사이트 구축하고 검색엔진 상위 노출하기 3편
삼류 웹디의 웹마스터 코스프레
3번째 시작합니다. 요 며칠 마음처럼 되지 않는 답답한 실무 환경에 '그냥 속 편하게 시키는 것만 하면서 살까?' 하며 짜증이 났다가 남들처럼 고여가는 게 싫어 정신을 차려봅니다. 고여서 썩어가는 실무자가 되는 게 싫습니다. 경력자 그리고 리더라면 시키지 않은 일, 다른 포지션에서 놓쳐서 전달되지 못한 업무 또한 파악해야 합니다. 그게 통찰력이니까요. 잡설이 길었네요. 아무튼 3번째 글 시작합니다.
지난 글에서 API데이터를 PHP Curl을 이용해 웹페이지에 출력하는 부분까지 진행했습니다. 비록 짧은 PHP 코드이긴 하나 호스팅을 받고 FTP 연결하고 파일을 생성/수정/업로드 등의 작업이 익숙지 않다면 어려울 수 있습니다. 처음엔 누구나 그러하고, 조금만 반복해보면 금방 익숙해집니다. 알고 나면 더 나은 웹 디자이너가 될 수 있습니다. 자, 그럼 API데이터중 필요한 것만 골라와 html 코드 안에 넣어봅니다.
크롬의 개발자 모드(F12)로 보다 정리된 코드를 확인할 수 있다API데이터를 입맛에 맞게 수정하려면 먼저 구조를 파악해야 합니다. 지난 글에 출력했던 데이터들이 줄 바꿈도 없이 나열된 형태라 구조를 파악하기 쉽지 않아 이를 정렬된 형태로 봐야 합니다. 인터넷에 검색해보면 JSON 데이터를 이쁘게 정렬해 주는 웹서비스나 방법들이 많은데요. 번거롭다면 그냥 크롬 개발자 모드(단축 키 F12)를 켜서 코드를 확인하면 됩니다. 스크린샷 우측을 보면 데이터가 정돈된 형태로 출력되는 걸 확인할 수 있습니다. 그럼 구조를 살펴볼까요? 이해를 돕기 위해 몇 개의 이미지를 준비했습니다.
TMDB API 데이터가 담긴 큰 상자여기 TMDB API데이터가 담긴 상자 하나가 있습니다. 서버 쪽에 요청해서 배달받은 상자죠. 한번 열어볼까요?
상자를 열어보니 보이는 작은 상자들안에 상자들이 또 있네요. 각 영화의 정보들인 담긴 상자인가 봅니다. '영화 0번'상자를 열어봅니다.
0번 영화의 상자를 열어봤습니다실제 출력되었던 코드와 비교해서 볼까요? [results]라는 큰 상자를 열었고 다시 한번 [0] 번 영화에 해당하는 상자를 열었습니다. 지금 이미지는 [0] 번 상자 안에 들어있는 다양한 작은 상자들을 보여주고 있죠. 우리는 필요할 때 이 각각의 상자를 열어 사용자에게 보여줄 수 있습니다. 필요한 것만 보여주는 게 가능하죠. 구조가 어느 정도 파악되었으니, PHP라는 녀석에서 영화 제목만 골라서 보여달라고 부탁해보겠습니다. 녀석이 알아들을 수 있는 말로 해야 합니다. 안타깝게도 PHP라는 놈은 한국어를 모릅니다.
PHP가 알아들을 수 있는 말로 부탁해 봅니다어순이 영어와 가깝... 네. 문법은 이러하며 CSS에서 클래스를 잡아나가는 과정과 비슷하게 보일 수 있습니다. 이 한 줄의 문법을 이해하면 다양하게 응용이 가능해져서 기본적인 API데이터의 가공이 가능해집니다. 생각보다 어렵지 않다고 느껴지기를 간절히 소망해봅니다.
<?php echo $result['results'][0]['title'] ?>
그럼 위 코드를 지난번에 작성하던 페이지의 body안에 넣고 업로드 후 실제 출력되는 걸 살펴볼까요? 먼저 API데이터를 몽땅 출력해주는 코드, print_r( $result );라고 적인 부분을 찾아 주석처리를 해줍니다. 방금 추가한 코드를 통해 제목이 출력되는 것만 확인해볼 거니까요. PHP의 주석은 코드 맨 앞 '//'를 넣어주면 됩니다.
오옷! 0번 영화의 제목이 등장했드아! (집중선은 출력되지 않...)제목만 나옵니다! 거 봐요. 쉽다고 했잖아요. 그럼 0번 영화에 대한 포스터 이미지와 다른 요소도 가져와 볼까요? 카드를 꾸밀 요소들을 말이죠.
<div>
<ul>
<li><img src="https://image.tmdb.org/t/p/w185/<?php echo $result['results'][0]['poster_path'] ?>" alt="썸네일"></li>
<li><?php echo $result['results'][0]['title'] ?></li>
<li><?php echo $result['results'][0]['release_date'] ?></li>
</ul>
</div>
위 코드를 똑같이 작성해줍니다. 이미지와 관련한 API데이터는 상대적인 경로만 포함하고 있어 tmdb공식 사이트의 이미지 경로를 참고해서 추가해줬습니다. 이제 업로드 후 페이지를 새로고침 하면.
포스터 썸네일과 개봉일이 추가된 페이지 결과아주 잘 나옵니다. 지금은 한 개만 나오고 있으니 php의 반복문을 사용해서 20개를 출력해봅니다.
html 코드를 위와 같이 수정해줍니다.반복문을 추가해 이를 적용해주면 아래와 같이 전체 리스트가 출력됩니다. 그냥 반복하면 아래처럼 나오지 않으니 html/css를 다듬어서 보기 좋게 만들어주세요.
API데이터를 활용해 리스트 작업이 완료되었습니다.드디어 리스트 1차 작업이 완료되었습니다. 이제 개인 취향대로 사이트의 헤더와 푸터 등, 기본 요소들을 만들어서 추가해주세요. 이제 검색엔진 최적화(SEO)를 위해 조금 더 다듬어보겠습니다. 기본적인 SEO를 위해 '타이틀', '설명'등의 메타 요소를 추가해주고 구조화된 데이터 작업을 진행합니다. 메타 '키워드'는 넣지 않아도 됩니다. 키워드는 더 이상 검색 최적화 필수 요소가 아니니까요. 아무튼 구조화된 데이터 작업을 완료하게 되면...
구조화된 데이터 작업을 적용한 검색 결과모바일 기기에서 특정 키워드를 검색해 우리의 사이트가 노출될 때 위 이미지처럼 '캐로셀'형태로 출력됩니다. 사용자의 시선을 사로잡을 수 있고, 검색엔진의 봇에게 명확한 데이터를 전달해줌으로써 보다 좋은 SEO가 이뤄집니다. 구조화된 데이터 작업의 자세한 내용은 다음에 영화 상세 페이지를 작업할 때 좀 더 자세하게 다뤄보겠습니다. 내용이 좀 길거든요. 자 그럼 우리가 만든 페이지의 SEO가 잘 이뤄졌는지 확인해볼까요?
크롬의 개발자 모드(F12)를 눌러 라이트하우스를 실행합니다.먼저 크롬 브라우저의 개발자 모드(F12)를 누르고 패널 상단 '>>'을 눌러 Lighthouse(라이트하우스)를 실행합니다. SEO를 검증하는 도구에는 여러 가지가 있지만 구글의 정책을 가장 빠르고 직접적으로 반영하는 크롬의 '라이트하우스'를 활용하는 게 바람직합니다.
활성화된 라이트하우스의 화면딱히 옵션을 건드리지 않아도 됩니다. 테스트하고자 하는 기기(Device) 정도만 선택해주고 좌측 등대 그림 밑 버튼인 'Generate report'를 눌러주면 됩니다. 눌러봅니다.
제작한 웹페이지의 상태가 점수로 출력된다다양한 항목에서 좋은 점수가 나오네요. 86점에 해당하는 'Best Practices'부분은 http라서 90점에 못 미치고 있습니다. 차후 인증서를 발급받아 https로 테스트하면 90점이 넘게 됩니다. 우리가 하고자 했던 SEO는 100점을 달성했습니다. 또 쉬었다가 할까요? 다음 편인 상세페이지 제작 글에서 뵐게요. 감사합니다.
해당 PHP파일 첨부합니다. 발급받으신 API키만 적어서 서버에 업로드하시면 잘 동작할겁니다. 궁금하신 부분이 있다면 댓글로 남겨주세요!
