# Dynamic open graph and twitter images in meta tags of topic page when image is not present in topic

**URL:** https://meta.discourse.org/t/dynamic-open-graph-and-twitter-images-in-meta-tags-of-topic-page-when-image-is-not-present-in-topic/65684
**Category:** Development
**Created:** [5 Luglio 2017, 7:16pm UTC](https://meta.discourse.org/t/dynamic-open-graph-and-twitter-images-in-meta-tags-of-topic-page-when-image-is-not-present-in-topic/65684 "2017-07-05T19:16:07Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![net\_deamon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/net_deamon/32/70126_2.png) [@net\_deamon](https://meta.discourse.org/u/net_deamon)
#### Post date: [5 Luglio 2017, 7:16pm UTC](https://meta.discourse.org/t/dynamic-open-graph-and-twitter-images-in-meta-tags-of-topic-page-when-image-is-not-present-in-topic/65684/1 "2017-07-05T19:16:07Z")

</div>

I have seen one solution where the first image in the topic will be used for open graph and twitter tags

[https://meta.discourse.org/t/difficulties-with-facebook-sharing-and-opengraph-tags-wrong-images-excerpt-contains-image-text/22744/57?u=net\_deamon](https://meta.discourse.org/t/difficulties-with-facebook-sharing-and-opengraph-tags-wrong-images-excerpt-contains-image-text/22744/57)

But my issue is something different.  
I need to provide custom images just as mentioned above, but the image would not be present in the topic content (it will be present in topic custom fields).

I checked the ApplicationHelper class containing `crawlable_meta_data` function.

> <https://github.com/discourse/discourse/blob/6ab46924311919a4b1b54005e5f1187b17bd37e1/app/helpers/application_helper.rb#L158>

But how do I dynamically set the tags in topic view. I used serialiser to insert `excerpt` inside topic, but it had no effect on meta tags.

```
  add_to_serializer :topic_view_ , :excerpt do
        # add custom fields to topic view excerpt
  end

```

I also tried dynamically changing meta tags using javascript, but it did not have any effect as the facebook and twitter will parse the head tags once (first time), while javascript will change the meta tags later.

If you can even point me to relevant code, it would be helpful, as I am not sure how to use `applicationhelper` inside topic serialiser.

---

<div class="post-metadata">

### Author: ![net\_deamon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/net_deamon/32/70126_2.png) [@net\_deamon](https://meta.discourse.org/u/net_deamon)
#### Post date: [6 Luglio 2017, 2:50pm UTC](https://meta.discourse.org/t/dynamic-open-graph-and-twitter-images-in-meta-tags-of-topic-page-when-image-is-not-present-in-topic/65684/2 "2017-07-06T14:50:15Z")

</div>

If the question was confusing,  
I just want to change the meta tags dynamically for open graph ( facebook ) and twitter share.

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [6 Luglio 2017, 2:54pm UTC](https://meta.discourse.org/t/dynamic-open-graph-and-twitter-images-in-meta-tags-of-topic-page-when-image-is-not-present-in-topic/65684/3 "2017-07-06T14:54:03Z")

</div>

The serializer is a response in JSON format for an API call. It won’t be used when generating a page’s HTML.

Those tags are using the [TopicView](https://github.com/discourse/discourse/blob/master/lib/topic_view.rb) model, so you’ll have to extend it using `add_to_class` instead of `add_to_serializer`.

---

<div class="post-metadata">

### Author: ![net\_deamon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/net_deamon/32/70126_2.png) [@net\_deamon](https://meta.discourse.org/u/net_deamon)
#### Post date: [6 Luglio 2017, 3:03pm UTC](https://meta.discourse.org/t/dynamic-open-graph-and-twitter-images-in-meta-tags-of-topic-page-when-image-is-not-present-in-topic/65684/4 "2017-07-06T15:03:53Z")

</div>

Thank you @eviltrout. I am still learning ruby, but what I understand is I have to override the summary method in TopicView class (using `add_to_class`, as you suggested), change the excerpt to my own string containing img tag. Is my understanding correct?

```
def summary
    return nil if desired_post.blank?
    # TODO, this is actually quite slow, should be cached in the post table
    excerpt = desired_post.excerpt(500, strip_links: true, text_entities: true)
    (excerpt || "").gsub(/\n/, ' ').strip
  end

```

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [6 Luglio 2017, 3:08pm UTC](https://meta.discourse.org/t/dynamic-open-graph-and-twitter-images-in-meta-tags-of-topic-page-when-image-is-not-present-in-topic/65684/5 "2017-07-06T15:08:22Z")

</div>

Yes, that should work.
