'사이트체적화'에 해당되는 글 3건

  1. 2018.10.11 메타태그와 사이트 방문자
  2. 2017.07.31 이미지 포맷 GIF와 JPG,PNG (4)
  3. 2010.05.07 웹사이트 최적화의 첫걸음


체적화의 첫걸음 META TAG for SEO


웹사이트나 블로그에서 체적화 라는 말을 많이 한다.

당연히 최적화된 사이트는 뜨고 그렇지 않은 사이트는 검색엔진에 노출될 확율이 낮은것은 사실이다


검색 엔진이 아닌 특정 사이트나 포털에서 빅 뉴스로 취급해서 상위에 게시해 주는 것 과는 개념이 다르다.
가장 바람직한 것은 트랙픽이 지속적으로 여러가지 검색 엔진이 골고루 이용되는 분포로 내 사이트를 방문하는 트래픽이 발생 하는 것 이다.

그렇게 되기 위해서는 사이트의 최상위 헤드에 메타 태그로 존재해야 하는 몇가지를 알아본다.
사이트 최적화의 첫글음은 충실한 메타태그를 제공해서 세계의 수많은 봇이 읽는데 걸림이 없도록 미리 준비하는것이다.

실제로 메타태그(meta tag)는 웹페이지(Web page)의 차례로도 되며 빠르고 간략한 사이트 정보를 담고 있으며 봇에게 사이트 어드민의 의도를 알릴 수도 있으며 그 봇이 요구하는 최소한의 정보를 공급할수 있어야 한다.


검색엔진 마케팅(Search Engine Marketing)이 인터넷 마케팅의 중요한 장르로 자리매김하면서 그 가치가 인정되고 올바른  메타대그의 적용은 SEO의 첫걸음이 되고 있다.

먼저 사용되고있으며 봇이 요구하는 태그는 어떤것이 있는가를 알아본다.
메타태그(meta tag)는 하이퍼텍스트(Hyper text) 생성 언어 HTML 문서에서 처음 만나는 위치의 태그(tag)인데 <HEAD>와 </HEAD>사이에 존재 해야 하며 어떤경우에도 BODY 태그 앞쪽에 나열되어야 한다.

SEO를 위한 메타태그들의 속성은 아래와 같다.

특정엔진에서 요구하는 태그들이 있지만 전부 나열할 필요는 없으며 구글이나 야후 정도에서 요구하는 태그만 삽입하면된다.
이 규칙은 구글이 먼저 사용했으며 지금은 국제적으로 어느나라 검색엔진이든 이 규칙을 따른다.
우리나라 네이버 웹마스터 도구도 구글과 거의 비슷한 알고리즘일것으로 추측한다.

구글 메타:
<meta name="verify-v1" content="pq/HTwwnWoPsa3bTRvEExyVNAx2J2moHlmdNdQsHMHQ=" />
야후 메타:
<META name="y_key" content="1813effcb12a95ba" >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />캐릭터 셋을 알려줌-웹페이지 언어
<META HTTP-EQUIV="Expire" CONTENT="-1">   : 캐쉬 완료(파기)시간 정의.
<META HTTP-EQUIV="Last-Modified" CONTENT="Sun,10 Apr 2009 10:20:10"> : 웹페이지의 최종수정일시를 말함.
<META HTTP-EQUIV='Cache-Control' CONTENT='no-cache'> :캐쉬콘트롤 함
<META HTTP-EQUIV='Pragma' CONTENT='no-cache'>   : 캐쉬를 잡지않음
<META HTTP-EQUIV="Imagetoolbar" content="no">   : 이미지의 마우스 오버시 관련 툴바정의.



