블로그 작업노트 16: SEO 최적화 작업외 이것 저것

83 views as of December 31, 2024.

우하단 코멘트 바로가기
광고 사이즈 변경
유튜브 아이프레임 퍼사드 처리
포스트 섬네일 작업시 오픈그래프 이미지는 무시하도록 정규식 변경
이미지 지연 로딩 제어
사이드 광고 및 애니 리뷰 배너 로직 변경

SEO 최적화 및 페이지 속도 최적화를 위해 이것저것 만진 후 기록하는 작업노트이다.

우하단 코멘트 바로가기

페이지내에 코멘트가 없을때

페이지내에 코멘트가 있을때

기존에 콜렉션으로 바로가기 버튼을 부활시키는대신 새로 추가한 댓글 위치로 이동하는 기능으로 변경했다.

댓글을 달기보다 그냥 바로 글 아래로 가기위한 용도가 더크다.

광고 사이즈 변경

모바일 뷰에서 보이는 하단 광고의 사이즈를 300x100 -> 300x200으로 변경했다.

근데 애초에 평소에 모바일일경우 잘 보이지도 않아서... 크게 의미는 없을듯하다.

그래서 큰거로 변경한거기도하구...

유튜브 아이프레임 퍼사드 처리

퍼사드로 유튜브 지연 로딩 처리 | 에루라보

유튜브 초기 로딩 느림우연히 내 블로그 사이트를 뒤적거리다가 유튜브로 올린 페이지에서 페이지 로딩 시간이 오래걸려 컨텐츠가 느리게 뜬다는 구글 서치콘솔의 보고서를 받게되었다. 무슨내용인가하니 유튜브 영...

https://erulabo.com/266

이 글에서도 찾아볼 수 있듯이 유튜브 embed 형식의 아이프레임을 퍼사드 방식으로 변경했다.

기존 글을 전부 찾아서 저 방식으로 변경했으며 플로라 에디터에도 유튜브 영상 추가시 퍼사드 방식의 코드로 입력되게 하는 플러그인을 제작해 적용했다.

관련 기능을 만들면서 플로라 에디터의 팝업, 플러그인, 커스텀 아이콘 제작등의 잡다한 기술을 익힌것은 덤.

여유가 되면 해당 확장기능에 대해서도 개발글을 하나 써볼가 한다.

포스트 섬네일 작업시 오픈그래프 이미지는 무시하도록 정규식 변경

기존에는 섬네일 사용시 cdn.erulabo.com 으로 시작하는 url 주소만 섬네일로 사용가능하게 제약을 걸어두었는데, 이러다보니 내 블로그의 오픈그래프 링크 이미지도 섬네일로 그대로 뜰 수 있다는걸 알게 되었다.

그래서 아래처럼 og_image 클래스가 있으면 무시하도록 정규식을 변경했다.

if ($request->input('use_image')) {
    // `class="og_image"`가 포함된 이미지는 제외하고, `https://cdn.erulabo.com`로 시작하는 이미지 src만 추출
    preg_match("/<img(?:(?!class=\"og_image\").)*?src=[\"'](https:\/\/cdn\.erulabo\.com[^\"]+)[\"'][^>]*>/i", $post->body, $images);
    $post->image = $images[1] ?? null; // 매칭된 이미지 URL이 없으면 null
} else {
    $post->image = null;
}Copy

이미지 지연 로딩 제어

SEO 에서 이미지들이 페이지 로딩시 한꺼번에 로딩되다보니까 자연스럽게 속도가 느려지는 문제가 있다고 검사결과가 나왔다.

뭐 그도그럴게 당연한 소리긴하지만, 관련 문제를 해결하기위해 찾아보니 img 태그에서 loading="lazy" 속성을 추가하는것으로 쉽게 지연로딩을 모던 브라우저에서는 사용할 수 있다고 하는걸 알게되었다.

그래서 본문의 이미지에는 모두 지연로딩을 거는 방식으로 에디터의 이미지 삽입시 해당 속성을 추가하는 작업을 진행했다.

events: {
    'image.inserted': function ($img, response) {
        // 이미지 태그에 lazy loading 속성 추가
        $img.attr('loading', 'lazy');
    },
    ...
}Copy

근데또 이게 블로그 레이아웃을 결정짓는 중요한 이미지에는 안하는게 좋다고해서... 메인 로고와 사이드바에서 쓰이는 이미지는 지연로딩을 걸진않았다.

현재는 본문내 이미지와 리스트 이미지에만 적용되어있다.