Streaming live at 10am (PST)

Outlook email does not display Open Graph image


#1

So I have set Open Graph info for each page since it is no longer an option to set in the general SEO setting. Issue is that none of it seems to be working. I have cleared my cache as well.I also tried in the new office 365 mail and the text shows but no image

https://preview.webflow.com/preview/element-parkcity?preview=dcbb806473148a487388e57919b75ea0

Here is what it looks like on mail


works on facebook but not mail


#2

Open graph looks good https://developers.facebook.com/tools/debug/sharing/?q=http%3A%2F%2Felementparkcity.com%2Fbites-portfolio

Seems like it's a problem on Outlook's end.


#3

no it can't be as mail works for other peoples sites..see below my site still does not show a picture but the other site does


#4

Then it's not an open graph issue. Outlook email does not use open graph image. It finds the first image on the page itself and displays that instead.

See

https://support.office.com/en-us/article/Add-a-link-to-an-email-using-Link-Preview-in-Outlook-com-or-Outlook-on-the-web-ebbfd8ce-d38e-40ef-bb8c-a5362e881163

Link preview will automatically go to the destination URL and provide the site's name, description, and thumbnail (if there is one available) in the email.


#5

seems by that info that it is not finding the thumbnail.... why would it work for other sites and not my webflow site it pulls a partial display but not OG image


#6

also it seems to work when I type in the webflow url into mail 365 so I am still not sure why mine is not pulling the image


#7

I figured it out by looking for a webflow site that had a working link. I needed to add custom code to the head

<style>
/* Base */

#awwwards{
	position: absolute;
	bottom: 20px;
	width: 90px;
	height: 135px;
	text-indent: -666em;
	overflow: hidden;
	z-index: 999;

	-webkit-transition: all 1s ease;
    transition: all 1s ease; 
}
#awwwards.top{
	top: 0;
}
#awwwards.left{
	left: 0;
}
#awwwards.right{
	right: 0;
}

#awwwards a{
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 90px;
	height: 135px;
	background-repeat: no-repeat;
	background-size: 90px 135px;
}

/* HONORABLE */

#awwwards.sotd.white.right a{
	background-image: url(https://s30.postimg.org/42v5ue5nh/awwwards_sotd_white_right.png);
}

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2),	only screen and (min-device-pixel-ratio: 1.5) {
#awwwards.sotd.white.right a{
		background-image: url(https://s30.postimg.org/4453nt7h9/awwwards_sotd_white_right_2x.png);
	}
}
</style>

#8

Perhaps it already cached an old version of your website when it was published without any images.

I suggest you contact Outlook support to clear the cache for your website.

Alternatively, you can wait until their cache is auto-cleared. However, we do not know what is the duration (it can be from a day to a year, or never automatically).


#9

well now I am a liar

It works when I use the http://element-parkcity.webflow.io/ site but not the real live site http://www.elementparkcity.com/


#10

also i have tried clearing the cache for all eternity


#11

Not clear your local browser cache. Clear the cache on Microsoft's servers so that they fetch your updated website and look for an image again.


#12

I have no idea how to do that...do I just have google crawl the page again?


#13

Here is my post again:


#14

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.