I have standard html files with their own style, and use a common css file for different fonts only. I need to put the FB website thumbnail to all the files through that css.
Is it possible to add the following to the css or .js files? (as there are thousands of html files):
<meta property="og:image" content="http://websitename/image.jpg">
You'll need to add that snippet to the html itself, not the css. Meta tags go into the head of your webpage (between the <head></head> tags). There's no way to insert html into a page via a css file.
OpenGraph is some standard - even if you did put it inside your CSS - nobody would know it's there - so no, it can't be done with CSS.
If some website would process the javascript (but facebook hardly would) you could get lucky but the chances are really low so it is not reliable.
However I suggest you to write a little e.g. PHP skript that would run through all the .html / .htm files and would rewrite <head> with <head> <meta property="og:image" content="http://websitename/image.jpg">
But I suggest that instead of adding only html, it would be much better if you would add an include script that would contain further cross-files changes. So next time you would need to add something to <head> in all your files you would just add it inside your e.g. my_include.php
EDIT:
I would also recommend you to look at the facebook's developer tool that tells you exactly what it sees when it visits your site: https://developers.facebook.com/tools/debug/og/echo?q=YOURSITEURL
Related
I imagine this has been asked time and time again, but i've not seen the answer I'm looking for.
Im doing some simple tests with a HTML file and CSS file trying to stop the page from render blocking the CSS, running the site through page insights ( google )
Now i've seen answers like this:
<link rel="stylesheet" href="style.20180530.css?ver=1.0" media="none" onload="if(media!='all')media='all'">
and I've seen answers like this:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,700" rel="preload" onload="this.rel='stylesheet';this.removeAttribute('onload');" as="style">
Both of which I am fine with, for the google fonts! But not for the main styles of the page, I don't think its a good user experience to see a page with no styles and then all of a sudden they load in.
Obviously you can eliminate any blocking of CSS by sticking the whole lot as inline styles, but again I don't think this is good practice, you're outputting all styles to a HTML page and not loading them via a style sheet.
I've seen sites actually load the styles like so:
<link rel='stylesheet' id='main-css' href='./style.2018052108.css?ver=4.9' type='text/css' media='all' />
Heres a link to the page insight speed test on the. I know the site is running wordpress. If you view page source it uses the exact same as i've used above.
And they aren't Render Blocking at all... How?
Im on a https I'm using cloudflare and my style sheet is compressed and only around 24bytes and I'm still getting render blocking.
Why?
How to avoid it?
The CSS loaded as an external request is always render blocking, you can't avoid it. The recommendation on pagespeed insights is that you don't do any css request before the content is loaded, in order to avoid the unstyled effect they suggest that you inline the CSS needed to display the content before the fold.
The page on your example is doing exactly that, they inline some css content (check the source code and search for the style tag), then, when the content is loaded they add an external stylesheet with javascript.
All that said, this is a recommendation, you can ignore it if you are happy with the performance of your page, if you want to follow the recommendation you can apply some techniques to achieve this in an automation way.
As always, in css-tricks you have a great introduction post to these techniques: https://css-tricks.com/authoring-critical-fold-css/
The key to the Google PageSpeed insights is above-the-fold render blocking. If you check the site that you linked as your page speed test reference, there are no strictly inline styles - you are correct. However, they have a <style>...</style> block inside of their <head> that sets all of their most important styles for above-the-fold content. That means those styles render immediately, and all other supporting styles will load soon after - but your visitors (and Google PageSpeed) will not notice the difference.
I am building a web2py application.
I use my own css file called style.css
I do know that the following code
{{response.files.append(URL('static','css/base.css'))}}
{{include 'web2py_ajax.html'}}
will link my css file to my application.
I use this for layout.html; which is used for every page of application.
Initially, I do not have problem with this...
Suddenly, at some point, my css is not updated...
Every css before the point, works fine.
Every css after the point, do not work at all.
In web2py editor, all css changes are updated. However, If if run it, the css is not updated... If I inspect the css code using chrome, the css is not updated and remain to previous css file..
for clarification, I give you example
initially I just have the following.
#title{
font-size: 90px;
}
then I change it to the following
#title{
font-size:100px;
}
IN the web2py editor, the change is saved and set it to 100px. However, if i run the application and view css file using chrome inspect, it is still remained as 90px.
I thought the server may have some error, so I restarted. I still get error.
Another thing I can think of is the confit with bootstrap..
The following is the head part of layout.html
<head>
<title>NR</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
{{response.files.append(URL('static','css/bootstrap.min.css'))}}
{{response.files.append(URL('static','css/style.css'))}}
{{include 'web2py_ajax.html'}}
</head>
Actually, I do have a solution...
If I create css file with different name, and copy and paste all css work, it work!!
However, this takes extra work... create new css file and copy and paste.... It is not good way.
Can you help me?
Thank you
Perhaps your web server is configured to set the HTTP response headers so the assets will be cached by the browser (in which case, they will not be re-sent on every request). If this is just a development issue, you can simply force your browser to reload all assets (e.g., by pressing CTRL-F5).
For a more general solution, see the documentation on static asset management.
Another option is to let web2py serve the static content itself, in which case, the assets will be re-requested with each page and web2py will return 304 responses if the assets have not changed since last sent.
I'm mostly certain that I set up my HTML script correctly, and made sure that the needed CSS file would be hosted in a shared folder on Google Drive, correctly cited, etc.
However, when I copy my HTML code into the box, and save it all, the editor always throes this error: 1+12 - 125: failed to load external url navigator.css
While I would think that linking the CSS file to the HTML code regularly, as I posted below, I only see so many issues coming up with CSS linking, and even more worrying, is that the Google support documentation (here) says that an HTML box can't 'refer' to external code, including what I believe may be such a CSS file.
<link href="http://[mixed aplhanumeric subdomain].googledrive.com/host/[shared folder's 'mixed' address]/navigator.css" rel="stylesheet" type="text/css">
Given that, would anyone know a simple workaround to linking the HTML to the CSS code in the Google sites HTML box?
The documentation shows an example with the CSS in <script> tags. I don't perceive any indication that including CSS from an external file is allowed. The documentation explicitly states that <link> tags are not allowed. The reason why Google Sites can't load CSS in a linked file, is because link tags are not allowed. You're only choice is to include the CSS in <style> tags.
There is an alternative though. You can create an Apps Script HTML Service application with separate HTML and CSS files, and then put the Apps Script application into your Google Site.
Apps Script HTML Service
If you want to use Css on Google SItes , you can use directly. not to use link.
I am doing one project in asp .net.Its completed,then the same project will be done in html5. How to convert the .aspx pages and master pages to html 5? Is it possible?If any one know please tell me.
You can technically make the page HTML5 by changing the doctype...
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
It is also recommended that you specify a lang attribute on the html tag and include the meta tag to define your character set.
This won't give you instant HTML5 semantics, but this is essentially step one. Using the right elements for the right kinds of content will be down to you, for example deciding when to use header, article, section, footer instead of plain div elements and so on.
You should also be able to select "DOCTYPE:HTML5" from the toolbar in Visual Studio - I don't know what version you are using, but I think in the previous version you could download a HTML5 language extension, I'm pretty sure it is included by default in Visual Studio 2012.
what you can do... if I understand your question correctly is, rightclick and say view page source and copy your html or install google chrome and the on each page you can go rightclick and inspect element. you can copy and paste the html of each page including the masterpage content. Its a sloppy way but will work if you only want the html
One of the way that i think you can do is to use http://modernizr.com/ kind of framework to switch between html5 and normal html easily .
I have a landing page created as a single html file with an external css file and a bunch of jpeg images. It looks fine and everything is good with it. I need to insert this page as an article in Joomla so that it looked the same way as it does now, without broken styles and missing images. It should show all header, footer and sidebar content from Joomla and the landing page as a regular page. What is the right way to do that?
Create a blank template for joomla and paste the whole body of your landing page to a joomla article.
Alternately, if you are using a totally different stylesheet, you may have better luck if you turn it into a custom template. Joomla's templating model is tremendously simple and abnormally flexible!
Try this
place the css,scripts,images in the root folder of your website.
path could be
/css/style.css or for localhost /joomla/css/style.css
/scripts/script.js or for localhost /joomla/scripts/script.js
/images/image.jpg or for localhost /joomla/images/image.jpg
copy and paste your html code including the file paths in article editor.
this could be
<link href="/css/style.css" rel="stylesheet" type="text/css" media="screen" />//for css
<script type="text/javascript" src="/scripts/scripts.js"></script>//for javascript
<img src="/images/image.jpg" />//for images
use absolute paths for locating your files.
this is irrespective of templates