nystudio107 / craft-seomatic

SEOmatic facilitates modern SEO best practices & implementation for Craft CMS 3. It is a turnkey SEO system that is comprehensive, powerful, and flexible.
https://nystudio107.com/plugins/seomatic
Other
165 stars 70 forks source link

Using raw twig filter results in escaped html tags #1137

Closed webtrend closed 2 years ago

webtrend commented 2 years ago

Question

I am trying to create maineEntity property for our FAQ page using the code provided in your example page. Since both "Questions" and "Answers" allow html tags, I am trying to use twig's raw filter as shown below

     'type': 'Question',
     'name': entry.question|raw,
        'acceptedAnswer': {
                'type': 'Answer',
                'text': entry.answer|raw,
           },

However the json output is all escaped like this "\u003Cp\u003EWe highly recommend these steps to get accustomed to our platform in the following order:\u003C/p\u003E\"

How do I un-escape this string? I tried {% autoescape false %} but that does not seem to help.

Additional context

Add any other context or screenshots about the support request here.

webtrend commented 2 years ago

I also realized that removing raw filter does not seem to have any impact at all. I still get escaped string

khalwat commented 2 years ago

I'm not really sure what the answer is here -- I think this is more of a Twig thing than an SEOmatic thing -- but I would think that entry.answer | raw should do it.

What happens if you do this as a test:

{% dd entry.answer | raw %}

?

webtrend commented 2 years ago

{% dd entry.answer | raw %} dumps the data correctly with proper html tags. The problem appears only within the plugin. It seems like the twig filter has no impact on the output. I even tried capitalize filter on it and the output did not produce any capitalization. It just gives the same escaped string. Here is the relevant code for your review. Please note that I only have 1 answer for each faq question and therefore I don't have to loop through the answer.

      {% set faqsArray = seomatic.jsonLd.create({
                                'type': 'Question',
                                'name': entry.question | raw,
                                'acceptedAnswer': {
                                            'type': 'Answer',
                                            'text': entry.answer|raw,
                        },
                    }, false)
        %}
        {% set mainEntity = seomatic.jsonLd.get('mainEntityOfPage') %}
        {% do mainEntity.setAttributes({
                        'mainEntity': faqsArray,
                        })
        %}
webtrend commented 2 years ago

I also tried to set up a twig variable like this {% set faqanswer = entry.answer|raw %} and then tried to use faqanswer variable within the create function. It still does not work.

webtrend commented 2 years ago

Here is the actual content dump from craft of the answer object

  craft\redactor\FieldData#1
 (
    [craft\redactor\FieldData:_pages] => null
   [craft\htmlfield\HtmlFieldData:_rawContent] => '<p>We highly recommend these steps to get accustomed to our platform in the following order:</p><ol><li>Read our <em><a href=\"/product/native/helparticles/getting-started\">Getting Started</a> </em>article series to get familiar with the UI</li><li>Next learn about the <em><a href=\"/product/native/topic/product-features\">Product Features</a></em> to fully understand how you can use the various options the platform provides</li><li>Finally read our <a href=\"/product/native/topic/advanced-strategies\">Advanced Topics &amp; Strategies</a><em> </em>articles to become a master at finding winning campaigns to improve your ROI.</li></ol>'
   [Twig\Markup:content] => '<p>We highly recommend these steps to get accustomed to our platform in the following order:</p><ol><li>Read our <em><a href=\"/product/native/helparticles/getting-started\">Getting Started</a> </em>article series to get familiar with the UI</li><li>Next learn about the <em><a href=\"/product/native/topic/product-features\">Product Features</a></em> to fully understand how you can use the various options the platform provides</li><li>Finally read our <a href=\"/product/native/topic/advanced-strategies\">Advanced Topics &amp; Strategies</a><em> </em>articles to become a master at finding winning campaigns to improve your ROI.</li></ol>'
[Twig\Markup:charset] => 'UTF-8'
 )
khalwat commented 2 years ago

So I just realized I was thinking about this wrong... JSON-LD appears inside of <script> tags, so the text container therein has to be escaped for a JavaScript context, not an HTML context.

So the encoding that you're seeing is correct.

webtrend commented 2 years ago

You are correct. I check Google's Rich Result tool and the text seem to be getting imported with html tags :) I got confused by the example on Google's own site which shows actual tags https://developers.google.com/search/docs/advanced/structured-data/faqpage