I found so many different articles and tried to implement it, but I still can't get it working.
Google pagespeed recommends to preload few files, but I can't figure it out :/
I went ahead and updated my header.php
<head>
<!--custom preload -->
<link rel="preload" as="font" crossorigin="anonymous" href="https://allurehemp.com/allurehemp/assets/css/icons/fl-icons.woff2" >
<link rel="preload" as="style" crossorigin="anonymous" href="https://allurehemp.com/allurehemp/assets/css/fl-icons.css" >
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php wp_head(); ?>
</head>
And now i'm facing the following issue(s);
A preload for 'https://allurehemp.com/allurehemp/assets/css/fl-icons.css' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.
Any recommendation is appreciated =)
I realize this is quite delayed, but I just figured this out for my site. Maybe it will be helpful for others, if the OP doesn't need this anymore.
It's way simpler than I thought it would be. Below is what I did, and it worked. No more warning/penalty in PageSpeed Insights, and my performance score increased.
In your WP admin area/dashboard, go to Flatsome > Advanced > Global Settings (see screenshot below)
Screenshot of relevant Flatsome > Advanced > Global Settings area
Insert the following line into the 'Header Scripts' area:
<link rel='preload' href='//wp-content/themes/flatsome/assets/css/icons/fl-icons.woff2' as='font' type='font/woff2' crossorigin='anonymous'>
OTHER NOTES:
A. The link in my code snippet is relative to the site domain, so you don't need to change it and insert your domain or anything. The double slash forces the same security protocol as the origin site, so it should force load https if your site uses https (which it should).
B. This probably goes without saying, but you never know: If you're adding anything to the theme files, always use a child theme so your updates/changes don't get overwritten when you update your theme. Here's a great plugin I've used several times to create a child theme in WordPress: https://wordpress.org/plugins/child-theme-configurator/
C. The links you included in the in the header.php file didn't include the "type=" bit. I'm not certain, but this could have been the source of the problem for you.
D. I didn't add a preload link for the css file like you did because all my css is minified and combined. Also, that particular file is just a few lines anyway, so preloading likely won't make much of a difference.
Hopefully this helps! :)
Related
This issue has been posted and resolved a lot, but for some reason, I still can't share my new posts (using Wordpress) to Facebook, either directly on Facebook or using the Share plugin (by Jetpack) on my post. In both situations, it returns in a 404 not found. (with no image, no excerpt, but when clicked it redirects correctly on my post).
It worked fine few days ago.
I've made researches for few days now before asking here, and all the solutions I see didn't work for me.
I tried to use the Facebook link Debugger, a Facebook Like Fix plugin (that apparently worked for someone), debugging the link with www., adding some codes I found in articles about that etc.
I've been redirected to this post frequently (http://www.passwordincorrect.com/issue-with-sharing-wordpress-posts-to-facebook/)
After thinking a lot what could causes this issue without finding it, I even thought if it could be possible (since my posts aren't scheduled) that this happened after I changed my time zone on Windows and, Wordpress would think I posted it "earlier"?
So I finally thought it had something to do with metas, unfortunately this is still kind of a mystery for me, and since that I think my header isn't properly written.
Here is what I got when using the Facebook Debugger on a particular post that I can't share :
Critical Errors That Must Be Fixed
Bad Response Code URL returned a bad HTTP response code.
Warning
Errors That Must Be Fixed
Missing Required Property The 'og:type' property is required, but not present.
Notice
Warnings That Should Be Fixed
Inferred Property The 'og:url' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The 'og:title' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The 'og:description' property should be explicitly provided, even if a value can be inferred from other tags.
The Debugger works fine on the website itself though.
I really hope you guys could give me some advices on how to make it work. If any other details are needed, I'll be glad to add them in my post.
POST EDIT :
So I kept looking to find where my issue comes from.
For some reasons now, I can't even re-scrape informations (using FB URL debugger) for my "website.com" and my olders posts "website.com/post-that-used-to-work", even though I can see the already existing scrape informations. (unlike the recents posts, where I can't see neither existing scrape or new scrape)
According to : https://developers.facebook.com/docs/sharing/best-practices, I added all the needed metas "og:" in my header, didn't work.
It seemed like something was already calling it, so I then installed the NGFB plugin that told me there were issues with Yoast SEO and Photon (by Jetpack).
I desactivated both of them, it didn't work.
I still got these errors when trying to debugg a link on a post when tryng to re-scrape informations :
Error parsing input URL, no data was cached, or no data was scraped.
On the website itself when re-scrape :
Object at URL 'http://website.fr/' of type 'website' is invalid because a required property 'og:title' of type 'string' was not provided.
When showing existing scrape informations of a non-working post :
Critical Errors That Must Be Fixed
Bad Response Code URL returned a bad HTTP response code.
Errors That Must Be Fixed
Missing Required Property The 'og:type' property is required, but not present.
Warnings That Should Be Fixed
Inferred Property The 'og:url' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The 'og:title' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The 'og:description' property should be explicitly provided, even if a value can be inferred from other tags.
When clicking on See exactly what our scraper sees for your URL :
-Non-working post :
Document returned no data
-The website itself :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="Refresh" content="0;url=defaultsite">
<!-- FR -->
</head>
<body>
</body>
</html>
And finally my current head part :
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" <?php language_attributes(); ?>> <![endif]-->
<!--[if gt IE 8]><!--> <html <?php language_attributes(); ?>> <!--<![endif]-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="
<?php bloginfo('html_type'); ?>;
charset=<?php bloginfo('charset'); ?>" />
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="description" content="Description (changed)"/>
<meta name="author" content="Author (changed)"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta property="og:title" content="Title (changed)" />
<meta property="og:site_name" content="Site name (changed)"/>
<meta property="og:description" content="Description (changed)" />
<meta property="og:url" content="http://website.fr" />
<link rel="shortcut icon" href="<?php echo THEME_DIR; ?>/favicon.ico" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS2 Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<title><?php wp_title(); ?> - <?php bloginfo( 'name' ); ?></title>
<?php wp_head(); ?>
</head>
Everything works fine for Google+ and Twitter though.
I really hope someone could help me with my issue.
To fix the problem just visit https://developers.facebook.com/tools/debug/og/object/ and click on "Fetch New Scrape Information". Clearing your website cache beforehand is good idea.
I still have no idea why this problem appears, I am not using scheduled posts too, but this fixed my problem right away.
I know this is an old post but it took me a while to figure this out:
https://developers.facebook.com/tools/debug/og/object/
Under When and how we last scraped the URL: check the IP address.
I found it to be an IPV6 address, but my website runs only on IPV4.
The IPV6 address went to the server's default page site, which generated the 404 error, because the URL didn't give a result.
I had the same problem when i public my Wordpress post on Facebook.
Then i saw the Henry answer, and he said that the IPV6 was the problem, but the real problem is the multiple IP4 and IP6 on the DNS configuration.
I Go to my Cpanel or whatever u used to manage ur server, I deleted all the IPV4 and IPV6 that are not important for the domain.
For example, the IPV6 AAAA WWW.
The A a.
another A a, A ide.
Ones the DNS are deleted, i got to: https://developers.facebook.com/tools/debug and ran the test, finally all looks good, the preview worked include the meta tags.
This solved my problem on my domain.
In the last couple of days I have been creating a theme for my WordPress site, but suddenly I have experienced problems with it. The php files have stopped linking with the css files.
I have tried creating many different themes and have been getting the same result - a site that only looks like basic html.
Here is the coding I have been using to link them <link rel="stylesheet" href="styles.css" type="text/css" />
Does anyone have any ideas? Is anybody else having problems with their site?
P.s. Any help will be very much appreciated!! :D
You may want to try /styles.css, or ./styles.css. The "." means "up one directory level".
However, a better way to do it, would be to link to it like this:
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/styles.css" type="text/css" />
This creates a dynamic absolute path to the stylesheet.
As #rambu said below, wp_enqueue_style is the proper way to do this.
function add_my_style() {
wp_enqueue_style( 'my-styles', get_stylesheet_directory_uri().'/style.css' );
}
add_action( 'wp_enqueue_scripts', 'add_my_style' );
<script type='text/javascript' src='http://test.groundguitar.com/wp- includes/js/jquery/jquery.js?ver=1.10.2'></script>
<script type='text/javascript' src='http://test.groundguitar.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
<meta property="og:type" content="article" />
<meta property="og:url" content="" />
<meta property="og:title" content="" />
<meta property="og:site_name" content="" />
<meta property="og:locale" content="en_US" />
<meta property="og:description" content="" />
<meta property="og:image" content="" />
</head>
These are lines added by wp_head();. For some reason it adds og tags, and I can't figure out why.
I'm using the Yoast SEO plugin, but have previously used All In One SEO, and they both had og tags disabled, yet this still appeared in the header. Rest of the plugins I'm using are: Facebook Comments by Fat Panda, Contact Form 7 and Any Mobile Theme Switcher. Disabling any of them didn't remove the tags.
Could this be a leftover from a plugin used in the past, which didn't uninstall correctly, and how can I remove it, or at least find out what's causing it?
That definitely looks like something a plugin would add.
First thing I would do is check the header.php file of your theme just to make sure they are not hard coded in there, never hurts to eliminate the obvious first.
Next, do you have JetPack enabled? If so do you have it's Social Links module enabled? Those og tags might be generated from there.
Last but not least if they still are showing up you will need to turn of EVERY plugin and check, might be something that another, not so obvious plugin might be doing.
Good luck!
Yoast plugin provides Opengraph for Facebook and Twitter so that if someone shares your post/page, the desired image with custom title can forward to those social media. You can check https: //www.facebook.com/kumarsn11/posts/747660215383716 this link which redirects user to your website. Its always helpful. Read some basic info about opengraph, you will get basic idea what you are actually using. Read This https: //blog.kissmetrics.com/open-graph-meta-tags/
You can disable it by SEO-> Social-> Add Opengraph Metadata. Disable This.
but I will recommend you not to disable, but use it properly with more customization.
When you click this social icon, you can use custom title other than original or keep the same for Facebook and Twitter.
I have this code used in my WP theme:
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/images/fav.ico?<?php echo date('U'); ?>">
and not cache it, since <?php echo date('U'); ?>. My problem is, and my client reported it to me today, that the favicon stopped showing only in Chrome. I tried moving it to the root of the page, adding type, removing the "refresh" hack, changing name to favicon.ico and even adding additional link icon for PNG image. Nothing helps. Yes, I've been trying to
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/images/fav.ico?v=2">
Can someone help me with this one?
If you have messed up with the code then use plugins like http://wordpress.org/plugins/custom-favicon/
This plugin will override your theme favicon functionality and will help you with your desired result.
This should help.
This might be an easy question (hopefully) for you to answer. Not sure this is the right place to post the question, since I do not know if this is a CSS issue or a normal PHP programming issue (I know very little about PHP programming), so here goes:
I have a wordpress blog that uses three different stylesheets depending on the platform where the blog is viewed (web, ipad, iphone).
I recently made a tab on my Facebook page which opens the blog in an iframe, but it opens the web-style (default) stylesheet which is way too wide for the max width in Facebook tabs (810 px). However, the ipad-adapted stylesheet would work just fine there. I still wish to see the normal web-style view when I enter my web from outside Facebook, so it isn't an option to swith to the ipad-stylesheet as a default stylesheet.
Is there a way of passing on a parameter from the facebook tab: e.g. http://www.myblog.com/?style=facebook so that the site that shows inside the facebook tab uses the right stylesheet? I would think more people have had this problem but I have scoured the Internet for hours without knowing really what to look for. Somebody spoke about CSS selectors, but I have no clue as to how they work or how to implement them in a solution.
This is the code in the header.php that deals with the stylesheets:
<!-- Theme Styles -->
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" type="text/css" media="screen" />
<?php $disable_theme_features = of_get_option( 'disable_theme_features' ); if ($disable_theme_features['4'] == '0') { ?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style-ipad.css" type="text/css" media="screen" />
<?php } if ($disable_theme_features['3'] == '0') { ?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style-iphone.css" type="text/css" media="screen" />
<?php } ?>
Is there a way to make this happening without resorting to a complete makeover of the template? Any help would be greatly appreciated!! And sorry again if this is a noob question, that is because i am noob at PHP.
Thanks again!
You could use a PHP if statement. Such as if at the URL, then use this stylesheet.