OpenGraph linter can't find the url or can't read the meta tags - meta-tags

I have this weird error where sometimes the FB linter grabs my content but says it can't find the meta tags while sometimes it says it can't find the content at all.
I checked my apache logs and FB calls me properly both time:
69.63.181.244 - - [12/Oct/2011:11:02:07 -0700] "GET /~gilles/www/gillesdevaux/outbox/248227866689405176 HTTP/1.1" 200 8339 "-" "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)"
69.63.181.244 - - [12/Oct/2011:11:02:09 -0700] "GET /~gilles/www/gillesdevaux/outbox/248158254941601902 HTTP/1.1" 200 8104 "-" "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)"
First one the linter says I miss og:* properties, the second one the linter says the page could not be reached.
Here is the html code for both pages:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# mytest: http://ogp.me/ns/fb/mytest#">
<title>opengraph picture + link | Formspring</title>
<base href="https://testserver/~gilles/www/" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="opengraph picture + link" />
<meta name="keywords" content="" />
<meta property="fb:app_id" content="201652911907"/>
<meta property="og:title" content="opengraph picture + link"/>
<meta property="og:type" content="mytest:question"/>
<meta property="og:url" content="https://testserver/~gilles/www/gillesdevaux/outbox/248227866689405176"/>
<meta property="og:image" content="http://testserver/photos/20111011/n4e94d0e273403.jpg"/>
<meta property="mytest:link" content="http://en.wikipedia.org/wiki/Cheese"/>
Solved
FB needs to ping the URL you submit to the linter (or to the graph API) but also needs to ping the URL mentioned in og:url.
My dev setup is a bit weird, it's basic auth protected and the OpenGraph URL are whitelisted in a proxy. Using the same URL I submit for og:url fixed the issue.

add the Open Graph Protocol namespace attribute to the tag:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en" dir="ltr" xmlns:og="http://ogp.me/ns#">

Related

JavaScript unexpected token '<' while working with ejx

I am just trying to link my javascript (resides in public folder) to my ejs but it keeps showing the same message 'unexpected token <'. The script is just empty. I'm not sure what is wrong. Here is the code
<!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>Meeting</title>
<!-- using socket.io -->
<script src='/socket.io/socket.io.js' defer></script>
<!-- our custom script -->
<script src='script.js'></script>
</head>
<body>
Hello
</body>
</html>
Console error

Vue code doesn't show up with Webpack Bundle Tracker

I run both the vue and the django.
I have installed webpack_loader and have it in installed apps.
I have the WEBPACK_LOADER in settings.py
WEBPACK_LOADER = {
'DEFAULT': {
'BUNDLE_DIR_NAME': 'dist/',
'STATS_FILE': os.path.join(BASE_DIR, 'frontend', 'webpack-stats.json'),
}
}
frontend is the name when creating vue.
Here is some more details KeyError at / 'assets' and ModuleNotFoundError: No module named 'webpack_loader'
My page source from http://localhost:8000/ looks like this
<!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>QuestionTime</title>
</head>
<body>
<h1>Vue JS</h1>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="http://0.0.0.0:8080/bundle.js" ></script>
</body>
</html>
My page source from http://localhost:8080/ looks like this
<!DOCTYPE html>
<html lang="">
<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">
<link rel="icon" href="/favicon.ico">
<title>hello-vue</title>
<link href="/js/about.js" rel="prefetch"><link href="/js/app.js" rel="preload" as="script"><link href="/js/chunk-vendors.js" rel="preload" as="script"></head>
<body>
<noscript>
<strong>We're sorry but hello-vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="/js/chunk-vendors.js"></script><script type="text/javascript" src="/js/app.js"></script></body>
</html>
When I use (django-webpack-loader 1.0.0), I get KeyError at /
When I use (django_webpack-loader 0.7.0), I get no errors, but the vue code doesn't show up (But I see it at localhost:8080).
Just started to work Today, I didn't do anything, and it started to work. I tried 2 times to make a new project with the same code, downloaded all the stuff again.
Didn't work. But then my vue code suddenly stopped working. I turned the server on and off. And then I saw that my vue code had been updated.
I then went to localhost:8000 to see if it worked, and it did.
I believe that God fixed it. Not sure what else it would be.
EDIT: 8 July 2022
I happened to get the error: TypeError: expected string or bytes-like object.
It was point to {% render_bundle 'chunk-vendors' %}
The problem was that I had upgraded the django-webpack-loader to the latest version, the error went away when I use this version django-webpack-loader==0.6.0.
I tried django-webpack-loader==0.7.0 and it works as well.
The version of webpack-bundle-tracker I'm using is 0.4.3

.net core 2 angular 5 prerender failed