<META HTTP-EQUIV="Refresh" content="15;URL=http://galaxy.channeli.net/jakalky/sitemap.htm">  : 페이지의 이동
예:<META http-equiv="refresh" content="3; url=http://원하는 주소.net">
3초 후에 http://원하는 곳으로.net로 자동이동하게함.
<META HTTP-EQUIV="Page-Enter" content="RevealTrans(Duration=5/시간 초단위, Transition=21) ">  : 페이지 로딩시 트랜지션 효과(장면 전환 효과)
<META name="Subject" content="홈페이지의 주제목 입력">
<META name="Title" content="홈페이지의 이름 ">
<META name="description" content="웹페이지나 사이트의 설명문">
<META name="Keywords" content="웹페이지나 사이트의 주-키워드">
<META name="Author" content="웹페이지 만든사람">
<META name="Publisher" content="웹페이지의 만든단체나 회사">
<META name="Other Agent" content="관리자나 웹책임자">
<META name="Classification" content="기본 카테고리의 위치나 분류">
<META name="Generator" content="사용한 웹에디터의 종류">
<META name="Reply-To(Email)" content="사이트 메일주소 ">
<META name="Filename" content="웹페지의 파일이름">
<META name="Author-Date(Date)" content="제작자의 제작일시">
<META name="Location" content="지정학정 위치">
<META name="Distribution" content="사이트나 페이지 배포자(공급자)">
<META name="Copyright" content="저작권자의 표시">
<META name="Robots" content="ALL">:사이트내 모든것을 읽어 가도 좋다.
<META name="robots" content="index,follow" />    : 이 문서와 링크 를 긁어가고도 좋다.
<META name="robots" content="noindex,follow" />   : 이 문서는 긁어가지 말고 링크된 문서만 긁어가라.
<META name="robots" content="index,nofollow" />   : 이 문서는 긁어가고, 링크는 안됨.
<META name="robots" content="noindex,nofollow" />   : 이 문서도안되고, 링크도 안됨.



Posted by 블로그에세이-BlogEssay Dramatique

댓글을 달아 주세요



이미지 포맷 JPG,GIF,PNG

웹사이트 로딩속도와 압축율과 이미지 포맷을 알아본다.- GIF-지프-기프.
GIF 이미지의 장점은 간단히 움직이는 이미지를 만들수 있다는것과 로딩속도를 획기적으로 개선할 수 있는것이 아닌가 생각하면서 박새를 가지고 단순한 동작을 시연해 본다.
아래 움직이는 이미지는 단두장의 GIF파일로 이루어진 것 이다.



얼마전에 블로그 스킨을 손대보려다가 로딩속도 때문에 고생했다.
물론 지금도 빠른 로딩속도를 내지는 몯하지만 고생하면서 얻은 지식을 공유하려고 한다.

좋은 사진이나 이미지를 보여주고 싶은 마음과 그것때문에 느려지는 블로그 로딩(오프닝)속도는 서로 간에 잘 타협해서 조율해야한다.
나는 좀 느리드라도 좋은사진을 그대로 보여주고 싶어하는 쪽에 속한다.

웹에서 주로 쓰는 이미지 포맷은 GIF,JPG/jpeg,PNG등 많지만 최근에 많은 사용을 하는 이미지는 GIF를 시작으로 대부분의 유저들은 JPG를 사용하는 것으로 나타나며 소프트웨어 하는분들이 PNG를 많이 사용하는것으로 나타나고 있다.

로딩속도로 본다면 웹에서 가장 많은 사용을 했으며 지금도 고품질 사진이 아니라면 256컬러로서 가벼운 이미지포맷으로 많이 사용하는 이미지이다.
다만 큰 앞축율로 용량을 줄이고자 할때 GIF는 JPEG/JPG보다  압축율이 많이 떨어지지요.

앞축을 해서 가공한다면 여러가지 방법으로 압축율을 조절할수있는 JPG/JPEG가 강세이며 지금 대부분의 유저들이 사용하는 것이다.
 JPG/JPEG사진포맷을 기본적으로 사용하는 디지털 카메라 때문에도 대부분의 이미지가 JPG/JPEG포맷으로 사용되고 있으며 가장 고품질 이미지를 출력하지만 상대적으로 대용량을 나타낸다.

사진 자체의 품질을 위주로 하지 않는 단순 이미지를 대용량 JPG 풀칼러를 사용할 필요는 없을것이다.

먼저 GIF는 어떤 이미지 포맷인가 알아본다.

GIF는 Graphics Interchange Format 이라는 영문단어의 첫자를 택한 줄임말이다.
즉 비트맵 그래픽파일 포맷이라는 말인데,
1987년 컴퓨서브(CompuServe)라는 회사에서 발표하여 월드와이드 웹(WWW)에서 가장 많은 사용을 하였고 대중적인 파일 포맷임은 잘 알려진 사실이다.

