如何在 localhost 上测试打开的图形

Posted 2023-02-19

【中文标题】如何在 localhost 上测试打开的图形

【英文标题】：how to test open graph on localhost

【发布时间】：2012-01-24 02:07:37

【问题描述】：

我已经做了很多研究，但还没有找到明确的答案。无论如何要测试本地主机上的开放图吗？我在 locahost 上使用图形 api 没有任何问题。

我已经在应用程序设置中更改了我的网站 url，甚至尝试在我的主机文件中设置一个域，但是打开图形的调试器 linter 尝试使用实际域而不是我的本地主机，并且当直接使用 locahost 时 linter完全无法连接。

有人对此有任何解决方法吗？

【问题讨论】：

你解决过这个问题吗？ @大卫B

【参考方案1】：

您必须设置一个指向您的公共 IP 地址的公共域。 使用 dynes.org 或类似服务并设置您的路由器以转发您的端口 80。

【参考方案2】：

我使用了一个名为ProxyLocal 的免费工具，它可以让公众访问我的本地服务器。

查看本指南以了解其他代理替代品http://devblog.avdi.org/2012/04/27/http-forwarding-services-for-local-facebook-development/

【讨论】：

proxylocal.com 不是 Facebook 的有效网址

我使用 Proxylocal，它适用于测试 ogtags。调试器：developers.facebook.com/tools/debug/og/object

链接不可用

【参考方案3】：

您可以使用多种工具通过本地主机提供服务，每种工具都具有不同程度的功能。

我更喜欢（显然）http://forwardhq.com

其他不错的选择：http://devblog.avdi.org/2012/04/27/http-forwarding-services-for-local-facebook-development/

【参考方案4】：

您可以使用ngrok 创建一个随机的公共子域，该子域可以非常轻松地路由到您的本地网络服务器，甚至可以通过 NAT 或防火墙。

只需下载 ngrok 并运行 ./ngrok http 8080（假设 8080 是您的本地网络服务器 http 端口）。

这将创建一个随机子域，例如 http://38a84a97.ngrok.io/，该子域路由到您的本地网络服务器，并且您可以使用 Facebook 来测试您的开放图形标签。

【讨论】：

这似乎不起作用。使用 ngrok URL 并在打开的图形调试器上仍然得到“解析输入 URL 时出错，没有数据被缓存，或者没有数据被抓取”。

您是否尝试过点击获取新的抓取信息按钮？

这似乎也不起作用。它只是获取 ngrok url

它曾经对我有用，但不再适用。我知道这是什么问题

Ngrok 不适用于 fb 爬虫检查：github.com/inconshreveable/ngrok/issues/427

【参考方案5】：

使用本地代理是正确的解决方案。 ngrok 也不适合我。

与 facebook 调试器一起使用的类似工具是 localtunnel ✅

npm install -g localtunnel
lt --port 8000

生成一个类似于https://<random_hash>.localtunnel.me/ 的网址。截至 2017 年 10 月 18 日，在 facebook 开放图形调试器中使用此 url 为我工作。我只需要点击 Fetch new scrape information 按钮。 ?

localtunnel 很酷的一点是，您可以轻松地使用 github.com/localtunnel/server 托管您自己的 localtunnel 服务器，因此如果它停止使用 localtunnel.me，您可以在云中的某个地方运行自己的服务器 ⛅

【讨论】：

效果很好。在我的情况下，该命令需要是“lt -p 8000”。

+1。当 ngrok 不支持时，这对我有用（请参阅此处的 ngrok 问题：github.com/inconshreveable/ngrok/issues/427）。在我的例子中，我使用 Windows PowerShell 作为管理员。

我回来了，希望我能再次投票。 Windows PowerShell 作为管理员甚至适用于 Laravel Homestead 项目；只需 cd 到项目文件夹，然后 lt --port 8000。控制台中生成的 URL 对我有用。 （尝试以管理员身份打开 Git Bash 并在 Homestead Vagrant 框中安装 npm 对我不起作用。）

默认本地隧道主机此时似乎已关闭，因此可能值得尝试lt -h "http://serverless.social" -p PORT。

【参考方案6】：

使用 插件 在任何本地环境中使用 Chrome 或 Firefox 测试 Open Graph 非常简单。我使用了一个在 chrome 中快速显示 Open Graph 如何在查看器中显示以测试结果。这是它的作用的引述。

此扩展程序显示人们将如何在最受欢迎的网站中看到您的网站 社交网络 此扩展适用于创建 媒体内容。

要查看您网站或文章的元信息，只需在 Chrome 并单击扩展程序的图标。您也可以手动添加 URL。

Here is a direct link to the plugin (Chrome)Firefox add-on

【讨论】：

请不要只发布一些工具或库作为答案。至少在答案本身中展示how it solves the problem。

我仍然认为这不值得反对。这是使用 *** 的问题，毕竟，如果您的答案明显正确并且您无论如何都被否决了，那么提供帮助是没有意义的。

请注意：我没有投反对票，但插件链接通常被社区视为垃圾邮件，因为大多数插件作者会路过并留下他们自己的插件，并使网站混乱（如果链接死了，答案将变得毫无用处）。

+1 这个插件很棒，解决了 OP 的问题。对不起@FrankerZ，它几乎不需要任何解释，因为它很容易使用......！

Chrome 链接失效

【参考方案7】：

为了测试开放图（和 Twitter 卡片），我还必须将 localhost (Docker) 暴露给 Facebook 和 Twitter。我用Serveo

它对此非常有效，无需安装任何东西，因为它可以与 ssh 端口转发一起使用。

$ ssh -R 80:localhost:3000 serveo.net

然后导航到给定的网址，然后就可以了。

【讨论】：

我无法访问该网址。它给了我空白页

Serveo 似乎因网络钓鱼问题而下线：/

【参考方案8】：

如果有人希望在 localhost 中开发子域（使用 lvh.me）时预览 :og 标签。您可以使用https://serveo.net。 只需使用以下命令来转发您的本地服务器请求。无需安装。

ssh -R yoursubdomain.serveo.net:80:yoursubdomain.lvh.me:3000 serveo.net

你可以把你想要的端口代替3000。

参考：https://blog.aarvy.me/2019/09/20/expose-local-apps-having-subdomains-to-web/

【参考方案9】：

作为一种更简单的方法，您可以使用像https://socialsharepreview.com/browser-extensions 这样的浏览器扩展程序 - 它会直接在浏览器中显示您的社交卡（如果您错误地没有在服务器端设置它们当然可能会失败:)）