HTML5 용 오픈 그래프 유효성 검사
내 doctype이 <!DOCTYPE html>(HTML5) 인지 확인하기 위해 Facebook의 엉뚱한 오픈 그래프 메타 태그를 얻을 수있는 방법이 있습니까?
페이스 북의 오픈 그래프 메타 태그 외에 제 문서는 완벽하게 검증됩니다.
나는 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">완전히 새로운 문제 세트를 생성하므로 사용하고 싶지 않습니다 .
다음은 문제의 유효성 검사 오류 중 하나의 예입니다.
오류 줄 11, 열 47 : 현재 요소 메타에서 속성 속성이 허용되지 않습니다.
<meta property="og:type" content="website" />
어떤 도움을 주시면 감사하겠습니다 ... 나는 며칠 동안 아무 소용이 없었습니다.
HTML5의 경우 ogp.me에 설명 된 것처럼html 요소 에 이것을 추가 하고 접두사 속성을 유지합니다 .og:
<!doctype html>
<html prefix="og: http://ogp.me/ns#">
<head>
<meta property="og:type" content="website" />
...
OP의 질문과 같은 XHTML의 경우 name속성 대신 속성을 사용하십시오 property. Facebook Lint는 경고를 표시하지만 메타 값은 여전히 인식되고 파싱됩니다.
<meta name="og:title" content="Hello Facebook" />
네 . HTML5로 확인하려면 Open Graph 문서 의 prefix속성을 추가하세요 .
<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">
<head>
<title>Valid HTML5!</title>
<meta charset="utf-8"/>
<meta property="og:title" content="">
</head>
<body></body>
</html>
위의 내용을 w3 유효성 검사기 에 복사하여 붙여 넣어 확인하십시오.
생산 준비 완료 – Apple은 apple.com 에서이 방법을 사용합니다 .
짧은 대답은 현재는 아닙니다. 다른 모든 대답은 해결 방법, 해킹 또는 단순히 미친 것입니다. 유일한 장기 솔루션은 Facebook이 유효한 HTML5 인 대체 구문을 만들어야한다는 것입니다.
"facebookexternalhit"사용자 에이전트로 Facebook을 타겟팅하도록 권장하는 사람들에게는 다른 회사가 이러한 태그로 Facebook의 리드를 따르고 있음을 기억해야합니다. 예를 들어 Google+는 선호하는 Schema.org 마크 업이없는 경우 OpenGraph 태그로 대체됩니다. 대부분의 사이트는 Schema.org 속성을 사용하지 않기 때문에 (특히 OpenGraph를 올바르게 사용하는 데 시간을 소비하는 경우)이 조언을 따르면 Google+와 같은 사이트에서 스 니펫을 향상시키는 것을 쉽게 놓칠 수 있습니다.
페이스 북이 널리 보급되어 있기 때문에 개발자가 구현 선택에 문제가 있더라도 직접 대상을 지정 하는 것은 좋은 솔루션 이 아닙니다 . Stack Overflow와 같은 사이트에서 솔루션을 찾을 때 항상 이러한 방법에 예기치 않은 결과가 발생할 수 있음을 기억해야합니다.
주요 사이트의 경우 유효성 검사를 위해 XHTML + RDFa를 사용했으며 충분히 잘 작동합니다. HTML5의 사용량이 늘어남에 따라 Facebook 팀이이 메타 데이터에 대해 유효한 형식을 수락하기 시작하기를 바랍니다.
유효성 검사에 관심이있는 이유 : 유효성 검사 는 가능한 경우 페이지의 오류를 무시하도록 가르치지 않음으로써 페이지의 오류를 경고하는 데 도움이된다는 것을 발견했습니다. 우리는 모두 브라우저에서 유효성 검사 확장 프로그램을 사용하기 때문에 페이지에 유효성 검사 오류 (또는 경고)가 있는지 즉시 파악하고이를 제거 할 수 있는지 (99 % 이상) 조사 할 수 있습니다. 이를 통해 특히 오늘날의 프린지 및 모바일 플랫폼에서 제한적인 사양 구현을 처리하는 시간을 절약 할 수 있습니다. 우리는 페이지가 유효하다는 것을 알고 있고 브라우저에서 일어나는 일이 특정 UA가 예상대로 해석하지 못할 수있는 잘못된 마크 업과 관련이 없다는 것을 알고 있기 때문에 이상한 버그가 크게 감소했습니다 .
이러한 메타 태그는 페이스 북이 페이지에서 이러한 태그를 검색 할 때만 필요합니다.
<?
if(eregi("facebookexternalhit", $_SERVER['HTTP_USER_AGENT'])){
echo '<meta property="og:type" content=xxxxxxxxxxxxx';
// continue with the other open graph tags
}
?>
상기 태그는 페이스 북이 필요로 할 때만 존재합니다. PHP를 사용한이 방법은 W3C 유효성 검사를 포함한 다른 모든 인스턴스에서 태그를 완전히 제거합니다.
1 년 이상이 지났고 우리가 가진 최선의 해결책은 일종의 서버 측 검증에서 메타 태그를 래핑하는 것입니다.
PHP에서는 다음을 수행했습니다.
<?php if (stristr($_SERVER["HTTP_USER_AGENT"],'facebook') !== false) { ?>
<meta property="og:title" content="Title of the page" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:type" content="website" />
<meta property="fb:admins" content="123456789" />
<meta property="og:image" content="http://www.example.com/images/thumb.jpg" />
<?php } ?>
정말 Facebook에서 작동합니다. 하지만 저는이 아이디어가 정말 마음에 들지 않습니다!
여기에있는 많은 답변이 구식이되었습니다. 헤더를 스누핑하거나 JavaScript를 통해 작성하지 마십시오 (프로세서가 JS를 평가하지 않을 수 있으므로).
The W3C Recommendations (Extensions to HTML5) called RDFa 1.1 and RDFa Lite 1.1 (see http://www.w3.org/TR/rdfa-lite/ and http://www.w3.org/TR/rdfa-primer/ ) have made the "property" attribute valid and conforming. In the mean time (since the older answers here) the validator http://validator.w3.org/check recognizes the attribute as valid. In addition, the Open Graph Protocol documentation, http://ogp.me/ , has been updated to reflect RDFa 1.1 (it uses the "prefix" attribute).
The W3C work has been done with input from OpenGraph and schema.org among others to resolve the kind of issue raise by this question.
In short, make sure your OG tags conform to RDFa and you are golden.
One recent solution is to register a prefix in the html or head tag:
<html prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
or
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
taken from here - sorry, page is in german...
Bad solution for the meta tags. If you wrap those in Javascript then the Facebook Linter won't find them. That's the same as not putting them in at all.
Wrapping like buttons and such in script works to help validate against XHTML 1.0 but not HTML5.
In JSP:
<%
String ua=request.getHeader("user-agent").toLowerCase();
if(ua.matches(".*facebookexternalhit.*")){
}
%>
<meta property="og:image" content="images/facebook.jpg" />
...
<%
}
%>
Or:
<c:set var="ua" value="${header['User-Agent']}" scope="page"/>
<c:if test="${ua.matches('.*facebookexternalhit.*')}">
<meta property="og:image" content="images/facebook.jpg" />
...
</c:if>
Well, Visual Studio 2011 tells me that the "property" attribute is invalid. However, the W3C seems to be a little more lenient:
http://validator.w3.org/check?uri=http%3A%2F%2Fpacificfoods.com%2F
You'll notice that that I added Open Graph tags per Facebook's recommendation to that site, and it does not break the W3C validator, which I consider to be authoritative.
Consulting the official W3C HTML5 specification for the meta tag, it is clear that the use of the "property" attribute (in lieu of the "name", "http-equiv", "charset", or "itemprop" attributes) is not valid. However, their validator validates it (???). I have no explanation for this discrepancy.
I would be inclined to say don't worry about validation, I don't believe having invalid mark up will hurt your search engine ranking. e.g. googles technical recommendations do not mention standards. http://www.google.com/support/webmasters/bin/answer.py?answer=35769#2 . Html5 allows you provide more information to search engines which they can then use, but I can't see them down ranking based on not validating.
However if you feel it helps you to validate you can use
<script>document.write('<meta property="og:type" content="website" />')</script>
to have these tags present and have a html file that will pass validators.
Although it will cut off non-Javascript users, I've used this
<script type="text/javascript">
//<![CDATA[
document.write('<fb:like href="" send="false" layout="button_count" width="100" show_faces="true" font=""></fb:like>')
//]]>
</script>
and it validated perfectly. It shows and works fine with Firefox, Opera, IE, Chrome, Safari on Windows, and with Firefox, Opera, Safari on Mac.
참고URL : https://stackoverflow.com/questions/6501189/open-graph-validation-for-html5
'developer tip' 카테고리의 다른 글
| VBCSCompiler.exe의 수많은 인스턴스 (0) | 2020.12.13 |
|---|---|
| node.js에 사용할 수있는 MySQL 드라이버는 무엇입니까? (0) | 2020.12.13 |
| jQuery가 포함 된 HTML5-e.offsetX가 Firefox에서 정의되지 않음 (0) | 2020.12.13 |
| 업로드하기 전에 브라우저에서 이미지 자르기 (0) | 2020.12.13 |
| CSS 변환이 인라인 요소에서 작동하지 않습니다. (0) | 2020.12.13 |