5

我正在尝试在我的网页上实现一个赞按钮。标题部分包含相关的元标记：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:og="http://ogp.me/ns#"
  xmlns:fb="http://ogp.me/ns/fb#" >
<head>
<title>
What have you for the world today - Blogs by Antezen
</title>
<link rel="shortcut icon" href="/images/favicon3.ico" type="image/x-icon">
<link rel="icon" href="/images/favicon3.ico" type="image/x-icon">

<meta name="description" content="It was a sunny afternoon..&lt;br&gt;">
<meta property="og:site_name" content="Antezen" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />

<meta property="og:title" content="Beginning of a new chapter" />
<meta property="og:url" content="http://antezen.com/blogs/1" />
<link rel="canonical" href="http://antezen.com/blogs/1">
<meta property="og:image" content="http://www.antezen.com/system/pics/645/medium/photo.jpg?1337587175" />
<link rel="image_src" href="http://www.antezen.com/system/pics/645/medium/photo.jpg?1337587175">
<meta property="og:description" content="It was a sunny afternoon..&lt;br&gt;" />

<meta property="fb:admins" content="FB_ADMIN_ID" />
<meta property="fb:app_id" content="FB_APP_ID" />

在 body 标记内，我指定了 javascript sdk：

<body class='app_cont_body'>
<!-- fb JSDK -->
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    if(typeof FB != 'undefined') {
      FB.init({
        appId      : 'FB_APP_ID',
        status     : true, 
        cookie     : true,
        xfbml      : true,
        oauth      : true
      });
    }
  }

  // Load the SDK Asynchronously
  (function(d){
    var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement('script'); js.id = id; js.async = true;
      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=FB_APP_ID";
    ref.parentNode.insertBefore(js, ref);
  }(document));
</script>
....

还有一个类似 fb 的按钮，带有这样的 xfbml 代码：

<div id='fblike' class='inline'>
 <fb:like href="http://antezen.com/blogs/1" send="false" layout="button_count" width="450" show_faces="false" font="arial"></fb:like> 
</div>

但是在检查 facebook 调试器工具https://developers.facebook.com/tools/debug中的 url 时，它表明 facebook 无法抓取 og:type 标签，如 og:image、og:title 等。我们的刮板看到您的 URL 的内容，我得到以下输出：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
 <head><meta http-equiv="content-type" content="text/html; charset=utf-8"></head>
 <body>
  <p>$(document).ready(function(){
   $(".cast_container").html("\n</p>....
   ...
   ...
   </body>
   </html>

我不明白为什么 facebook 不从页面中删除元标记。请帮帮我。

4

2 回答 2

1

我用

<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/Blog" xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xmlns:fb="https://www.facebook.com/2008/fbml">
<head prefix="og:http://ogp.me/ns# anotherfeed:http://ogp.me/ns/apps/anotherfeed#">

anotherfeed 是我的应用程序的名称空间 - 例如；http://apps.facebook.com/anotherfeed/?ref=FSOF 头部前缀用于开放图，希望这会有所帮助。

于 2012-06-20T18:17:58.217 回答
0

我遇到了同样的问题，遵循以下程序

  1. 我们已经为 header.js 文件中的每个页面实现了 OGP 元标记，这些标记是从 React js 应用程序中的 CMS API 获取的。

  2. 通过使用 Inspect Element 选项，我们可以在浏览器的应用程序的标题部分中看到 OGP 元标记

  3. 无法获取第 3 方元标记工具，例如https://www.opengraph.xyz/或https://developers.facebook.com/tools/debug/工具，并且未显示在页面的“查看源代码”中我们已尝试使用 react-meta-tags 和 react-helmet npm 包但没有运气

于 2022-03-02T17:47:03.110 回答