[HTML] sns 용 META tag
| Classic ASP에서 GUID 생성 방법 (0) | 2024.08.30 |
|---|---|
| Frontend Masters: Feature-Sliced Design (FSD) Pattern (0) | 2024.05.17 |
| [Chrome] 크롬 브라우저의 읽기 모드 (0) | 2023.08.03 |
| PHP 프레임워크: 생산성 및 품질 향상. PHP는 그렇게 나쁘지 않은데 왜 싫어할까요? (0) | 2023.08.03 |
| [HTML] details summary , jquery로 open 제어 (0) | 2023.07.14 |
rel="canonical" 링크 태그 사용
페이지 헤더에 태그를 사용하여 페이지가 다른 페이지의 중복 페이지라고 밝힐 수 있습니다.
다양한 URL로 콘텐츠에 액세스할 수 있지만 https://example.com/dresses/green-dresses를 표준 URL로 설정하고 싶은 경우 다음 단계를 사용해 이 URL이 표준 URL임을 나타내세요.
rel="canonical" 링크 요소를 사용하여 모든 중복 페이지를 표시합니다.
다음과 같이 rel="canonical" 속성이 포함된 요소를 중복 페이지의 섹션에 추가하여 표준 페이지로 연결되도록 합니다.
https://example.com/dresses/green-dresses" /> 표준 페이지에 모바일 변형 페이지가 있는 경우 rel="alternate" 링크를 추가하여 페이지의 모바일 버전으로 연결되도록 합니다.
http://m.example.com/dresses/green-dresses"> 페이지에 적합한 hreflang 또는 다른 리디렉션을 추가합니다. rel="canonical" 링크 요소에는 상대 경로보다는 절대 경로를 사용하세요.
권장되는 구조: https://www.example.com/dresses/green/greendresss.html
권장되지 않는 구조: /dresses/green/greendress.html
rel="canonical" 및 rel="alternate" 요소로 <link> 태그를 지정하여 두 URL 간의 관계를 알립니다.
사용자 에이전트 문자열을 감지하고 적절하게 리디렉션합니다.
Google 알고리즘이 별도 모바일 URL을 이해하도록 하려면 다음 사이트설정을 사용하는 것이 좋습니다.
Google에서는 이 사이트설정을 페이지 자체의 HTML에 포함하거나 사이트맵에 포함하는 등 2가지 방식을 지원합니다. 예를 들어 데스크톱 URL이 http://example.com/page-1이고 해당하는 모바일 URL이 http://m.example.com/page-1이면 사이트설정은 다음과 같습니다.
데스크톱 페이지(http://www.example.com/page-1)에 다음을 추가하고
<link rel="alternate" media="only screen and (max-width: 640px)"
href="http://m.example.com/page-1">
모바일 페이지(http://m.example.com/page-1)의 필수 사이트설정을 다음과 같이 구성합니다.
<link rel="canonical" href="http://www.example.com/page-1">
모바일 URL에서 데스크톱 페이지를 가리키는 rel="canonical" 태그는 필수입니다.
https://developers.google.com/search/mobile-sites/mobile-seo/separate-urls?hl=ko
별도 URL | 검색 | Google Developers
이 설정에서는 각 데스크톱 URL에 모바일에 최적화된 콘텐츠를 게재하는 관련 URL이 별도로 존재합니다. 일반적인 설정의 경우 데스크톱 사용자에게 게재되는 www.example.com의 페이지와 상응하는 페이지인 m.example.com에서 모바일 사용자에게 게재됩니다. Google에서는 Googlebot 사용자 에이전트가 액세스만 할 수 있다면 특정 URL을 더 선호하지는 않습니다. 별도의 모바일 URL은 다른 URL에서 다른 코드를 데스크톱과 휴대기기
developers.google.com
| jQuery - Back button Detect, reload (0) | 2019.05.14 |
|---|---|
| jQuery - URL add Hash, get Hash (0) | 2019.05.13 |
| Fiddler - 웹 디버깅 프록시 web debugging proxy (0) | 2019.04.17 |
| [javascript] www.javascripting.com JavaScript 라이브러리, 프레임 워크 및 플러그인. (0) | 2019.04.16 |
| JQUERY SELECTORS (0) | 2019.04.16 |
https://developers.facebook.com/docs/sharing/webmasters
meta 정보가 정확해야 공유하기 했을때 미리보기가 잘 나온다.
이미지가 항상 문제가 되는데, 최소 사이즈가 200x200 픽셀이다.
크게 나오는 이미지는 최소한 600x315픽셀 이상이어야 한다.
이미지관련은 아래의 링크에서 확인해보자.
https://developers.facebook.com/docs/sharing/best-practices#images
공유디버그(캐쉬 삭제, 미리보기 확인)
https://developers.facebook.com/tools/debug/sharing/
=================================
이 문서에서는 데스크톱, 모바일 웹, 모바일 앱 등 공유된 위치와 관계없이 Facebook에 공유하는 웹 호스팅된 콘텐츠를 최적화하는 방법에 대해 설명합니다.
이 문서에서는 다음에 대한 정보를 제공합니다.
대부분의 콘텐츠는 URL로 Facebook에 공유되므로, Facebook에 콘텐츠가 표시되는 방식을 관리하기 위해 오픈 그래프 태그로 웹사이트를 마크업하는 것이 중요합니다.
이러한 태그가 없으면 Facebook 크롤러에서 내부의 경험적 접근법을 사용하여 콘텐츠의 제목, 설명, 미리 보기 이미지에 대해 가장 현실성 높은 추측을 내립니다. Facebook에 게시물이 가장 최적화된 품질로 표시될 수 있도록 오픈 그래프 태그를 사용하여 이 정보를 명시적으로 지정합니다.
다음은 Facebook에 최적화되어 표시되도록 오픈 그래프 태그로 형식화된 콘텐츠의 예시입니다.
예를 들어, 다음은 og:type="article" 및 여러 추가 속성으로 기사, 뉴스 소식 또는 블로그 게시물을 마크업하는 방법입니다.
<meta property="og:url" content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" /> <meta property="og:type" content="article" /> <meta property="og:title" content="When Great Minds Don’t Think Alike" /> <meta property="og:description" content="How much does culture influence creative thinking?" /> <meta property="og:image" content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />
이 속성에는 사용자가 기사를 공유할 때 특별히 표시할 기사에 대한 설명적인 메타데이터가 포함됩니다.
다음은 모든 콘텐츠 유형에 사용해야 하는 가장 기본적인 메타 태그입니다.
| 태그 | 설명 |
|---|---|
| 페이지의 표준 URL입니다. 세션 변수, 사용자 식별 매개변수 또는 카운터가 없는 그대로의 URL이어야 합니다. 이 URL의 좋아요 및 공유는 이 URL에서 집계됩니다. 예를 들어, 여러 버전의 페이지에서 좋아요와 공유를 집계하기 위해 모바일 도메인 URL은 표준 URL로 지정된 데스크톱 버전의 URL을 가리켜야 합니다. |
| 사이트 이름과 같은 브랜드가 없는 기사의 제목입니다. |
| 콘텐츠의 간략한 설명으로, 대개 2~4개의 문장으로 구성됩니다. 이 설명은 Facebook의 게시물 제목 아래에 표시됩니다. |
| 사용자가 Facebook에 콘텐츠를 공유할 때 표시되는 이미지의 URL입니다. 자세한 내용은 아래를 참조하고, 고품질 미리 보기 이미지를 지정하는 방법에 대해 알아보려면 모범 사례 가이드를 확인하세요. |
| Facebook 도메인 인사이트를 사용하려면 페이지에 앱 ID를 추가해야 합니다. 도메인 인사이트를 사용하면 Facebook에서 회원님의 사이트로 보내는 트래픽의 분석 결과를 볼 수 있습니다. 앱 대시보드에 앱 ID가 있습니다. |
콘텐츠 배포를 늘리고 참여를 높이기 위해 다음 두 개의 태그를 추가할 수도 있습니다.
| 태그 | 설명 |
|---|---|
| 콘텐츠의 미디어 유형입니다. 이 태그는 뉴스피드에 콘텐츠가 표시되는 방식에 영향을 줍니다. 유형을 지정하지 않는 경우 기본값은 |
| 리소스의 언어입니다. 기본값은 |
모든 표준 개체 속성은 개체 속성 참조에서 확인할 수 있습니다.
Facebook 크롤러에 마크업이 표시되는 방식을 보려면 공유 디버거에 URL을 입력합니다. 오류나 경고 외에도 크롤러가 스크랩하는 메타 태그가 표시됩니다.
디버거에서는 페이지의 스크랩도 트리거하므로, HTML에 오류가 있는 경우 디버거를 사용하여 콘텐츠를 업데이트할 수 있습니다. 자세한 내용은 개체 업데이트를 참조하세요.
콘텐츠에 오디오, 동영상 또는 위치 정보가 포함된 경우 마크업을 추가할 수 있습니다. 모든 표준 개체 속성은 개체 유형 참조를 확인하세요.
모든 콘텐츠 유형에 대해 og:video를 사용할 수 있습니다. 이 섹션에서는 추가 태그를 사용하여 Facebook에서 동영상의 모양을 최적화하는 방법을 설명합니다. Facebook에서는 mp4와 Flash 동영상을 모두 지원합니다.
og:video:url과 og:video:secure_url 태그 모두에 보안 URL을 사용하여 동영상을 뉴스피드에서 즉시 재생할 수 있게 만듭니다. 다양한 요인에 따라 동영상이 즉시 재생되지 않을 수도 있습니다.
| 메타 태그 | 설명 |
|---|---|
| 동영상의 URL입니다. 뉴스피드에서 즉시 동영상을 재생하려면 가능한 한 https:// URL을 사용해야 합니다. |
|
|
| 동영상의 보안 URL입니다. |
| 동영상의 MIME 유형입니다. |
| 픽셀 단위로 된 동영상의 너비입니다. 동영상의 필수 속성입니다. |
| 픽셀 단위로 된 동영상의 높이입니다. 동영상의 필수 속성입니다. |
| 뉴스피드에서 고품질 미리 보기를 위한 이미지를 지정합니다. |
두 개 이상의 이미지를 포함하는 콘텐츠에 이 속성 세트를 사용합니다. og:image를 가장 효율적으로 사용하는 방법에 대한 가이드는 공유 모범 사례를 참조하세요.
| 메타 태그 | 설명 |
|---|---|
| 이미지의 URL입니다. 이미지를 게시한 다음 업데이트하려면 새 이미지에 대해 새 URL을 사용합니다. 이미지는 URL을 기반으로 캐싱되며 URL이 변경되는 경우가 아니면 업데이트되지 않습니다. |
|
|
| 이미지의 https:// URL입니다. |
| 이미지의 MIME 유형입니다. |
| 픽셀 단위의 이미지 너비입니다. 이미지를 처음 공유할 때 올바르게 읽어들일 수 있도록 이미지의 높이와 너비를 지정합니다. |
| 픽셀 단위의 이미지 높이입니다. 이미지를 처음 공유할 때 올바르게 읽어들일 수 있도록 이미지의 높이와 너비를 지정합니다. |
...
| 웹앱의 미래 (The Future of Web Apps 다시 읽기) (0) | 2018.11.17 |
|---|---|
| PHP, laravel 라라벨 (0) | 2018.06.18 |
| [Chrome] Visual Inspector by CanvasFlip (0) | 2017.09.12 |
| [생활코딩] 오프라인 수업 라이브 - 작심40시간 (0) | 2017.09.01 |
| 🏃 Person Running (0) | 2017.08.30 |
