How to change meta content attribute and update document mode dynamically? [duplicate] - javascript

I have this:
<meta name="description" content="NEED_TO_UPDATE_THIS" />
<meta name="keywords" content="" />
and i need to update the content of meta tag that has the name="description" using jQuery. How can i use the selectors to choose that content atribute of that tag?
thanks

$('meta[name=description]').attr('content', 'new value');
Although doing this doesn't make much sense because web crawlers which use this tag usually don't support javascript.

This will make sense when you are using phantom js and prerender the js pages for seo and proxy the bots to the pre-rendered pages instead to the live site.

Related

Share facebook url in html using handlebar templates

I am trying to share my content on Facebook. Right now I am trying to create url like so.
http://www.facebook.com/sharer.php?s=100&p[url]={{encodeURL data.url}}&p[title]={{data.itemTitle}}
url and title needs to be dynamic and encodeURL is a helper that run encodeURIComponent function on string. Right now, url loads up but title is not being shown.
I think sharer no longer support params as mentioned in following post.
https://developers.facebook.com/x/bugs/357750474364812/
I have gone through og meta tags as mentioned in many threads.
<meta property="og:url" content="myurl"/>
<meta property="og:title" content="my title" />
But in handlebars, I have one default file that have head tag that runs at start of application. And also I need to have dynamic url and title.
Can any body provide me some hints or resources?

Dynamic Twitter Card Images

I have a Twitter share button on an application I'm building. I am using the Twitter card <meta> tags (documentation) to define the image that shows up on Twitter. The application is dynamic and allows you to share individual 'reports'. When you share an individual report, I have a query parameter ?report=1608 (see example).
The problem: I can only define one Twitter card for the entire site. I would love to dynamically change the card information (title, text, image) for each individual report that is shared.
Can this be done? Any ideas?
I was thinking about just updating the meta tags dynamically with JavaScript, but I don't think this would work as a solution.
No, this is not possible. Twitter's card crawler (Twitterbot) does not support executing Javascript in the page and requires that the meta tags are static. There's no way to do this dynamically.
It is possible, you can dynamically load in the title, text and the image. I tried it and it worked... but it takes a little time to populate on the browser/website, but it works perfectly/instantly on the twitter app... need a workaround for that... Let me know if you find any solution for that. This is how I used it:
<?php
if (isset($_GET['code'])) {
?>
<meta name="twitter:card" content="summary_large_image">
<meta property="og:image" content="https://example.domain/i/<?= $_GET['code'] ?>.png" />
<meta name="twitter:image" content="https://example.domain/i/<?= $_GET['code'] ?>.png">
<meta name="twitter:image:alt" content="image_alt">
<?php
}
?>
I think you can do the SSR. good luck

how to include small image with google share button

<li></li>
How could I add a message and a small image to share with the above (URL that currently does).
There are a couple of ways to accomplish what you're trying to do.
Option 1: Microdata
This would be the best way in my opinion, but it may take a bit of getting used to. Microdata is very powerful and there are many implementations for different types of data. The standard can be found on schema.org.
Google has a nice tool for testing Microdata, it's called the Structured Data Testing Tool.
Option 2: Open Graph Protocol
This is a bit easier to implement as it's simply just adding meta tags that are named following the protocol listed on their website.
Example:
<meta property="og:title" content="Your title about post" />
<meta property="og:url" content="http://www.website.com/coolwebsite/" />
<meta property="og:image" content="http://www.website.com/images/g_co.jpg" />

Change the viewport on one specific page

I need to make one specific page on my site respond to screen sizes with the viewport meta tag. The viewport meta tag is generated by a php file in the back end.
Currently my viewport tag looks like this:
<meta name="viewport" id="viewport" content="width=1040"/>
I'm using this jQuery to edit the tag:
jQuery(document).ready(function(){
jQuery('meta[name="viewport"]').attr('content', 'width=device-width, initial-scale=1.0');
});
In hopes the viewport tag will turn out like this:
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1.0"/>
I don't identify a page in the jQuery because I have a plugin that lets me run scripts on individual pages. To be more specific, my CMS is Wordpress, my themes are Genesis and the Genesis Sandbox, I'm using an SEO by Yoast plugin, as well as Gravity Forms. How would I go about changing the viewport meta to my desired code?
Try this ... simple, but reasonable solution for sites that are heavily coded.
1. If you are using "meta viewport" tag in "head" then, below script will work.
jQuery(document).ready(function(){
jQuery('meta[name="viewport"]').prop('content', 'width=device-width, initial-scale=1.0');
})
2. If "meta viewport" tag in "head" is not present then, use the following script.
jQuery(document).ready(function(){
jQuery("head").append('<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1.0"/>');
jQuery('meta[name="viewport"]').prop('content', 'width=device-width, initial-scale=1.0');
})
Note: Be sure that you are using "jQuery library version 1.6+" in your webpage.
According to me.. It will definitely work. :)

parsing html using Jsoup - returned document with robots meta tag

My problem is when I am using jsoup lib for parsing a specific url, it has been great till one day my parsing has corrupted, the document that has returned had some few tags which was not anything like the old document, it had meta tag named "ROBOTS".
An example of the header in the response:
<head>
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="initial-scale=1.0" />
</head>
My question is, how do you think I can overcome this block? Tried using several other libraries which parse javascript as well, but it wasnt helpful and resulted the same, maybe I didn't use it right.
(I have learnt that the meta tag robots was made for preventing bots, initially for search engines, how can I bypass this behavior? How can I act like a regular every-browser client?)
You didn't explicitly state this in your answer, but I'm assuming Jsoup is being sent different HTML than what your browser sees. In that case, you probably need to set the user agent header so Jsoup looks like your browser.

Categories

Resources