I build a website using Sails js and Angularjs and I want to create facebook share button but I found a problem, it seems they cannot read my meta:og in my layout.ejs file. I am using https://developers.facebook.com/tools/debug/ but the result is :
Inferred Property The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.
Missing Properties
The following required properties are missing: og:url, og:type, og:title, og:image, og:description, fb:app_id
Here is my code
<meta property="og:title" content="Facebook Open Graph META Tags"/>
<meta property="og:image" content="https://davidwalsh.name/wp-content/themes/klass/img/facebooklogo.png"/>
<meta property="og:site_name" content="David Walsh Blog"/>
<meta property="og:description" content="Facebook's Open Graph protocol allows for web developers to turn their we">
<meta name="description" content="{{meta.metaDescription()}}">
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta name="keywords" content="{{meta.metaKeywords()}}">
<meta name="author" content="BLAH inc">
<meta name='subject' content='my subject'>
<meta name='copyright' content='BLAH inc'>
<meta name='language' content='ID-id'>
<meta name='robots' content='index,follow'>
<meta name='revised' content='Wednesday, 09-Aug-2017, 14:21'>
<meta name='abstract' content='my abstract'>
<meta name='topic' content='my topic'>
<meta name='summary' content='my summary'>
<meta name='Classification' content='Business'>
<meta name='owner' content='my owner'>
<meta name='url' content='https://www.mywebsite.com'>
<meta name='identifier-URL' content='https://www.mywebsite.com'>
<meta name='directory' content='submission'>
<meta name='pagename' content='blah'>
<meta name='category' content='blah'>
<meta name='coverage' content='..'>
<meta name='distribution' content='..'>
<meta name='rating' content='..'>
<meta name='revisit-after' content='1 days'>
<meta name='subtitle' content='..'>
<meta name='target' content='all'>
<meta name='HandheldFriendly' content='True'>
<meta name='MobileOptimized' content='320'>
<meta name='date' content='Aug. 22, 2016'>
<meta name='search_date' content='2017-05-09'>
<meta name='DC.title' content='...'>
What is my mistakes?
Related
I am trying to create my own computer language but can't get the src attribute to work. Is there a way to get the source code to "paste" to the inner text of the element?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<h1 id="p"></h1>
<space-lang src="Testing.txt">
</space-lang>
</head>
<body>
<script src="space.js">
</script>
</body>
</html>
iOS smart app banners have proven impractical in my Angular SPA. So, I've opted for a 3rd party library, ain/smartbanner.js: https://github.com/ain/smartbanner.js
Unfortunately, this breaks all of my unit tests with the following message:
Error: No options detected. Please consult documentation.
The setup instructions are simple. I've installed smartbanner.js locally, included my script and style tag the Angular way (in angular.json 'scripts' and 'styles' arrays, respectively), and added my configuration meta tags to index.html:
index.html
<!DOCTYPE html>
<html lang="en" translate="no">
<head>
<meta charset="utf-8" />
<title>my title</title>
<base href="/" />
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Start SmartBanner.js configuration -->
<meta name="smartbanner:title" content="Smart Application">
<meta name="smartbanner:author" content="SmartBanner Contributors">
<meta name="smartbanner:price" content="FREE">
<meta name="smartbanner:price-suffix-apple" content=" - On the App Store">
<meta name="smartbanner:price-suffix-google" content=" - In Google Play">
<meta name="smartbanner:icon-apple" content="https://is4-ssl.mzstatic.com/image/thumb/Purple123/v4/17/96/c5/1796c5bb-fd24-d656-81e9-1819879a6053/AppIcon-0-1x_U007emarketing-0-0-GLES2_U002c0-512MB-sRGB-0-0-0-85-220-0-0-0-6.png/230x0w.jpg">
<meta name="smartbanner:icon-google" content="http://lh3.ggpht.com/f4oX61ljZ6x8aYDELZOgxlvdUEu73-wSQ4fy5bx6fCRISnZP8T353wdaM43RO_DbGg=w300">
<meta name="smartbanner:button" content="VIEW">
<meta name="smartbanner:button-url-apple" content="https://apps.apple.com/app/id/myappstoreid">
<meta name="smartbanner:button-url-google" content="https://play.google.com/store/apps/details?id=com.myplayurl">
<meta name="smartbanner:enabled-platforms" content="android,ios">
<meta name="smartbanner:close-label" content="Close">
</head>
<body>
<app-root></app-root>
</body>
</html>
Digging into the smartbanner.js file, located HERE, I can see the error message refers to:
key: "publish",
value: function publish() {
if (Object.keys(this.options).length === 0) {
throw new Error('No options detected. Please consult documentation.');
}
Where options appears to refer to the meta attributes such as name, content, etc. So it seems something is fundamentally broken that smartbanner.js can't recognize these meta tags of mine.
Has anyone else experienced this and has anyone gotten this relatively popular 3rd party library to work with Angular?
I'm currently trying to optimize my site and load font family asynchronously
At first it was an issue with material icons like in image below
After getting rid of this issue by using webfontloader in index.html I now have this error, which hasn't been as easy to get rid of
To try and solve it I changed the CDN link <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script> to webfont.js to using npm i webfontloader and loading it locally, but the issue is still there. How can I get webfont.js to not be render-blocking?
index.html
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta charset="UTF-8">
<title>My App</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="assets/logo.ico">
<script src="../node_modules/webfontloader/src/core/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ['Material+Icons']
}
});
</script>
</head>
<body>
<app-root>
</app-root>
</body>
</html>
When I'm using sanitizer and ui-router together in a single module it's causing this error:
VM103 angular.js:9101 Parse Error: <!DOCTYPE html><html lang="en" ng-app="sbAdmin2" class="ng-scope"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> </div> </div><!-- /#wrapper --></body></html>
Here is my code in a jsfiddle.
The error occurs with this statement:
var app = angular.module('myApp', ['ngSanitize','ui.router']);
I have found this article which says to define these in separate modules.
The module name is ui.router not ui-router
I am setting Weibo like button from the guide. And receiving interesting result that code that i write in jsFiddle is working but in the browser not. So what is the problem?
<!DOCTYPE html>
<html xmlns:wb="http://open.weibo.com/wb">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--必填-->
<meta property="og:type" content="app" />
<meta property="og:url" content="应用的URL地址，请勿携带统计代码，分页网址请统一填写第一页链接" />
<meta property="og:title" content="应用的显示名称标题，不建议携带网站名称等SEO信息" />
<meta property="og:description" content="应用的文字描述，将直接显示在微博里，建议完整填写，不要重复填 写标题" />
<!--选填-->
<meta property="og:image" content="应用的显示缩略图" />
<meta name="weibo:app:full_image" content="应用的原始大图" />
<meta name="weibo:app:create_at" content="应用的创建时间" />
<meta name="weibo:app:update_at" content="应用的更新时间" />
<script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<wb:like appkey="4Q1NnV"></wb:like>
</body>
</html>
Code is OK, perhaps active content is blocked by the browser - you should check in console what is going on