如何将帖子的 link 显示更改为 linkedin 时间轴

Question

我最近在 linkedin 上发布了我的个人博客。但是 link 只显示我的名字，没有任何图像或详细信息。外观如下：

违规的 link 出现在图片底部，只显示我的名字和 url 我添加或编辑了哪些字段才能使 link 与图片一起显示和一些描述性文字？

我网站的<head>是这样的：

<head>
   <meta name="author" content="Connor Leech">
   <title>Connor Leech</title>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta http-equiv="cleartype" content="on">
   <meta name="MobileOptimized" content="320">
   <meta name="HandheldFriendly" content="True">
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
   <meta name="description" content="Connor is a Web Developer based near San Francisco specializing in PHP, Javascript, Serverless and Node.js">
   <meta name="keywords" content="laravel, aws, javascript, php, developer, software engineer, web development, software, node.js, serverless, lambda, san francisco, bay area, east bay, vue, vuejs, vue.js, vue 2, laravel 5, amazon web services">
   <meta name="zipcode" content="94501">
   <meta name="city" content="Alameda">
   <meta name="state" content="California">
   <meta name="country" content="United States">
   <meta name="language" content="EN">
   <meta property="og:site_name" content="Connor Leech">
   <!-- Vendor Fonts-->
   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" type="text/css">
   <link href="/bower_components/animate.css/animate.min.css" rel="stylesheet" type="text/css">
   <link href="https://fonts.googleapis.com/css?family=Yantramanav" rel="stylesheet">
   <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries--><!-- WARNING: Respond.js doesn't work if you view the page via file://--><!--if lt IE 9script(src='https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js')
      script(src='https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js')
      -->
   <link rel="alternate" href="/atom.xml" title="config.title" type="application/rss2.xml">
   <link rel="stylesheet" href="/css/main.css">
   <script type="text/javascript" async="" src="//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js"></script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="app/main" src="/js/app/main.js"></script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="app/animations" src="/js/app/animations.js"></script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="app/nav" src="/js/app/nav.js"></script>
</head>

Answer 1

您正在寻找的是在 <head> 中设置 OpenGraph protocol (og:) <meta> 属性。

四个必需的属性是：

og:标题
og:描述
og:url
og:图片

您的名字实际上已经有了一套 (<meta property="og:site_name" content="Connor Leech">)，这就是它出现的原因。但是，您实际上并没有使用任何其他 OG 信息。

这是一个使用所有四个的示例：

<html prefix="og: http://ogp.me/ns#">
<head>
  <meta property="og:title" content="My Shared Article Title" />
  <meta property="og:description" content="Description of shared article" />
  <meta property="og:url" content="http://example.com/my_article.html" />
  <meta property="og:image" content="http://example.com/foo.jpg" />
</head>

不要忘记在 <html> 上设置 "og: http://ogp.me/ns#" 前缀。

有关 LinkedIn 如何利用 OpenGraph 的更多信息，请参见 here.

希望对您有所帮助！ :)

如何将帖子的 link 显示更改为 linkedin 时间轴

How to change link display for posts to linkedin timeline

html

linkedin

hexo