I'm getting the following error:
NodeInvocationException: Prerendering failed because of error: ReferenceError: window is not defined
I have followed the following documentation from microsoft themselves:
https://learn.microsoft.com/nl-nl/aspnet/core/client-side/spa/angular?view=aspnetcore-2.0&tabs=visual-studio
So the prerendering gets triggered but it fails because on the server side window does not exist ofcourse.
Now i have seen fixes for the older angular template from Visual Studio which came with Angular 4. The one from the documentation has Angular 5 and is build up a little different. So I have found fixes but they do not work because I do not have an index.cshtml. In the new template you get a normal index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test/title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="https://use.fontawesome.com/93acba991a.js"></script>
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
The solution for the first project was :
replace the "asp-prerender-module" with "asp-ng2-prerender-module"
As you can see i do not have a asp-prerender-module in there, and changing it to "asp-ng2-prerender-module" does not work for me. I'm using the #agm/core package which gives me this error, but i heard multiple packages suffer from this problem. I hope anyone has a fix for this issue.

Show the link as if it was linked to the file using htaccess

can we show the url like this using htaccess
http://www.example.com/group/goroupName
I have group.php file in the pages folder. I want to show the url like above.
I have tryed it like this rule
RewriteRule ^group/([\w-]+)/?$ pages/group.php?group_username=$1 [L,QSA]
but some included php files not displayed. For example :
<?php
include_once '../../functions/includes.php';
if(isset($_GET['group_username'])) {
$group_username=$_GET['group_username'];
include_once '../../functions/includes/get_group.php';
if(empty($group_profile_owner_id)){
header("Location:$url404");
}
}else{
header("Location:$url404");
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="theme-color" content="#8e24aa">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<title><?php echo $group_username;?></title>
<?php include("../../themes/$getTemplate/contents/style_js.php");?>
</head>
<body>
in the above code this include not displayed:
<?php include("../../themes/$getTemplate/contents/style_js.php");?>
What is the problem in my RewriteRule
Your RewriteRule is correct and should work.
Problem is with include function in PHP where you're using a relative path. Due to URL rewrite this relative path changes.
You are better off using a relative path from DOCUMENT_ROOT as:
<?php
include($_SERVER['DOCUMENT_ROOT'] . '/themes/themeName/contents/style_js.php');
?>

Use custom jquery.js with Bootfaces

I use Bootfaces version 1.1.3 and I try to provide a custom version of jquery as described here:
CSS files, JS files and CDNs
These are my first lines of my template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:b="http://bootsfaces.net/ui" xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Internet Domains</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<h:outputScript name="/reg/js/jquery-1.11.1.min.js" position="first" />
And this is what was finally generated:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><link type="text/css" rel="stylesheet" href="/reg/resources/theme.css?ln=primefaces-aristo" /><link rel="stylesheet" type="text/css" href="/reg/resources/css/other/core.css?ln=bsf" /><link rel="stylesheet" type="text/css" href="/reg/resources/css/bsf.css?ln=bsf" /><!--[if lt IE 9]><script src="/reg/resources/js/html5shiv.js?ln=bsf"></script><script src="/reg/resources/js/respond.js?ln=bsf"></script><![endif]--><script type="text/javascript" src="/reg/resources/jq/jquery.js?ln=bsf"></script><script type="text/javascript" src="/reg/resources/jsf.js?ln=javax.faces&stage=Development"></script><script type="text/javascript" src="/reg/resources/js/alert.js?ln=bsf"></script><script type="text/javascript" src="/reg/resources/js/bsf.js?ln=bsf"></script><script type="text/javascript">if(window.PrimeFaces){PrimeFaces.settings.projectStage='Development';}</script><meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Internet Domains</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<script type="text/javascript" src="/reg/js/jquery-1.11.1.min.js"></script>
I expected that the <script type="text/javascript" src="/reg/resources/jq/jquery.js?ln=bsf"></script> will be replaced by <script type="text/javascript" src="/reg/js/jquery-1.11.1.min.js"></script>. This is how I understood the documentation. But it does not happen. I can avoid including the query.js?ln=bsf useing the web.xml parameter net.bootsfaces.get_jquery_from_cdn. But I need to load jquery before Bootfaces load alert.js and bsf.js. Can anyone help me to get this working?
The algorithm recognizing the custom jquery library only checks if the filename begins with "jquery". In your case, BootsFaces 1.1.3 is confused by the folder name. I've corrected this after seeing your bug report, but the bugfix will only be available in BootsFaces 1.2.0, which today (Dec 17, 2017) hasn't been released yet (but should be released soon).
So either you try the developer preview BootsFaces 1.2.0-SNAPSHOT or you can move the jquery.js file to the root folder. Alternatively, you can add the attribute lib to specify the subfolder of the jquery.js file. Note that the latter option also means you have to put the file into the ressources folder.

Resources