이 포맷은 16비트 PC에서 당시에 화려한 색감을 자랑했던 256Color로 저장할 수 있는 비손실압축 형식의 포맷이다.
이 알고리즘은 LZW 라는 형식으로 유니시스가 그 특허를 가지고 있다.
이 GIF의 특성을 가지면서 256Color 이상을 지원하는 PNG 포맷이 나왔다.

GIF는 우리가 대부분 지-아이-에프라고 읽지만 영어권이나 개발사에서는 지프(발음:dʒɪf)나 기프(발음:ɡɪf)로 읽는데 국제화 시대에 맞춰서 참고할 일이다.
GIF 포맷의 저자는 지프라고 발표 했지만, 영어식 발음이 기프도 되기 때문에 저작자가 불러달란 뜻과 상관 없이 기프가 많이 사용되고 있다.

언듯 보기에 품질이 별로인 GIF가 사랑 받고 있는 이유는 딱 두가지라고 생각됩니다.
첫째 이유는 GIF를 사용하면 간단히 움직이는 사진을 만들어 집니다.
두번째 이유는 첨부터 이 이미지는 용량이(256컬러) 작고 전송 속도가 빠르다.

위의 두가지 중에 두번째 이유에 속하는 내용은 중요하며 지금도 사용되는 이유인데 인터넷속도가 느린 국가에서 접속한다든지 저속 인터넷을 사용하는 분들에게는 지겨운 기다림을 없애주는 알고리즘이 포함된 인터레이스(Interlace)라는 속성의 GIF기능때문이다.

인터레이스(Interlace)에 대해서 잠간 언급 한다면,
주로 웹에서 느린환경의 유저가 이미지를 불러올때에 처음부터 이미지를 다 나오게 하지않고 흐릿하게 뭉개진 이미지를 먼저 윤곽적으로나마 표시해서 지루하지 않게 유저를 달래주고(이때는 이미지의 용량이 오리지널 보다 작기때문에 속도가 매우 빠르지요.)완전한 이미지를 천천히 보여주는 방식입니다.
이것 때문에 초기 전화선 인터넷을 쓸때는 각광받게 되었으며 지금도 환경이 열악한 온라인 유저에게는 바람직한 방법일 것 입니다.

.


위의 사진처럼 천천히 흐린 사진에서 완전한 사진이 될때까지는 실제로 상당한 시간이 걸릴지라도 아무것도 안나온것과 는 상당한 심리적인 효과가 있어서 지루함을 보상 하게 되지요.

[지프 파일 두개를 연결해서 단순한 반복을 보여주는 예입니다.]

또하나의 큰 장점은 특별한 방법없이 그냥 이미지를 연속 나열함으로서 동영상 효과를 보일수 있기 때문에 간단한 움직임을 설명할때 유용한기능이 GIF의 장점 이라고 할수 있습니다.

또 큰장점은 아니지만 편리한 기능중에 아이콘이나 작은 로고이미지의 배경을 지정하기가 쉽습니다.
웹페이지의 어떤 색갈에 들어갈지 모르는 로고나 아이콘의 배경이 임의 색갈을 뛰고 있다면 사용자에게는 그 아이콘이 별로 유용하지 않을것입니다.
지프에서는 배경을 투명하게 하는기능이 있으며 임의색갈로 지정할수도 있습니다.
.


[각각 배경색을 달리하거나 투명하게 지정한 모습]

GIF가 가지는 장점은 많습니다.
그러나 단점또한 있기 때문에 시대와 더불어 사용자가 엇갈리게 된다고 봅니다.
본인은 이미지 알고리즘에 대한 실제적인 기술을 모릅니다.
다만 발표된 LZW 압축 알고리즘을 사용한다면 무손실로 데이터를 압축 한다고 하며 실제로 페인트샵이나 포토샵으로 동일한 이미지를 포맷만 바꿔서 저장하고 불러와서 확대해 본다면 두 이미지 화일의 특성이 드러날것입니다.

