There seems to be something odd in OG metadata in our website and I can't figure out what it is...
For example this page: https://en.ilmatieteenlaitos.fi/wind-energy.
Has og:image and og:title (there is some extra stuff, but they shouldn't matter)
<meta data-n-head="ssr" data-hid="og:image" property="og:image" content="https://images.ctfassets.net/hli0qi7fbbos/7aa7VLl18PM8amWiILgeCH/30be16653881211492963375de425d7b/Tuulivoimalat_Hamina_ilta_SariHartonen.jpg"> <meta data-n-head="ssr" data-hid="og:title" property="og:title" content="Wind energy - Finnish Meteorological Institute">
Previews show correctly in here: https://www.opengraph.xyz/url/https%3A%2F%2Fen.ilmatieteenlaitos.fi%2Fwind-energy/
Post Inspector shows preview incorrectly just like sharing the page in Linkedin app: https://www.linkedin.com/post-inspector/inspect/https:%2F%2Fen.ilmatieteenlaitos.fi%2Fwind-energy. Using inspector should refresh the cache, but it's not doing it.
I tested with a test page (https://cdn.fmi.fi/demos/stackoverflow/some) in different domain with same header and all worked just fine with inspector and app and everything.
Is the problem deeper in en.ilmatieteenlaitos.fi -settings since all worked fine in cdn.fmi.fi?
edit: did more testing on our beta-site so content of the page is same as in production. All worked just fine in beta-site. So my guess there is something wrong in production website's settings which is out of my comprehension. Any tips? :) We are using Contentful and AWS...
Try out this meta tags debugger tool here: https://thumbsmith.com/validator
My guess would be that maybe you need to add width / height tags for LinkedIn to pick it up
I believe the problem is oq:url. Currently it's always set to our website's mainpage. Maybe Linkedin caches stuff based on that so all shares get the same cached result. This is not the case for twitter. Not sure about other some-platforms.
I also added prefix="og: https://ogp.me/ns# to html-element's attributes. Not sure how much difference this makes.
Now Linkedin shares seem to work in our preproduction site which uses same data as production.
Related
I'm working on a Drupal 8.6 multi site installation, where every site has it's own database, and I'm having a problem where the first time a content is shared on Facebook it uses the wrong image.
The meta tag is configured right, it is something like this:
<meta property="og:image" content="https://xxxx.com/image.jpg?itok=w8tMeCC0" />
This image problem happens only at the first share and I believe it happens because the image has not been created yet at the moment of the first share.
I would like to know what I could do to force the image to be generated as soon as the content is published and if there is a way to create all the missing images.
I found this post and I'm trying to implement in a module (I never worked on Drupal before) but I don't even know how to schedule this piece of script to be executed.
Is there an existing module or setting that does that?
Thanks for any help!
Have you tried the facebook Debugger?
https://developers.facebook.com/tools/debug/
Facebook usually stores the metatags in cache during shares. What I usually do is debug the webpage at least once with the right metatags configured in the debugger and ensure the page loads correctly there.
Afterwards, the share will be loading all the assets correctly.
I've looked through just about every related question on here that I can find and none of the suggested solutions seem to resolve my problem.
I'm currently hosting a website on Amazon AWS using strictly the S3 and Route 53 tools to host a static website and re-route from a couple of different URL queries to our site. This morning I attempted to update the CSS files being used to style the webpage, as well as a bunch of new image files and some minor updates to the HTML pages, and noticed that all of my changes showed up immediately on the webpage except the changes I had made to my CSS file. I've checked, and the version of the file on the S3 is the correct/updated version, but when I attempt to use the Developer Tools in my web browser to inspect the webpage displayed, it's still showing an older version of the css file. This doesn't make any sense to me, as all of the other changes show up immediately except for this particular file. Does anyone have any thoughts on how to fix this/what could be going wrong?
NOTE: I'm not using AWS CloudFront on this webpage at all so I don't believe that any of the "invalidation" suggested elsewhere will help me. In the past, I've updated the files and seen immediate changes when loading my webpage.
You already know this is a browser cache issue - which you can clear the cache, but if you want to force everyone to automatically get the new CSS, what I usually do is add a query parameter to the file include, i.e. instead of
<link href="~/css/plugins/thickbox/thickbox.css" rel="stylesheet" />
do this:
<link href="~/css/plugins/thickbox/thickbox.css?v=1001" rel="stylesheet" />
and you can up the 1001 each time you push out an update - the browser will automatically grab the new file.
Google 'cache-busting' for other options.
I'm building a web application with the following url structure:
/ is the landing page, not angular based
/choose uses Angular, it basically contains search
/fund/<code> also with Angular, contains specific data for a certain fund
There's no problem indexing /, it's just a plain and simple html, already SEO optimized. But I need both /choose and /fund/... being crawled by Google, that's the problem.
My app uses the HTML5 mode, and we never point to the app urls using hashbangs like foo.com#!/choose, always foo.com/choose.
Also, according to Google's docs on that matter, I put <meta name="fragment" content="!"> on the head of every Angular page we have. But using "fetch as google" to inspect my site, I can't realise how Google's asking the pages for my server. I'm using Django on the backend and I built a middleware to catch _escaped_fragment_ and act on it, but Google's never sending it.
So, simply put, my questions are:
Why isn't Google fetching my urls using _escaped_fragment_?
How Google will fetch the pages?
foo.com?_escaped_fragment_=/choose
foo.com/choose?_escaped_fragment_=
According to the google specs, You should use
foo.com/choose?_escaped_fragment_=hashfragment.
But As mentioned here, you don't seem to need hashfragment and the equal sign part since your url is already mapped on your Django server side. So, get rid of it and give it a try.
Your final url should look like this: foo.com/choose?_escaped_fragment_.
Hope it helps!
I am concerned about page ranking on google with the following situation:
I am looking to convert my existing site with 150k+ unique page results to a ember app, off the route. so currently its something like domain.com/model/id - With ember and hash change - it will be /#/model/id. I really want history state but lack of IE support doesn't leave that as a option. So my Sitemap for google has lots and lots of great results using the old model/id. On the rails side I will test browser for compatibility, before either rendering the JS rich app or the plain HTML / CSS. Does anyone have good SEO suggestions with my current schema for success.
Linked below is my schema and looking at the options -
http://static.allplaces.net/images/EmberTF.pdf
History state is awesome but it looks like support is only around 60% of browsers.
http://caniuse.com/history
Thanks guys for the suggestions, the google guide is similar to what I'm going to try. I will roll it out to 1 client this month, and see what webmasters and analytics show.
here is everything you need to have your hash links be seo friendly: https://developers.google.com/webmasters/ajax-crawling/
basically You write Your whole app with hashlinks, but You have to add "!" to them, so You have #!/model/id. Next You must have all pages somewhere generated and if google asks for them, return "plain html" as described here: https://developers.google.com/webmasters/ajax-crawling/docs/getting-started
use google webmaster tools to check if Your site is crawlable.
I'm not sure if you're aware that you can configure Ember to use the browser history for the location API and keep using your pages the way they are reference now. All you need to do is configure the Route's location property
App.Router.reopen({
location: 'history'
});
See more details about specifying the location api here
I'm new to ColdFusion, have a very basic problem that's really slowing me down.
I'm making edits in a text editor and refreshing the page in web browsers for testing. Standard web dev stuff, no browser-sniffing, redirection, or other weirdness, and no proxies involved.
When I refresh the page in Chrome or Firefox, everything works fine, but when I refresh in IE7, I get a blank page. View Source shows me:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=utf-8"></HEAD>
<BODY></BODY></HTML>
That's it. While I am rendering to the transitional DTD, the real head contains a title, etc.
My development server is CF 9, production is 8. This problem has been happening in both. Seems it may only be happening on pages that are the the result of a POST action.
I've never experienced this in ASP.NET (my usual development environment) using the same browsers.
If I remember correctly, IE does not re-post forms on refresh by default. It's been a few years since I used it for more than testing. However, I also recall it giving a message like "this page has expired" or something similar, so this may not be the issue you are experiencing.
I assume you're using IIS - If so, just to make sure that you get a fresh version of the page every time, set the content expiration (under HTTP headers in the site configuration) to "immediately"
Also, clear your IE cache and cookies... And, in CF admin, un-tick the "Enable HTTP status codes" option in the main setting page.