I recently posted my personal blog on linkedin. However the link only displays my name and does not have any image or details. Here is how it looks:
The offending link appears at the bottom of the image and only displays my name and the url What fields do I add or edit to make the link appear with an image and some descriptive text?
The <head> of my website looks like this:
<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>
What you're looking for is to set OpenGraph protocol (
og:)<meta>properties in your<head>.The four required properties are:
You actually already have one set for your name (
<meta property="og:site_name" content="Connor Leech">), which is why it comes through. However, you don't actually use any of the other OG information.Here's a sample utilising all four:
Don't forget to set the
"og: http://ogp.me/ns#"prefix on your<html>.Further information on how LinkedIn utilises OpenGraph can be found here.
Hope this helps! :)