본문 바로가기
IT, 인터넷 트랜드/웹제작팁&테크

반응형제거로 고정형 디자인으로 SEO최적화 홈페이지제작 아이디어

by 시너지메이커9 2018. 5. 21.
반응형



반응형제거로 고정형 디자인 홈페이지제작의 필요성

요즘은 반응형을 기본으로 생각하고 계신분들도 많지만 아직까지는
모든 제작에 반영된것은 아니며 이원적인 운영을 통해 좀더 다양한검색엔진 대응용 홈페이지의 필요성이 대두되고 있습니다.




너무 반응형!! 반응형!! 그러니까 한번의 제작으로 PC와 모바일응 한다는 것은 좋으나
마케팅적인 측면에서는 결국 반응형은 구글 정책을 따르다보니
자연스레 반응형이 트랜드이고 기본이며 원칙인줄 알고들 계십니다.


하지만 아직까지도 PC와 모바일을 따로 제작하는 업체도 많고 국내 솔루션의
특성상 반응형솔루션을 만든다는게 쉽지는 않아보입니다.

국내에서는 아임웹이나 식스샵, 많이들 들어보신 윅스등 여러업체들이 자체솔루션에서
반응형과 위지윅 디자인을 통해 누구나 쉽게 홈페이지를 제작할 수 있도록 서비스하고 있습니다.
단, 유료라는 사실 !! 


무료를 찾으시는 분들은 워드프레스를 사용하면 이 모든것이 
해결되기는 하지만 이게 처음 생각한것처럼 가볍지가 않습니다. 

국내 솔루션에 비해서 속도도 느리고 조금만 플러긴과 자료를 올리면 용량이 
확늘어나서 결국 media 옵션조정하고 캐쉬붙이고 이미지 최적화하고 ,
 SNS연동에 위지윅빌더 붙이고하면 생각보다 용량과 스크립트가 많이 

생기는 단점이 있으며 한국형 디자인에는 좀 불편한 감이 없지 않아 있습니다.


그래서 제가 사용하는 방법론은 고정형디자인+네이버모두 = SEO최적화의 공식을 적용했습니다.

이렇게 사용하면 구글대응이나 모바일대응도 원할하고 네이버에서 노출도 생각보다 

최적화되어 단시간내 검색엔진 최적화에 도움을 주고 광고비를 
줄여주는데 좋은 접근방법론이라 생각됩니다.

모두에서 스크립트 복사해서 PC 홈페이지 Header에 넣어주면 끝!!

다음부터는 
포스팅과 이미지들 업데이트하고 하면 생각보다 강력한 
마케팅형 홈페이지 운영의 기본이 세팅된다고 보시면 됩니다.

이렇게 하려면 먼저 PC에서 부트스트랩 부분을 제거해주어야하는데 
다음의 3단계만 적용하시면 됩니다.



meta 태그 삭제

Bootstrap을 반응형으로 사용할 때 <head>와 </head> 사이에 다음의 코드를 넣어야 합니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

고정폭 사용을 위해서는 위 태그를 삭제합니다.

가로폭 설정

다음의 코드를 style 파일에 넣어 가로폭을 정합니다.

.container {
  width: 970px;
  max-width: none !important;
}

col-xs 사용

그리드(Grid) 사용시 .col-xs-* 클래스를 이용합니다.

일단이렇게 하고 네이버모두 스크립트만 붙여넣어보세요. 
네이버와 구글을 동시에 대응하고 SEO 웹문서최적화를 통한 단기간내 
광고효과를 올리는 방법으로는 가장 기본으로 생각됩니다.


반응형