GIF 파일이 상대적인 기본용량이 작은것은 이미지의 정보를 저장할때 유사한  컬러단위를 만들어 그 단위를 몇개의 패키지로관리하여 저장 한다고 합니다.
그러니까 이해가 되는군요.
결과적으로 그 많은 픽셀 정보 를 저장하지 않기때문에 상대적으로 색갈 분포가 불규칙적으로 연속 변하는 많은 색상을 포함하는 이미지라면 도리어 용량이 크게 증가하는 결과를 낳게 되는군요.
256컬러로서 트루컬러인 JPEG보다 색감이 좋지 않으면서도 그라이데이션이 포함한 파일은 오히려 용량이 크게 될수도 있게 되는것입니다.

즉 표현 가능한 색상이 256컬러인데 더 많은 애매한 색상이 포함될경우 적당히 인접한 색갈에 묶어서 대체함으로 색갈 경계가 발생합니다.


이 글은 이미지 전문지식으로 쓰는 글이 아니며 일반적인 지식수준으로 공부한 내용이기 때문에 미흡한 내용이 많을것으로 생각합니다.
전문가 분 들이 보신다면 추가로 리플로 보충하신다면 더욱 감사 하겠습니다.


Posted by 블로그에세이-BlogEssay Dramatique

댓글을 달아 주세요

  1. Favicon of https://device.feeden.net BlogIcon 꼬마낙타 2010.01.14 14:53 신고  댓글주소  수정/삭제  댓글쓰기

    많은 디지털 카메라와 폰 카메라들이 jpg 포맷을 사용하고 있어서 저도 별다른일이 없으면 jpg로 쓰고 있었는데, 홈페이지를 제작하시는 분들은 거의 대부분이 gif 포맷을 사용하시더라고요.
    전송 속도의 차이가 있나봅니다. 저도 블로깅 할 때, 이미지 확장자를 gif로 저장해서 업로드 하는 습관을 들여야 겠네요. ㅎ 좋은 정보 감사합니다.

  2. Favicon of http://liquidus.tistory.com BlogIcon LiquiduS. 2010.01.15 14:03 신고  댓글주소  수정/삭제  댓글쓰기

    뭐 상황에따라 선택해서 쓰는게 답이겠죠

    근데 PNG는 여러면에서 장점들을 합쳐놓았다고 하지만 아직 웹상에서도 그렇고

    제대로 안되는곳이 많더군요..


웹사이트 최적화의 첫걸음
META TAG for SEO


웹사이트나 블로그에서 체적화 라는 말을 많이 한다.

seo 최적화

당연히 최적화된 사이트는 뜨고 그렇지 않은 사이트는 검색엔진에 노출될 확율이 낮은것은 사실이다
검색엔진이 아닌 특정 사이트나 포털에서 빅뉴스로 취급해서 상위에 게시해 주는 것 과는 개념이 다르다.

가장 바람직한 것은 트랙픽이 지속적으로 여러가지 검색엔진이 골고루 이용되는 분포로 내 사이트를 방문하는 트래픽이 발생 하는 것 이다.

그렇게 되기 위해서는 사이트의 최상위 헤드에 메타태그로 존재해야 하는 몇가지를 알아본다.
사이트 최적화의 첫글음은 충실한 메타태그를 제공해서 수많은 봇이필요로 하는 정보의 나열열이 있어야한다.

실제로 메타태그(meta tag)는 웹페이지(Web page)의 차례로도 되며 빠르고 간략한 사이트 정보를 담고 있으며 봇에게 사이트 어드민의 의도를 알릴수도 있으며 그 봇이 요구하는 최소한의 정보를 공급할수도 있다.

검색엔진 마케팅(Search Engine Marketing)이 인터넷 마케팅의 한 장르로서 그 중요성이 인정되면서 바른 메타대그의 적용을 SEO의 첫걸음으로 말하고 있다.

현재 사용되고 있으며 봇이 요구하는 태그는 어떤것이 있는가를 알아본다.

메타태그(meta tag)는 하이퍼텍스트(Hyper text) 생성 언어 HTML 문서에서 처음 만나는 위치의 태그(tag)인데 <HEAD>와 </HEAD>사이에 존재 해야 바람직하며  어떤경우에도 BODY 태그 앞쪽에 나열되어야 한다.

