I have a website that I am trying to get the twitter cards working correctly. It is a wordpress site which has a next.js frontend, and is using Nginx on the server. When I a post through the card validator it returns with an error.
Twitter Validator
I then also return a curl command to check that the twitter bot can correctly get the meta data. I can see from this, that the bot is only getting the meta data from the _document.js file and not from the section on all other pages.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="/favicon.ico" />
<link rel="manifest" href="/manifest.json" />
<link href="/favicon-16x16.png" rel="icon" type="image/png" sizes="16x16" />
<link href="/favicon-32x32.png" rel="icon" type="image/png" sizes="32x32" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta name="next-head-count" content="2" />
<link
rel="preload"
href="/_next/static/css/ce6720bdf00aa316b9de.css"
as="style"
/>
<link
rel="stylesheet"
href="/_next/static/css/ce6720bdf00aa316b9de.css"
data-n-g=""
/>
<link
rel="preload"
href="/_next/static/css/c67361c671360a827233.css"
as="style"
/>
<link
rel="stylesheet"
href="/_next/static/css/c67361c671360a827233.css"
data-n-p=""
/>
<noscript data-n-css=""></noscript>
<link
rel="preload"
href="/_next/static/chunks/webpack-50bee04d1dc61f8adf5b.js"
as="script"
/>
<link
rel="preload"
href="/_next/static/chunks/framework.399b4f594eb85e2c7155.js"
as="script"
/>
<link
rel="preload"
href="/_next/static/chunks/1419e7c30131797e0fc31b1630dbae06c77794db.ba3949158633ebe9c5a3.js"
as="script"
/>
<link
rel="preload"
href="/_next/static/chunks/main-fe81cbc1861fb071cce5.js"
as="script"
/>
<link
rel="preload"
href="/_next/static/chunks/c87c33889d5e702d0d23a0ac9d179b8229df78cc.0ad8742fa39b9126fe32.js"
as="script"
/>
<link
rel="preload"
href="/_next/static/chunks/pages/_app-63aaead50ac6d4e21b30.js"
as="script"
/>
<link
rel="preload"
href="/_next/static/chunks/093c66d9a9a99ec0f04b090d98888b980e7d4b8e.c090a2f382e767ada649.js"
as="script"
/>
<link
rel="preload"
href="/_next/static/chunks/7ce7f652127e6c5a7d080638329229dc579ea2a1.06812040a0a5c36b103f.js"
as="script"
/>
<link
rel="preload"
href="/_next/static/chunks/43fae0486030070d6c945758af97867a73878e81.3062007570e55c93df40.js"
as="script"
/>
<link
rel="preload"
href="/_next/static/chunks/pages/magazine-e73418f658e910aaa297.js"
as="script"
/>
</head>
How can can I get the twitter bot to correctly get the meta data from the normal pages?
Here is how i am adding meta data to one of the pages.
<Head>
<title>MTDCNC | {this.props.news[0].title.rendered}</title>
<meta property="og:type" content="website"/>
<meta name="description" content={this.stripMeta(this.props.news[0].content.rendered)}/>
<link rel="canonical" href={`https://mtdcnc.com/news/${this.props.news[0].author_meta.user_nicename}/${this.props.news[0].slug}`} />
<meta name="twitter:title" content={this.props.news[0].title.rendered} />
<meta name="twitter:description" content={this.stripMeta(this.props.news[0].content.rendered)} />
<meta name="twitter:image" content={this.props.news[0].featured_image} />
<meta name="twitter:site" content="#mtdcnc" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:title" content={this.props.news[0].title.rendered}/>
<meta name="keywords" content="Engineering"/>
<meta property="og:url" content={`https://mtdcnc.com/news/${this.props.news[0].author_meta.user_nicename}/${this.props.news[0].slug}`}/>
<meta property="og:description" content={this.stripMeta(this.props.news[0].content.rendered)}/>
<meta property="og:image" content={this.props.news[0].featured_image}/>
</Head>
And here is how i am getting the initial props.
async getInitialProps({query,res}) {
const slug = query.slug
const response = await axios.get(`${process.env.REACT_APP_BASE_API_URL}/wp-json/wp/v2/review?slug=${slug}`)
if(response.data[0]) {
return {
news: response.data,
review:true
}
} else {
const response = await axios.get(`${process.env.REACT_APP_BASE_API_URL}/wp-json/wp/v2/posts?slug=${slug}`)
if(response.data.length < 1 ){
const response = await axios.get(`${process.env.REACT_APP_BASE_API_URL}/wp-json/wp/v2/capacity?slug=${slug}`)
return {
news: response.data,
review:false
}
}else{
return {
news: response.data,
review:false
}
}
}
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="/assets/css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="/assets/css/bootstrap-theme.css" rel="stylesheet" type="text/css"/>
<script src="/assets/js/jquery-2.1.4.min.js"></script>
<script src="/assets/js/bootstrap.min.js" rel="script"></script>
<script src="/assets/js/bootstrap.js"></script>
<link href="/assets/css/style.css" rel="stylesheet" type="text/css"/>
<title>
Title
there is no error , but when i run program , css and script don't run and in view source when i click on link, i get 404 error
External CSS can not load on Internet Explorer 7, 8, 9, 10, 11. How can I resolve it?
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
I moved the wordpress to a subdomain. However, after copying it over, I realise that my header is different from the original site.
my head.php looks like this:
<!doctype html>
<html class="no-js" <?php language_attributes(); ?>>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><?php wp_title('|', true, 'right'); ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
<link rel="alternate" type="application/rss+xml" title="<?php echo get_bloginfo('name'); ?> Feed" href="<?php echo esc_url(get_feed_link()); ?>">
<link href='http://fonts.googleapis.com/css?family=Maven+Pro:500,700' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/favicon.ico?v=2">
</head>
The new header looks like this:
<html class="no-js" lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="alternate" type="application/rss+xml" title="example » about Comments Feed" href="http://example.com/about/feed/" />
<script type="text/javascript">
window._wpemojiSettings = {"baseUrl":"http:\/\/s.w.org\/images\/core\/emoji\/72x72\/","ext":".png","source":{"concatemoji":"http:\/\/example.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.2.9"}};
!function(a,b,c){function d(a){var c=b.createElement("canvas"),d=c.getContext&&c.getContext("2d");return d&&d.fillText?(d.textBaseline="top",d.font="600 32px Arial","flag"===a?(d.fillText(String.fromCharCode(55356,56812,55356,56807),0,0),c.toDataURL().length>3e3):(d.fillText(String.fromCharCode(55357,56835),0,0),0!==d.getImageData(16,16,1,1).data[0])):!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g;c.supports={simple:d("simple"),flag:d("flag")},c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.simple&&c.supports.flag||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))} (window,document,window._wpemojiSettings);
</script>
<style type="text/css">
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
</style>
<link rel='stylesheet' id='roots_css-css' href='http://example.com/wp- content/themes/example/assets/css/main.min.css?' type='text/css' media='all' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://example.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://example.com/wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 4.2.9" />
The old header looks like this:
<html class="no-js" lang="en-US">
<head><link rel="stylesheet" type="text/css" href="http://example.com/wp-content/cache/minify/000000/M9AvKUrMzEstSk7NydFPLC5OLSnWTy4u1s8FigIA.css" media="all" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="alternate" type="application/rss+xml" title="example » about Comments Feed" href="http://example.com/about/feed/" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://example.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://example.com/wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 4.1.12" />
so I realised that the old codes have
<link rel="stylesheet" type="text/css" href="http://example.com/wp-content/cache/minify/000000/M9AvKUrMzEstSk7NydFPLC5OLSnWTy4u1s8FigIA.css" media="all" />
While the new one has
<link rel='stylesheet' id='roots_css-css' href='http://example.com/wp- content/themes/example/assets/css/main.min.css?' type='text/css' media='all' />
When I debug it, from the new one shows:
Replaced JavaScript files:
1. //ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
But the old one shows:
Replaced CSS files:
1. wp-content/themes/example/assets/css/main.css
Replaced JavaScript files:
1. wp-content/themes/example/assets/custom/modernizr.custom.js
2. //ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js
3. wp-content/themes/example/assets/js/scripts.js
Which comes up with an error 404 page cannot be found. If I go to that page and remove min from the url, then i would find the file.
I am not sure how minify works, and i dont know how to get it to work on my cloned wordpress. help! I am using W3 Total Cache
PS why is there img.emoji? why did it suddenly appear in my cloned version?
functions.php
<?php
$roots_includes = array(
'lib/utils.php', // Utility functions
'lib/init.php', // Initial theme setup and constants
'lib/wrapper.php', // Theme wrapper class
'lib/sidebar.php', // Sidebar class
'lib/config.php', // Configuration
'lib/activation.php', // Theme activation
'lib/titles.php', // Page titles
'lib/nav.php', // Custom nav modifications
'lib/gallery.php', // Custom [gallery] modifications
'lib/scripts.php', // Scripts and stylesheets
'lib/extras.php', // Custom functions
);
foreach ($roots_includes as $file) {
if (!$filepath = locate_template($file)) {
trigger_error(sprintf(__('Error locating %s for inclusion', 'roots'), $file), E_USER_ERROR);
}
require_once $filepath;
}
unset($file, $filepath);
EDIT: add in functions.php
EDIT: Added debug info
My css work fine in main page of my site but im facing a problem in the other page.
inside the views there is a Welcome_message.php inside of it is my css links..
in my views folder i have a folder named templates, inside it there are a header.php, main_nav.php and footer.php
in my controller folder there are 2 php files named Welcome.php which is the default_controller that set inside the routes.php and the staff.php that the css wont work.
i have also a folder inside the views that name staff folder. inside of it i have a staff-body.php
here is my code in controller staff.php
class staff extends CI_Controller {
public function index()
{
$this->load->helper('html');
$this->load->helper('url');
$data['title'] = 'NMSC Online Library';
$this->load->view('welcome_message', $data);
$this->load->view('templates/main_nav');
$this->load->view('templates/header');
$this->load->view('templates/footer');
}
}
in my views/welcome_message.php code
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo $title ?></title>
<meta name="description" content="Multi-Level Push Menu: Off-screen navigation with multiple levels" />
<meta name="keywords" content="multi-level, menu, navigation, off-canvas, off-screen, mobile, levels, nested, transform" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="<?php base_url();?>icj/css/normalize.css"/>
<link rel="stylesheet" type="text/css" href="<?php base_url();?>icj/css/demo.css"/>
<link rel="stylesheet" type="text/css" href="<?php base_url();?>icj/css/icons.css"/>
<link rel="stylesheet" type="text/css" href="<?php base_url();?>icj/css/component.css"/>
<link rel="stylesheet" type="text/css" href="<?php base_url();?>icj/css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="<?php base_url();?>icj/css/my_style.css"/>
<link rel="stylesheet" type="text/css" href="<?php base_url();?>icj/css/table.css"/>
<link rel="stylesheet" type="text/css" href="http://www.w3schools.com/lib/w3.css"/>
</head>
in first run in my mainpage its work will with my css but when i click the button that link in the staff.php in controller, only the text show not the css.
In view create file call header.php. Inside that place
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo $title ?></title>
<meta name="description" content="Multi-Level Push Menu: Off-screen navigation with multiple levels" />
<meta name="keywords" content="multi-level, menu, navigation, off-canvas, off-screen, mobile, levels, nested, transform" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="<?php base_url();?>icj/css/normalize.css"/>
<link rel="stylesheet" type="text/css" href="<?php base_url();?>icj/css/demo.css"/>
<link rel="stylesheet" type="text/css" href="<?php base_url();?>icj/css/icons.css"/>
<link rel="stylesheet" type="text/css" href="<?php base_url();?>icj/css/component.css"/>
<link rel="stylesheet" type="text/css" href="<?php base_url();?>icj/css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="<?php base_url();?>icj/css/my_style.css"/>
<link rel="stylesheet" type="text/css" href="<?php base_url();?>icj/css/table.css"/>
<link rel="stylesheet" type="text/css" href="http://www.w3schools.com/lib/w3.css"/>
</head>
and in controller
$this->load->view('templates/header');
$this->load->view('templates/body');
$this->load->view('templates/footer');
There is an order to be load view.
Head of page
Body of page
Tail of the page