When i Using The Persian (UTF) in Bracket Show Me Like This .
This My Text in Bracket :
<h1>سلام این ایت منه</h1>
This Show Me in google Chrome
سلام این ایت منه
add this line inside your html <head></head> tag.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
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 have seen posts such as
Cypress - run test in iframe for how to handle iframes in Cypress. But I am using the old and outdated frames, which is what a legacy system (that I have to test) uses.
I have checked Github -Cypress iframes which is recommended by Cypress, but haven't found an answer for plain old frames. Using the solution for iframe, hasn't worked.
The problem is the same as with an iframe where, when trying to select an element using
cy.get('input').type('test');
you receive an AssertionError stating:
Timed out retrying after 4000ms: Expected to find element: input, but never found it.
Any advice is appreciated.
I don't have any experience with <frame>, but testing on this source
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<meta name="robots" content="noindex">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Example page</title>
</head>
<frameset cols="150,*">
<frame src="example_a.html">
<frame src="example_b.html">
<noframes>
<body>
<p>Alternate content</p>
</body>
</noframes>
</frameset>
</html>
example_b.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="robots" content="noindex">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Example page</title>
</head>
<body>
<input />
</body>
</html>
this test works
cy.visit('http://127.0.0.1:5500/index.html') // served from vscode
cy.get('frame')
.eq(1) // 2nd frame
.then($frame => $frame[0].contentWindow) // it's window
.its('document.body')
.within(() => { // sets cy.root() to 2nd frame body
cy.get('input')
.type('something')
.invoke('val')
.should('eq', 'something')
})
If you've got more complicated stuff to do, you can try visiting the frame's source, for example this makes the frame content the top window
cy.visit('http://127.0.0.1:5500/example_b.html')
cy.get('input')
.type('something')
.invoke('val')
.should('eq', 'something')
You can try something like this:
cy.get('#iframeSelector')
.then(($iframe) => {
const $body = $iframe.contents().find('body')
cy.wrap($body)
.find('input')
.type('test')
});
I'm trying to include a long string in an external file using the following syntax:
<fx:String id="myText" source="examples/text.txt" />
But it's generating an error:
1084: Syntax error: expecting identifier before rightparen.
Is there something I'm missing?
I've seen similar for embedding a text file using ActionScript but I would like to embed a string value using MXML.
I've found this example on Flex help docs:
<fx:String id="myStringProperty1" source="./file"/>
I can't see anything that I'm doing differently.
OK I found the cause. In my external file I have a few curly braces. The compiler is getting hung up on those.
Here is the contents of my external file:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<style type="text/css" media="screen">
html, body {
height:100%;
}
</style>
</head>
</html>
The part where it has body { height:100% } it is interpreting it as data binding. Here is the generated ActionScript:
result[1] = new mx.binding.Binding(this,
function():String
{
var result:* = "<html xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"en\" xml:lang=\"en\"> \n <head>\n <style type=\"text/css\" media=\"screen\"> \n html, body " + (
height:100%;
) + "\n </style>\n </head>\n</html>";
return (result == undefined ? null : String(result));
},
null,
"HTML"
);
As you can see it thinks I'm using data binding between the curly braces. Since I'm not, it's throwing an error because "height:100%" is out of context where it's being used.
I think I will have to try a different method to embed this text. It seems to be fine if I use this but I rather not:
<fx:String id="HTML">
<![CDATA[<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<style type="text/css" media="screen">
html, body {
height:100%;
}
</style>
</head>
</html>]]>
</fx:String>
UPDATE!!!
I WAS WRONG! It is possible. I have to escape at least the opening curly brace and then it works.
Contents of file that works:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<style type="text/css" media="screen">
html, body \{
height:100%;
\}
</style>
</head>
</html>
Hi I´m having a hard time getting my og metatags to change dynamically( banging my head against the wall). I want to change the og:description dynamically based on an input field.
Here is what I have been able do figure out so far:
$og_description = $_POST['question'];
$custom_input = array("value" => $og_description);
<meta property="fb:app_id" content="xxxxxxxxxxxxxx" />
<meta property="og:site_name" content="Site name etc.. " />
<meta property="og:description" content=" <?php echo "this is {$custom_input['value']} !"; ?>" />
It works just fine outside the meta tags, but for some reason I just end up with it echoing the text "this is".
Any help would be greatly appreciated:)
<!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">
I am using this .inc file to link my php page to MySQL however my browsers says the following message as :
Warning: require_once(../FinalApplicationDWP/Public_html/dbstuff.inc): failed to open stream: No such file or directory in /home/cs12jkk/public_html/functions.inc on line 6
and
Fatal error: require_once(): Failed opening required '../FinalApplicationDWP/Public_html/dbstuff.inc' (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home/cs12jkk/public_html/functions.inc on line 6
My filies are saved on in a file on my desktop FinalApplicationDWP>public_html> then all the files
<?php
require_once ("..dbstuff.inc");
require_once ("validation.inc");
?>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
It is not finding the file in the require_once lines.
For starters try:
require_once ("../dbstuff.inc");
Notice the extra /
Other than that check the file paths, make sure they are in the correct place.
try changing your code to::
<?php
require_once("file:///jordanking48$/Users/jordanking48/Desktop/FinalApplicationDWP/public_html/dbstuff.inc");
require_once ("validation.inc");
?>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
and make sure that you gice the right path for the files changing <"..dbstuff.inc"> to <"../dbstuff.inc">