Use a DIV's Contents as an HTML Page's Title?

Question

I'm building a social media based news site, and for the sharing element to work (Twitter, Facebook etc.), the page's value must reflect it's "headline" (e.g. when the page is shared online, the title should be "Man Bites Dog", not "My News Site").

I've tried multiple PHP and jQuery solutions, but nothing seems to work. There is a complication, though. The site's content is delivered via RSS feed from Blogger, and I'm using jQuery to parse the "headline" RSS and display it on the page. Since the "headline" content is dynamically generated when the page loads, could this cause the problem?

If so, is there a way to use the same RSS-based method to change the value?

Here's the code I'm using to aggregate and display the RSS "headline" feed...

<script type="text/javascript">

        jQuery(function($) {
    $('#headline').rssfeed('http://cjfoote.blogspot.com/feeds/posts/default?alt=rss', {
        limit: 1
    });
});

</script>

Wouter J · Answer 1 · 2012-01-22T17:21:24.600

2

Remember:

If you use JS to change the title a searchrobot cannot read the new title. So it don't effect your SEO.

If you use PHP to change the title it has a positive influence on your SEO.

If you want to use PHP, look for simpleXML to read the RSS file and then simply echo the correct headline.

edited Jan 22 '12 at 17:21

answered Jan 22 '12 at 17:13

Wouter J

41,455
15
107
112

This sounds like the right method, but I have no idea how to use XML. I tried a few different PHP echo-ing methods, and tried to echo the contents of the "headline" DIV, but since the DIV is technically empty, it didn't work. – Chris Foote Jan 22 '12 at 17:38

score 1 · Answer 2 · edited May 23 '17 at 12:11

1

Essentially you are asking how to change the title of the page using jQuery: jQuery: how to change title of document during .ready()?

   <script type="text/javascript">
      $(document).ready(function() {
        document.title = getHeadlineFromFeed();  
      });

      function getHeadlineFromFeed() {
            // your logic for retrieving the rss feed
      }
    </script>

edited May 23 '17 at 12:11

Community

1
1

answered Jan 22 '12 at 17:10

Jason

15,915
3
48
72

By "logic", do you mean the code I use to aggregate the RSS feed into the "headline" DIV? This is the code: – Chris Foote Jan 22 '12 at 17:55
yes, you need to get the headline from that element. maybe something like document.title = $("#headline").text() – Jason Jan 22 '12 at 17:57
I tried this: But it didn't work. I thought that since the "rssfeed" part was already included in the "headline" aggregator code, I wouldn't need to define the function in the new title code? – Chris Foote Jan 22 '12 at 18:15
Update your question with the code you use to fetch the headline and it will be easier to help. – Jason Jan 23 '12 at 02:16
I've added it, sorry, meant to do that earlier. – Chris Foote Jan 23 '12 at 13:25
so, the code you posted adds some text to the element with id 'headline'. grab the text from that element, and add it to document.title – Jason Jan 23 '12 at 14:55
Sorry, how d'you mean "grab the text"? The problem is that the text is generated dynamically, so there is no set content within the "headline" DIV to grab:
– Chris Foote Jan 24 '12 at 23:47
Aren't you adding text to the div after the page loads? After the content is set, get a copy of the text and use it to set the document title property – Jason Jan 25 '12 at 02:57

score 0 · Answer 3 · answered Jan 22 '12 at 17:12

0

From your question, it sounds like at some point you have the title you want to show in a JavaScript variable. If so, you can set the page title by assigning that to document.title:

document.title = varname;

Live example

answered Jan 22 '12 at 17:12

T.J. Crowder

1,031,962
187
1,923
1,875

score 0 · Answer 4 · answered Jan 22 '12 at 17:14

0

Just set the document's title property with whatever value you want to show as a title.

document.title = "new title";

answered Jan 22 '12 at 17:14

ShankarSangoli

69,612
13
93
124

kfuglsang · Answer 5 · 2012-01-22T17:16:53.323

-1

Why not use plain old JavaScript to set the title?

document.title = $('#headline').html();

It can be set to the contents of your #headline elements content.

edited Jan 22 '12 at 17:16

answered Jan 22 '12 at 17:10

kfuglsang

2,385
2
21
26

You're actually using plain javascript and jquery :o) – Didier Ghys Jan 22 '12 at 17:12
True, it was mostly for demonstration that he can still mix things :) – kfuglsang Jan 22 '12 at 17:12
I edited my answer at the same time as @Madmartigan commented my answer. Initially, I had forgotten ".html()". – kfuglsang Jan 22 '12 at 17:22
@T.J.Crowder: My comment was before the edit, but even still - you should use `text()` not `html()` for the `` tag because it doesn't accept child elements. – Wesley Murch Jan 22 '12 at 17:22
@Madmartigan: Gotcha, sorry. And yes, I actually meant to mention that. :-) – T.J. Crowder Jan 22 '12 at 17:26
This looks great (the simpler the better), but it doesn't seem to work. No error messages, but the page title doesn't change. – Chris Foote Jan 22 '12 at 18:32

Use a DIV's Contents as an HTML Page's Title?

5 Answers5