SEO를 위한 메타태그들의 속성은 아래와 같다.

특정엔진에서 요구하는 태그들이 있지만 전부 나열할 필요는 없으며 대개는 구글이나 야후 정도에서 요구하는 태그만 삽입 하고 있다.



구글 서치 확인:구글웹마스터센터에서 획득
<meta name="verify-v1" content="pq/HTwwnWoPsa3bTRvEExyVNAx2J2moHlmdNdQsHMHQ=" />
야후 서치확인:야후메타에서획득
<META name="y_key" content="1813effcb12a95ba" >

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />캐릭터 셋을 알려줌-웹페이지 언어
<META HTTP-EQUIV="Expire" CONTENT="-1">   : 캐쉬 완료(파기)시간 정의.
<META HTTP-EQUIV="Last-Modified" CONTENT="Sun,10 Apr 2009 10:20:10"> : 웹페이지의 최종수정일시를 말함.
<META HTTP-EQUIV='Cache-Control' CONTENT='no-cache'> :캐쉬콘트롤 함
<META HTTP-EQUIV='Pragma' CONTENT='no-cache'>   : 캐쉬를 잡지않음
<META HTTP-EQUIV="Imagetoolbar" content="no">   : 이미지의 마우스 오버시 관련 툴바정의.
<META HTTP-EQUIV="Refresh" ontent="URL=http://XXXX.net/XXX/sitemap.htm">  : 페이지의 이동
예:<META http-equiv="refresh" content="3; url=http://원하는 주소.net">
3초 후에 http://원하는 곳으로.net로 자동이동하게함.
<META HTTP-EQUIV="Page-Enter" content="RevealTrans(Duration=5/시간 초단위, Transition=21) ">  : 페이지 로딩시 트랜지션 효과(장면 전환 효과)
<META name="Subject" content="홈페이지의 주제목 입력">
<META name="Title" content="홈페이지의 이름 ">

<META name="description" content="웹페이지나 사이트의 설명문">
<META name="Keywords" content="웹페이지나 사이트의 주-키워드">
<META name="Author" content="웹페이지 만든사람">
<META name="Publisher" content="웹페이지의 만든단체나 회사">
<META name="Other Agent" content="관리자나 웹책임자">
<META name="Classification" content="기본 카테고리의 위치나 분류">
<META name="Generator" content="사용한 웹에디터의 종류">
<META name="Reply-To(Email)" content="사이트 메일주소 ">
<META name="Filename" content="웹페지의 파일이름">
<META name="Author-Date(Date)" content="제작자의 제작일시">
<META name="Location" content="지정학정 위치">
<META name="Distribution" content="사이트나 페이지 배포자(공급자)">
<META name="Copyright" content="저작권자의 표시">
<META name="Robots" content="ALL">:사이트내 모든것을 읽어 가도 좋다.
<META name="robots" content="index,follow" />    : 이 문서와 링크 를 긁어가고도 좋다.

<META name="robots" content="noindex,follow" />   : 이 문서는 긁어가지 말고 링크된 문서만 긁어가라.
<META name="robots" content="index,nofollow" />   : 이 문서는 긁어가고, 링크는 안됨.
<META name="robots" content="noindex,nofollow" />   : 이 문서도안되고, 링크도 안됨.

'컴퓨터/인터넷/네트웍/IT' 카테고리의 다른 글

파이어폭스에서 사라진글  (0) 2010.08.14
티스토리와 텍스트큐브  (4) 2010.07.20
초대장  (11) 2010.07.20
티스토리 초대장 배포 5개  (38) 2010.06.10
티스토리 초대장  (6) 2010.05.20
웹사이트 최적화의 첫걸음  (0) 2010.05.07
4월 초대장 방출 6매  (4) 2010.04.28
NEXT iPhone 은 지금 시험중?  (1) 2010.04.27
오페라 모바일 에뮬레이터.  (2) 2010.04.23
탑20 소시얼북마킹 리스트  (0) 2010.04.13
애드센스 공익광고  (0) 2010.03.06
Posted by 블로그에세이-BlogEssay Dramatique

댓글을 달아 주세요



티스토리 툴바