링크 약사

대학으로 돌아가서 제 임무는 컴퓨터 입문 수업을 위한 HTML 사이트를 만드는 것입니다.그 중 하나는 외부 링크를 추가하는 것이다.나는 더 이상 링크가 어디를 가리키는지 기억하지 못한다. 나는 나의 고양이에 관한 사이트를 만드는 것에 대해 희미한 기억만 있을 뿐이다.
그러나 외부 링크를 만드는 것이 얼마나 쉬운지 잊지 않았습니다.

앵커 레이블<a … ></a>

href 속성

대상

나는 이 세 가지 요소와 더 많은 것을 포함하는 다른 사이트에 연결된다는 신념을 가지고 있다.그러나 인터넷의 많은 일과 마찬가지로 다른 사이트에 접속해도 좀 복잡해진다.

HTML 시대로 돌아가기

나는 나의 첫 번째 사이트의 코드를 보류하지 않았지만, 만약 내가 보류한다면 링크는 이렇게 보일 것이다.

<a href="http://www.somewebsiteaboutcats.com">Link to cats</a>

<a> 대표anchor.href 속성 (하이퍼텍스트 인용의 줄임말) 은 우리가 링크를 사용자에게 보내기를 원하는 주소와 같습니다.이 주소는 목표 주소입니다. 외부 사이트가 필요하지 않습니다.그것은 내부 링크, pdf, 전화번호, 전자 우편 주소 등이 될 수 있다.<a> 태그 사이의 텍스트는 링크의 목적지를 표시해야 합니다.
90년대와 21세기 초의 대부분 시간 동안 링크는 당신이 Fogcam 에서 본 것처럼 보였습니다. 가장 오래된 인터넷 카메라와 구식 학교 인터페이스를 유지하고 있는 사이트입니다.여기의 링크는 파란색과 밑줄입니다.내가 그 중 하나를 눌렀을 때, 그것은 이벤트를 눌렀을 때, 빨간색으로, 페이지로 돌아갈 때, 보라색으로 반짝였다.

Fogcam이 생성된 이후 링크 동작은 변경되지 않았습니다.Fogcam을 클릭하면 그 사이트로 안내될 가능성이 높다.그러나 브라우저와 방문한 사이트에 따라 링크의 외관이 달라질 수 있다.

풍격 변론

링크의 기본 동작은 누르지 않았을 때 파란색으로 표시되고, 이전에 눌렀을 때 보라색으로 표시되며, 눌렀을 때 빨간색으로 표시됩니다.클릭 여부와 관계없이 기본 링크에는 밑줄이 있습니다.
그러나 많은 사이트들이 여러 가지 이유로 이런 기본 행위를 바꾸기를 선택한다.예를 들어 본문을 작성할 때 Dev.to는 텍스트 링크에 밑줄을 긋지 않고 내가 클릭한 링크는 보라색이나 빨간색으로 변하지 않는다.
Webfx 및 Usability.gov 밑줄 링크의 필요성에 동의하지 않습니다.색상 변경부터 정지 이벤트까지 대체품 밑줄 링크가 있습니다.
밑줄 친 반대자는 underlines hurt user readability 라고 생각한다.지지자 증명convention aids accessibility.
어떤 면에서 밑줄이 그어진 링크 변론은 이미 인터넷 시대의 옥스포드 쉼표가 되었다.

링크가 검색 엔진 최적화에 어떻게 영향을 줍니까

밑줄 링크에 대한 당신의 생각이 어떻든지 간에 링크의 상대적으로 새로운 특성은 검색 엔진 최적화에서 작용하는 것이다.
Backlinks, 즉 사이트에 연결된 링크량은 검색 엔진의 최적화를 높이는 방법이다.역방향 링크를 얻는 관건은 무엇입니까?사람들이 링크하고 싶은 좋은 내용을 적어라.
그러나 좋은 내용 자체가 반드시 사용자가 그것을 연결하거나 볼 수 있다는 것을 의미하는 것은 아니다.소셜 미디어 채널을 통해 글을 홍보하고 하루 중 정확한 시간에 글을 발표한다. 사용자가 더 잘 볼 수 있을 때, 콘텐츠 공간에서 파트너 관계를 맺는 것이 역방향 링크를 늘리는 방법이다.
신뢰할 수 있는 유명 사이트와 <a> 라벨 사이의 providing meaningful content 링크도 검색 엔진의 최적화를 추진할 수 있다.

링크 및 보안

그러나 링크를 추가할 때 가장 명확한 규칙은 rel 태그와 "noreferrer noopener" 대상을 사용하는 것이다.
내가 투자조합 사이트를 구축하기 전에, 어떤 사람이 나의 프로젝트 링크를 새로운 라벨에서 열어야 한다고 건의했다.어쨌든 나는 사람들이 한 프로젝트의 토끼굴에 끌려가는 것을 원하지 않는다. 결과적으로 나의 투자조합 사이트를 찾기도 어렵다.
새 탭에서 링크를 여는 데 사용되는 HTML 속성은 target="_blank" 태그의 <a> 입니다.
그러나 단독 사용target="_blank"은 위험하며 malicious activity 창을 열 수 있습니다.
사용자를 보호하기 위해 새 탭에 링크할 때 사용rel="noreferrer noopener".
일반적으로 링크는 다음과 같습니다.

<a  href="https://linktomyproject.com"  target="_blank"  rel="noopener noreferrer"> My Project </a>

태그를 사용해도 SEO 순위에 부정적인 영향을 미치지 않습니다.

총결산

링크는 여전히 많은 사이트의 중요한 구성 부분이다.검색 엔진의 최적화는 전대미문의 중요성을 가지고 링크는 순위에 부정적인 영향을 미치거나 긍정적인 영향을 미칠 수 있다.우리가 링크한 내용, 링크의 위치와 링크를 이해하는 방식은 인코딩 인원이나 작가의 사고 과정의 중요한 구성 부분이다.

한층 더 읽다

About rel What problems does it solve?-Mathias Bynens

Designing the Perfect Hyperlink — It’s Not as Simple as You Think.-WebFX

Everything You Need to Know About rel=”noopener noreferrer” Tags: Purpose, Benefits and SEO Impact - 똑똑한 솔루션

Is the Underlined Link Hurting Readability? - UX 부스

Learn the Basics of Quality Link Building for SEO - 텍스트 흐름

Links Style Guidelines - 가독성 안내서

Should All Links be Underlined? - 가용성정부

Underlined Links-a11y 101