Facebook, Twitter, LinkedIn에서 웹 사이트 공유 가능

개발자로서 응용 프로그램에 몇 시간이 걸렸지만 원하는 데이터를 얻지 못했다는 것을 깨달았을 때 이것은 절대적으로 두려운 느낌이다.좋아, 검색엔진 최적화에 도움이 되고 적당한 방식으로 당신의 HTML을 설계한다면 반드시 그렇지는 않을 거야.나의 지난 글에서 나는 매우 실현하기 쉬운 검색엔진 최적화 방면의 문제를 중점적으로 토론했다.이 글은 현재 HTML에 설치할 수 있는 빠른 태그를 소개합니다. 이 태그들은 당신의 페이지 링크를 더욱 아름답고 쉽게 접근할 수 있습니다.

개방도

페이스북의 팀은 이른바 개방도 프로토콜(흥미가 있으면 읽으세요here을 제시했다.이것은 좋은 방식이다. 당신은 서로 다른 소셜 미디어 플랫폼에서 당신의 사이트를 공유할 수 있다.상태 업데이트에 링크를 게시할 때 페이스북과 회사가 추가한 제목, 설명, 기본 URL, 축소 그림을 쉽게 지정할 수 있습니다.
링크드 인, 페이스북, 트위터 페이지의 공백 사진은 전문적이지 않고 합법적이지 않아 보이기 때문에 이 탭들을 맞춤형으로 만드는 것이 중요하다.우리는 모두 합법적이다. 그렇지 않으면 여기서 물러난다.
좋습니다. 아래에 전시된 개방형 도형원 표시는 당신이 사용할 다양한 소셜 미디어 플랫폼에서 계승될 것입니다.

기초 지식

반드시 사용해야 하는 열린 엔티티 태그는 제목, 설명, 유형, URL과 이미지 태그를 포함합니다.React 같은 프런트엔드 프레임워크를 사용한다면 색인을 찾아야 합니다.구성 요소가 주입된 html 파일입니다.삽입할 태그는 다음과 같습니다.

<meta property="og:title" content="[...Title]" /> 
<meta property="og:description" content="[...Description goes here]"/>
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="[...website_url]" />
<meta property="og:image" content="[...website_domain]/[...image_path]" />

제목 및 설명

제목과 설명 라벨은 상당히 간단하다.만약 당신이 사이트에서 블로그 내용을 공유하려고 한다면, 이 내용을 사용하면 기본 제목과 설명에서 옮길 수 있다.

유형

형식 탭은 단지 이것이 어떤 유형의 대상인지 지정하는 데 사용되며, 우리가 React 응용 프로그램이나 사이트를 사용하는 상황에서 우리는 단지

<meta property="og:type" content="website" />

그러나 이것은 동영상, 오디오 등인지 아닌지를 지정하는 데 사용할 수 있다고 상상할 수 있다. 완전한 개방도 형식 목록here을 찾을 수 있다.

통합 리소스 포지셔닝 주소

외관상 URL 표시는 매우 간단하지만, 중요한 것은 이것이 소위 규범 URL이어야 한다는 것을 알아야 한다는 것이다이것은 최대 URL 아래에 유사하거나 관련된 페이지를 지정할 수 있음을 의미합니다.규범 URL의 용례는 같은 내용의 블로그 게시물이 있지만 별도의 URL이 있을 때입니다.또는 전자 상거래 페이지에서 내용 목록을 조회하는 페이지가 있다면, 규범화된 URL을 제공하기를 원할 것입니다.Google과 open graph가 이 예에서 일부 페이지가 동일하다는 것을 알기 위해서입니다.여러 URL의 유사한 내용이 검색엔진의 시간을 낭비했다.

형상

이 탭은 그림의 위치에 href를 지정해야 하기 때문에 나에게 가장 많은 문제를 가져왔다.

이것은 페이스북이 나의 투자조합 프로젝트를 어떻게 열 수 있는지의 예이다.제공된 코드는 다음과 같습니다.

<meta property='og:title' content="Beat Poems | Machine Poetry"/>
        <meta property='og:image' content="https://christianmkastner.com/beat-poems/src/assets/thumbnail.png"/>
        <meta property='og:description' content="Beat Poems makes your poems a little less ordinary. Input a poem and Bongo Cat will do its own spin on your material. Then let Bongo Cat read it aloud, accompanied with some sweet bongos."/>
        <meta property="og:type" content="website" />
        <meta property='og:url' content="https://christianmkastner.com/beat-poems" />

보시다시피 저는 열려 있는 모든 도형원 표시를 가지고 있습니다. 그림 표시는 기본적인 URL의 내용을 가지고 있습니다. 그림의 상대적인 위치가 있는 후에 축소판으로 사용하고 싶습니다.나는 웹팩으로 이 사이트를 만들었기 때문에 묶음 프로그램은 자산 폴더와 실제 축소 그림을 포함하는 src 폴더를 만들었다.이 탭은 축소판의 정확한 위치에 의존하기 때문에 사용자가 사용하는 내용에 의존합니다.
예를 들어React 응용 프로그램에는 실제 이미지에 사용할 이미지와 html에 사용할 아이콘을 입력할 수 있는 공공 폴더가 있습니다.이것은 도면을 열 때 사용할 축소판을 배치할 수 있는 곳입니다.
이것들은 모두 당신의 응용 프로그램이나 사이트에서 지명도와 전문성을 높이는 매우 간단한 방법이다.징그러운 것을 만드는 것은 전투의 절반에 불과하다.그것으로 하여금 사람들의 손에 들어가게 하고 흡인력을 가지게 하는 것도 마찬가지로 중요하다.
특히 이 과정을 간소화하는 데 도움이 되는 일부 도구는 개방도 개발 도구이기 때문에 공유 링크의 외관을 더욱 쉽게 볼 수 있습니다.Facebook, Twitter, LinkedIn 등 세 가지 소셜 미디어 플랫폼은 다음과 같습니다.
Facbook Debugger