I noticed a weird behaviour while testing linting Ajax URLs. A simple tech test can be found at http://jankrems.de/hashbang/#!/foo.php
When I lint http://jankrems.de/hashbang/foo.php directly, everything works fine: http://cl.ly/3f3t2c0i3M3t0x2Q1Z3l
When I lint the Ajax-Url http://jankrems.de/hashbang/#!foo.php there's some pretty strange output: http://cl.ly/3n3e0r1s122Q1L0U033k
I tried linting the Twitter hashbang-Urls and they were processed correctly. The code I used is pretty straight forward. In index.php there is a forward...
<?php
if(isset($_GET['_escaped_fragment_'])) {
Header( "HTTP/1.1 301 Moved Permanently" );
header('Location: /hashbang'.$_GET['_escaped_fragment_']);
die();
}
?>
And in foo.php I just output Open Graph tags...
<!DOCTYPE HTML>
<html prefix="og: http://ogp.me/ns#">
<head>
<meta property="og:title" content="Foo" />
<meta property="og:url" content="http://jankrems.de/hashbang/foo.php" />
<meta property="og:description" content="The foo to go to" />
<meta property="og:image" content="http://tailsmagazines.files.wordpress.com/2009/04/kitten.jpg" />
</head>
</html>
Maybe I'm just blind and missing something obvious.
Related
In my Next.js app I'm trying to insert og meta tags with dynamic content on a product page. So the content of the meta tags will change based on the product data fetched from server.
I am fetching product data using getServerSideProps and passing product data to page component as props.
export const getServerSideProps = wrapper.getServerSideProps(
store => async (context) => {
const response = await fetch(url, {
method: 'GET',
});
const data = await response.json();
return {
props: {
host: context.req.headers.host,
product: data.product
}
}
}
)
First Approach
I tried to insert meta tags directly on my product page component within <Head> component. Here meta tags even with static conetnt are not showing in page source.
const Product = ({product}) => {
return (
product ?
<>
<Head>
<title>{product.title}</title>
<meta name="description"
content={product.description}/>
<meta property="og:title" content={product.title}/>
<meta property="og:type" content="video.movie"/>
<meta property="og:url" content={`${props.host}/products/${product.slug}`}/>
<meta property="og:description" content={product.description}/>
<meta property="og:image" content={product.thumbnail}/>
</Head>
<Course/>
</> : null
);
};
Second Approach
return (
<Html lang="en">
<Head>
{/*<meta property="og:image" content="https://static.onlinevideobooks.com/abed1e5658b3ad23c38c22646968e4f2/files/media/images/2022/04/5b0645b9-ab03-4233-b5f3-86b092d4062b/conversions/cad47d2beb9143eab3d65ea4a75b0b0e-1280x720.webp" />*/}
{/*<title>your keyword rich title of the website and/or webpage</title>*/}
<meta name="description"
content="description of your website/webpage, make sure you use keywords!"/>
<meta property="og:title" content="short title of your website/webpage"/>
<meta property="og:type" content="video.movie"/>
<meta property="og:url" content="https://example.com/"/>
<meta property="og:description" content="description of your website/webpage"/>
<meta property="og:image"
content="https://example.com/image"/>
</Head>
</Html>
);
I tried inserting meta tags within <Head> in _document.js file. Here I am passing only static conetnt as I don't have dynamic data in _document.js. This time meta tags are showing up in page source and I can also preview them on facebook.
Third Approach
Then I try to insert those tag in _app.js file as I receive pageProps in this component.
Unfortunately when I pass dynamic content in meta tags like first approach, they do not show up in page source but they do when I pass static conetnt similar to second approach.
full _app.js code gist
UPDATE
As regard to my third approach, I checked once again and surprisingly I can see all meta tags in page source when inserted either with static or dynamic content in _app.js. I can preview the url when content is static but when content is dynamic I can not preview the url using either Facebook debug or Open graph
My Next.js version is 12.2.0
It's possible that the code you have in your _app.js is blocking the meta tags from being rendered. The "View page source" in browsers will not wait for client code to finish rendering. You can verify this and click "View page source" from your browser. Do you see any of the HTML you are expecting, for example do you see your meta tags and product html?
I expect that you probably don't see anything except some static HTML tags. One thing you could try is moving your use of hooks and rendering logic down into its own MainLayout component.
You can then try your first approach where you do something like this:
const Product = ({product}) => {
return (
product ?
<>
<Head>
<title>{product.title}</title>
<meta name="description"
content={product.description}/>
<meta property="og:title" content={product.title}/>
<meta property="og:type" content="video.movie"/>
<meta property="og:url" content={`${props.host}/products/${product.slug}`}/>
<meta property="og:description" content={product.description}/>
<meta property="og:image" content={product.thumbnail}/>
</Head>
<MainLayout>
<Course/>
<MainLayout>
</> : null
);
};
Where MainLayout contains all the logic you have in your _app.js. This should keep your actual _app.js free of any client side code that is blocking the meta tags from rendering.
Basically we want to utitlize Next.js static optimization and have it pre-render the meta tags for your page so that the browser and web crawlers get the data without having to wait for any client side rendering.
Hopefully this helps someone, but my issue was the placement of the <Head> tags within _app.js. For some reason, when it was nested under <Auth0ProviderWithHistory> the meta tags would not render, moving it outside of this gave me victory.
Broken
<Auth0ProviderWithHistory>
<Head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
{openGraphData.map((og) => (
<meta {...og} />
))}
<title>{pageProps.title}</title>
</Head>
<CssBaseline>
<div className="page-layout">
<NavBar />
<Component {...pageProps} />
<Footer />
</div>
</CssBaseline>
</Auth0ProviderWithHistory>
Fixed
<span>
<Head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
{openGraphData.map((og) => (
<meta {...og} />
))}
<title>{pageProps.title}</title>
</Head>
<Auth0ProviderWithHistory>
<CssBaseline>
<div className="page-layout">
<NavBar />
<Component {...pageProps} />
<Footer />
</div>
</CssBaseline>
</Auth0ProviderWithHistory>
</span>
Not sure what's going under the hood, but removing the Head tag resolves this for me.
I just put my meta tags without nesting them inside Head, and it worked.
I create a component SeoHeader to handle meta tag creation on NextJs project
import React from 'react';
import Head from 'next/head';
import { useRouter } from 'next/dist/client/router';
const SeoHeader = ({ title, description, image }) => {
const router = useRouter();
return (
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charSet="utf-8" />
<meta name="description" content={description} key="description" />
<meta property="og:type" content="website" />
<meta property="og:title" content={title} key="og:title" />
<meta property="og:description" content={description} key="og:description" />
<meta property="og:image" content={image} key="og:image" />
<meta property="og:url" content={`https://www.energici.fr${router?.asPath}`} key="og:url" />
<meta name="twitter:card" content={description} key="twitter:card" />
<meta property="og:site_name" content="Energici, l'info bien être" key="og:site_name" />
<meta
property="twitter:url"
content={`https://www.energici.fr${router?.asPath}`}
key="twitter:url"
/>
<meta
name="twitter:image:alt"
content="Energici la plateforme du bien être"
key="twitter:image:alt"
/>
<meta property="twitter:domain" content="energici.fr" />
<title>{title}</title>
</Head>
);
};
export default SeoHeader;
If I import this component on _app.js everything is going well. I can see the meta tags in html dom and if I share the link preview card is ok.
But if I share another page for example this one : https://www.energici.fr/decouvrons-la-kinesiologie
I can see the correct meta tag in html dom but if I share the link in facebook for example or if I test it here https://metatags.io/ I cannot se anything, it's like there is no meta tag.
Any idea ?
Neither the crawler for Facebook, nor the crawler for metatags.io can execute JavaScript. Any HTML tags that are inserted by client side JavaScript won't be available to them.
Googlebot can execute JavaScript, so your meta data may work for Google. The caveat is that Googlebot has to render your pages, so crawling and indexing can take weeks longer than it would otherwise.
You can solve these problems by prerendering your site. After implementing that, crawlers will see HTML with your tags and not have to run JavaScript.
I'm using HtmlAgilityPack v1.11.21 and since upgrading to .NET Core 3.1, I started to receive the following error while trying to load up a web page via URL: 'UTF-8, text/html' is not a supported encoding name. For information on defining a custom encoding, see the documentation for the Encoding.RegisterProvider method. (Parameter 'name')
I found this post 'UTF8' is not a supported encoding name, but I'm not sure where or how I'm supposed to implement:
System.Text.EncodingProvider provider = System.Text.CodePagesEncodingProvider.Instance;
Encoding.RegisterProvider(provider);
I tried placing it before calling
var web = new HtmlWeb();
var doc = web.Load(urlToSearch);
But that didn't solve the issue.
This was working fine before upgrading to .NET Core 3.1, so I'm not sure where exactly I need to implement a fix.
Any ideas would be appreciated!
Thanks!
For those asking for the url, I'd rather not share that, but here's the heading:
<!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">
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://www.somesite.com/graphics/cdn/bootstrap-3.3.4-base-and-theme-min.2.css">
<!-- Optional theme -->
<link rel='stylesheet' type="text/css" media="screen" href="http://fonts.googleapis.com/css?family=Droid+Sans:400,700">
<link rel="stylesheet" href="http://www.somesite.com/graphics/cdn/somesite-responsive.css">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="/favicon-128.png" sizes="128x128" />
<meta name="application-name" content=" " />
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="/mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="/mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="/mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="/mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="/mstile-310x310.png" />
<meta property="og:url" content="http://www.somesite.com/">
<meta property="og:type" content="website">
<meta property="og:title" content="site title">
<meta property="og:image" content="http://www.somesite.com/graphics/somesite_square_logo.png">
<meta property="og:description" content="description">
<title>site title</title>
</head>
<body>
</body>
</html>
There doesn't look like there's anything special there. Was hoping it was a .NET Core 3.1 thing...
As another measure, I've tried implementing the below but the response.Content.ReadAsStringAsync() comes back as empty.
using var httpClient = new HttpClient();
{
var response = await httpClient.GetAsync(urlToSearch);
if (response.IsSuccessStatusCode)
{
var html = await response.Content.ReadAsStringAsync();
var doc = new HtmlDocument();
doc.LoadHtml(html);
var photoUrl = doc.QuerySelector("div #headshot").ChildNodes[0].Attributes["src"].Value;
return new OkObjectResult(photoUrl);
}
}
It looks like it's not the issue with .NET Core 3.1, but with the URL you are trying to load.
.NET Core 3.1 has UTF-8 among defaults
.NET Core, on the other hand, supports only the following encodings:
[...]
UTF-8 (code page 65001), which is returned by the Encoding.UTF8 property.
[...]
I don't recall any place in HTTP Headers or in HTML where a string similar to
UTF-8, text/html
is expected.
In headers it looks like:
Content-Type: text/html;charset=utf-8
In HTML, like:
<meta charset="utf-8"/>
or
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
The page itself could show no sings of a problem in browsers, because they are quite forgiving. And your code before upgrade also could ignore the , text/html part for a ton of reasons. And the issue started to appear after upgrade... for another ton of reasons.
If you do not control the server, then you probably should load the page manually, then remove this error (", text/html") from the string and feed the result to HtmlAgilityPack
Update
Considering your update:
HTTP headers are also important. Even more. They take precedence over <meta>. Try
curl -v yourURL
Not sure about ReadAsStringAsync returning an empty string: maybe it's the same issue - wrong headers, or it may be an error in your code (as far as I know, ReadAsStringAsync doesn't really returns a string). You can try passing the HTML as static string
html = "<!DOCTYPE html>...";
doc.LoadHtml(html);
To isolate the initial issue.
As for ReadAsStringAsync you should check first if it succeeds reading other sites. I looked on the Internet... there are a lot of possibilities. Don't know what will work for you.
If the issue is with the headers. Then you can try this Is it possible to make HttpClient ignore invalid ETag header in response? or this https://stackoverflow.com/a/29426046/12610347 or this How to make HttpClient ignore Content-Length header or something else to your liking.
I have multiple image's meta tag generated by Yoast plugin, The other I have no idea, I'm trying to remove the first meta so that I can be able to get preview images when sharing the post via WhatsApp.
I have looked into the header in WordPress there is no meta tag shown when viewing the source code on browser saw multiple image meta appeared on a single post. website is benjavibe.com
Below is my header tags
<meta property="og:image" content="https://benjavibe.com/wp-content/uploads/2019/05/Usilie.jpg" />
<link rel="icon" type="image/png" href="https://benjavibe.com/wp-content/uploads/2018/08/Music-icon-300x300.png">
<meta name="description" content="Tanzania Number One Website that give you all trending Entertainment News. New Music and New Videos and Many more." />
<link rel="canonical" href="https://benjavibe.com/mo-music-ft-galatone-usilie-audio-download/" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Mo music ft Galatone - Usilie | Audio Download - BENJA VIBE MUSIC TANZANIA WEBSITE FOR INTERTAINMENT" />
<meta property="og:description" content="Tanzania Number One Website that give you all trending Entertainment News. New Music and New Videos and Many more." />
<meta property="og:url" content="https://benjavibe.com/mo-music-ft-galatone-usilie-audio-download/" />
<meta property="og:image" content="https://benjavibe.com/wp-content/uploads/2019/05/Usilie.jpg" />
<meta property="og:image:secure_url" content="https://benjavibe.com/wp-content/uploads/2019/05/Usilie.jpg" />
<meta property="og:image:width" content="768" />
<meta property="og:image:height" content="768" />
<meta property="og:image:alt" content="Mo music ft Galatone - Usilie" />
You can use the wpseo_metadesc filter to disable the meta description tag. You’ll need to add the code below to the functions.php file of your theme.
add_filter( ‘wpseo_metadesc’, ‘__return_false’ );
If you need more information about this I would recommend you to follow this blog post
Remove Yoast SEO Meta Tags
I have come with the solution to remove meta which you want to remove from header,
i hope this will helps you.
You can remove some of the header stuff with the following.
// remove unncessary header info
function remove_header_meta() {
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');
remove_action('wp_head', 'wp_generator');
remove_action('wp_head', 'start_post_rel_link');
remove_action('wp_head', 'index_rel_link');
remove_action('wp_head', 'adjacent_posts_rel_link');
}
add_action('init', 'remove_header_meta');
The default installation does not include stuff like meta keywords, so that is either a theme or plugin that you are using.
UPDATED
Please check update in the following answer
add_filter('wpseo_pre_analysis_post_content', 'mysite_opengraph_content');
function mysite_opengraph_content($val) {
return '';
}
Updated
function mysite_opengraph_content($val) {
return preg_replace("/<img[^>]+\>/i", "", $val);
}
add_filter('wpseo_pre_analysis_post_content', 'mysite_opengraph_content');
Hope this helps you.
My website has lots of seperate articles and I need a way to automatically create the OG tags for each notice.
I have filled the OG tags, but it seems wrong while testing it on FB debugger.
Code below:
<meta property="og:site_name" content="Site Name (Can be Static)"/>
<meta property="og:type" content="article"/>
<meta property="og:title" content="<?php echo $title;?>"/>
<meta property="og:description" content="<?php echo $content;?>" />
<meta property="og:url" content="http://url.com/index.php?action=show&type=<?php echo $type;?>&id=<?php echo $id;?>"/>
<meta property="og:image" content="something.php" />
<meta property="fb:admins" content="someid"/>
Notice attributes:
Title = $title
Content = $content
Notice type = $type
ID = $ID
It's all dynamic.
How to fix that??
Thanks
Have you add that line too ?
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# http://ogp.me/ns/fb/[your name space]#">
Which kind of error do you get from the Linter ?