소셜 미디어에서 앱을 예쁘고 공유 가능하게 만들기
역겨운!
해결책? 메타태그! 메타데이터를 추가하면 프로젝트를 더 쉽게 공유할 수 있을 뿐만 아니라 SERP(검색 엔진 결과 페이지)에 표시되는 방식을 제어하는 데 도움이 됩니다. 응용 프로그램을 설명하는 메타데이터는 응용 프로그램의 접근성을 높일 수도 있습니다.
메타데이터란 무엇입니까?
데이터에 대한 데이터! 데이터에 대한 이 데이터는 검색 엔진, 소셜 미디어 플랫폼 등에 대해 설명하는 데 도움이 됩니다.
태그를 추가하여 이 메타데이터를 추가합니다. 메타 태그는 자동으로 닫히며 HTML 문서에 있습니다.
우리에게 필요한 것
최소한 신청서가 필요합니다. 그러나 기본 목표가 귀하 또는 인터웹의 다른 사람이 귀하의 프로젝트를 공유할 때 애플리케이션의 모양을 제어하는 것이라면 몇 가지 URL 디버깅 도구를 여는 것이 좋습니다. 거의 모든 인기 있는 소셜 미디어 사이트에는 다음이 있습니다.
기본 사항
최소한 다음 세 가지 메타 태그가 필요합니다.
콘텐츠 유형/문자 집합
모든 종류의 템플릿을 사용 중이거나 생성기를 사용하여 애플리케이션을 빌드한 경우 기본 HTML 파일에 이미 이 태그가 포함되어 있을 가능성이 있습니다.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
이 태그를 사용하여 문서의 문자 인코딩을 지정하거나 올바르게 표시될 수 있도록 사용할 문자 세트를 브라우저에 알려줍니다. 자세한 내용은 W3Schools에서 확인하세요.
제목
다음 두 태그에는 이름과 내용이라는 두 가지 속성이 포함됩니다. 이름은 메타데이터 유형을 나타내고 콘텐츠는 해당 메타데이터의 값을 나타냅니다. (키/값 쌍을 생각하십시오.)
예를 들어:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="title" content="Dads & Diapers" />
</head>
제목 메타 태그는 매우 간단하며 HTML 헤드의 태그와 동일한 내용을 가질 수 있습니다.
설명
설명 메타 태그도 마찬가지로 간단합니다.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="title" content="Dads & Diapers" />
<meta name="description" content="A React and React
application that helps parents and caregivers find kid-
friendly public restrooms." />
</head>
그렇다면 소셜에서는 어떤 모습일까요?
Facebook과 LinkedIn에서 일부 메타데이터를 볼 수 있지만 예쁘지 않고 Twitter는 난장판입니다.
OG: 개방형 그래프 프로토콜
우리 문제에 대한 해결책은 Open Graph Protocol입니다.
The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.
다양한 오픈 그래프 속성을 가진 메타 태그를 HTML에 추가하고 Facebook(및 기타)에 애플리케이션에 애플리케이션을 표시하는 방법을 알려줄 것입니다.
이러한 모든 새 메타 태그에는 속성과 내용 속성이 있으며 속성은 열린 그래프 속성을 지정하고 내용은 해당 값을 지정합니다.
og:url
애플리케이션의 표준 URL을 지정하겠습니다.
<meta property="og:url"
content="https://dads-and-diapers.herokuapp.com/" />
og:유형
우리가 공유하고 있는 이것은 무엇입니까?! 웹 사이트가 기본값이며 안타깝게도 현재 애플리케이션에 더 좋고 구체적인 유형이 없습니다. Open Graph에서 더 많은 구조화된 속성 유형을 찾으십시오.
<meta property="og:type" content="website" />
og:제목 및 og:설명
여기에 패턴이 보이나요? 일부 소셜 미디어 플랫폼에서는 제목과 설명을 추측할 수 있지만 개방형 그래프 메타 태그를 사용하여 명확하게 하는 것이 좋습니다.
<meta property="og:title" content="Dads & Diapers" />
<meta
property="og:description"
content="Dads and Diapers helps parents of small children
find and rate public restrooms based on the availability of
changing tables. It is a React and React application built by
Liz Laffitte."
/>
og:이미지
응용 프로그램과 연결하려는 이미지를 다른 프로그램에 알리십시오. 최상의 결과를 얻으려면 1200px(너비) x 630px(높이) 이미지를 사용하십시오.
<meta property="og:image"
content="https://dads-and-diapers.herokuapp.com/Dads&Diapers.PNG" />
모두 함께
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="title" content="Dads & Diapers"/>
<meta
name="description"
content="Dads and Diapers helps parents of small children
find and rate public restrooms based on the availability o
changing tables. It is a React and React application built by Liz
Laffitte."
/>
<meta property="og:url" content="https://dads-and-diapers.herokuapp.com/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Dads & Diapers" />
<meta
property="og:description"
content="Dads and Diapers helps parents of small children
find and rate public restrooms based on the availability of
changing tables. It is a React and React application built by Liz
Laffitte."
/>
<meta property="og:image"
content="https://dads-and-diapers.herokuapp.com/Dads&Diapers.PNG" />
</head>
공유할 준비가 되었습니다!
Reference
이 문제에 관하여(소셜 미디어에서 앱을 예쁘고 공유 가능하게 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/lizlaffitte/making-your-apps-pretty-shareable-for-social-media-2flg텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
